Come creare una barra dei menu di ridimensionamento

Ultimamente alcuni siti web, come Questa è la brigata e Tutto quello che , ho iniziato a presentare un menu dinamico e animato che si ridimensiona con lo scorrimento verso il basso. Ridurre al minimo la navigazione principale per consentire più spazio per il contenuto. In questo tutorial, spiegherò come puoi creare questo menu tu stesso con HTML5, CSS3 e solo un po 'di jQuery.

Questo tipo di menu è ottimo se si desidera concentrarsi in modo particolare sui contenuti dell'intero sito Web e consente inoltre di creare una navigazione più ampia e di maggior impatto sulla prima visita di un utente a un sito Web. Puoi mostrare meglio la marca o il logo del tuo sito web, ottimo per la vista above the fold; e dopo aver coinvolto l'utente in una visita, una versione ridotta e minimizzata si nasconde sottilmente per consentire all'utente di concentrarsi principalmente sui tuoi contenuti.

Ci sono diversi modi per farlo. In questo tutorial, spiegherò come creare una barra di menu fissa a larghezza piena, che si ridimensiona in altezza insieme al logo, creando una versione minimizzata semplice di quella iniziale. Se preferisci, puoi anche sostituire l'immagine del logo con un'altra variante del tuo logo, come le iniziali o un'icona, ma tieni presente che la coerenza è davvero importante qui, in modo che l'utente comprenda come l'elemento è cambiato e che il suo scopo principale è ancora quello originale; navigando nel sito.

Prima di iniziare, puoi controlla la demo o scarica la fonte da qui .

Creazione della struttura di base in HTML

Inizieremo creando il codice HTML di base di cui avremo bisogno. Ci atterremo a una struttura HTML5 davvero semplice per il punto di partenza.

Ora che il nostro codice HTML iniziale è terminato, aggiungeremo il codice per il menu e altri dettagli sulla testa del nostro file HTML.

  
  Prendiamo quel menu piccolo! 
  Fine della linea. 

In our : abbiamo aggiunto il meta tag all'autore per identificare il creatore del file; in seguito abbiamo incluso il famoso reset.css di Eric Meyer che resetterà quasi ogni elemento del tuo file HTML, offrendoti un documento più semplice e pulito su cui lavorare. E poiché utilizzeremo jQuery in seguito, nella riga finale del nostro elemento head lo importeremo attraverso il jQuery CDN.

Ho hotlinkato la maggior parte dei file per mantenere il documento il più semplice possibile, ma tieni presente che se preferisci puoi scaricare le ultime versioni di tutti questi file e usarli localmente lungo il tuo file HTML, e questo preverrà possibili problemi con compatibilità di versione o cambiamenti in questi file in futuro.

Nel nostro tag, abbiamo usato l'HTML5 predefinito