In questo video-tutorial vediamo come gestire un menù di tipo dropdown, cioè con voci di menù di secondo livello che si aprono al passaggio del mouse della voce principale. Molto semplice è la gestione di un menù di sole voci di menù di primo livello, mentre con più livelli è più complicato perché dobbiamo anche gestire le sotto voci costituite dagli “ul nidificati nei tag li”.
Io ho trovato una soluzione con il plugin pushy.js. che è un menù di navigazione responsive off-canvas che usa le transizioni e trasformazioni CSS. Vediamo come funziona. Qui ‘è tutta la documentazione.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME TRASFORMARE UN MENU’ DROPDOWN IN MENU’ RESPONSIVE”—

Nome *

Email *

Per piacere seguici e metti mi piace:

Dopo il grande successo del video “Come realizzare un menù a tendina con le transizioni Css3” in termini di visualizzazioni che però ha creato non pochi problemi, sia per la visualizzazione che per il montaggio ( chiedo ancora scusa ma ero alle prime esperienze in termini di video-tutorial) ho deciso di riscriverlo modificandolo leggermente il codice e creandone una versione responsive ( che vedremo nel prossimo video tutorial ).
(altro…)

Per piacere seguici e metti mi piace:

In questo video-tutorial parliamo del menù di navigazione. Il menù è la prima cosa che, restringendo il browser, “si rompe” cioè non rispetta gli stili che abbiamo impostato per il menù nella risoluzione desktop.
Nel momento in cui il menù va a capo, è proprio in quel punto che dobbiamo intervenire con la media query ed inserire il nostro menù responsive.

Nelle versioni desktop è di solito realizzato in questo modo orizzontale nell’header avendo tanto spazio a disposizione.
Mentre nelle versioni più piccole siamo senz’altro limitati dallo spazio che è minore e per questo è importante utilizzare qualcosa di pratico e usabile. Questo è proprio dato dall’utilizza di un’icona che indica la presenza di un menù. Come in questo caso:

Vediamo come realizzare questo menù molto pratico nei cellulari e tablet, anche se ultimamente si sta diffondendo anche nelle versioni desktop quando si vuole dare maggior importanza alle immagini ed ecco quindi che il menù si trasforma in una icona.

Impostiamo il menù nell html con una lista non ordinata.


<nav>

<ul id="nav" class="menu">

<li><a href="#">Homepage</a></li>

<li><a href="#">Chi sono</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Servizi</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Contatti</a></li>

</ul>

</nav>

Impostiamo il nostro stile del menù e dopo possiamo passare ad inserire la nostra icona nell’html utilizzando il carattere unicode ☰ che rappresenta proprio l’icona del menù
Inseriamola prima della lista non ordinata in questo modo:

<a id="nav-menu" class="nav-menu"></a>☰

Poiché l’icona rappresenta il menù nella versione responsive, dobbiamo dopo aver impostato il nostro stile, renderla non visibile nella versione desktop.
Supponiamo che fino a 768 px ( risoluzione tablet portrait ) il nostro menù icona sia visibile e quindi fino a769px sarà visibile il nostro menù il stile orizzontale con le voci visibili. Per cui

#nav-menu{
float:right;
line-height:40px;
margin-right:10px;
color:#fff;
cursor:pointer;
display:none;

}

Dopodiché possiamo inserire la nostra mediaquery che indica che il menù icona sarà visibile da 0px a 768px per cui in questo caso dobbiamo nascondere il menù classico e visualizzare la nostra icona:

.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;

}
#nav-menu{
display:block;
}

INSERIMENTO DEL CODICE JQUERY

Adesso dobbiamo far si che al click dell’icona compare a discesa il menu ed al click di nuovo scompare
Prima di inserire il nostro codice jQuery però dobbiamo far si che nello stile della mediaquery il menù classico sia così settato:

.menu{
float:left;
hoverflow:hidden;
width:100%;
height:0;
}

con un’altezza pari a 0 e nascosto; mentre la classe nav-aperto con altezza auto:

.nav-aperto{
height:auto;
}

Inseriamo prima il collegamento alla libreria jQuery dal CDN di Google:
in modo che con il nostro codice jQuery inserito prima della chiusura del tag body.
Dopo aver dichiarato pronto il documento e aver settato alcune variabili, grazie alla possibilità di aggiungere una classe (AddClass) e di rimuovere una classe (RemoveClass), facciamo in modo che il menù sia cliccabile e visibile quando aggiungiamo la classe di menù aperto e nascosto quando invece rimuoviamo la classe di menù aperto.

CONCLUSIONI
Prima di concludere, vi segnalo una risorsa molto utile che mostra numerosi esempi responsive web design che contiene un sacco di esempi sul responsive design, ed una sezione è dedicata alla realizzazione del menù responsive.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “COME REALIZZARE UN MENU’ RESPONSIVE IN 3 SEMPLICI PASSI”—

Nome *

Email *

Per piacere seguici e metti mi piace:

In questo video tutorial voglio mostrarvi come realizzare un semplice menù a tendina con il codice Html5 + Css3 con due livelli di menù semplicemente utilizzando una lista non ordinata e aggiungendo le transizioni nello stile per dare una certa armonia al menù nel momento in cui effettuiamo il mouse hover.

(altro…)

Per piacere seguici e metti mi piace: