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.

 How to create a dynamic top bar | Webdesigner Depot

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

  How to create a resizing menu bar | Webdesigner Depot#">  Messaggi
Fantastici Freebies
  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

elemento. Nostro

sarà a tutta larghezza e sarà responsabile delle modifiche tra versioni grandi e piccole del menu. Diamo il nostro

una classe chiamata "large" in modo che possiamo modificare alcune proprietà specifiche nel CSS per trasformare il nostro menu nella versione più piccola. Il

è il nostro contenitore di menu che contiene l'immagine del logo del nostro sito Web e un semplice menu elenco non ordinato con tre collegamenti per il nostro sito web.

Dato che non abbiamo alcun contenuto qui, il

sta per essere utilizzato per allungare la pagina per forzare lo scorrimento, in modo che possiamo vedere il cambiamento del menu.

E questo è su HTML. D'ora in poi, dobbiamo solo modellare i nostri elementi con i CSS e rendere dinamico il menu.

Disegnare il menu e la pagina

Per mantenere questo codice in un singolo file, creerò il CSS in elemento. Quindi il nostro intero CSS verrà prima della nostra chiusura etichetta.

Qui stiamo finendo il nostro stile di intestazione di base. Il

servirà come contenitore del nostro menu. Conterrà il nostro

elemento e sarà l'elemento in cui definiamo il colore di sfondo, l'altezza del menu, gli stili di collegamenti di menu e altri. Si adatterà alla larghezza dello schermo con la larghezza della proprietà: 100% e rimarrà fissa sugli altri elementi sul sito web. È importante ricordare di impostare lo z-index per assicurarti che questo elemento si sovrapponga al resto della pagina, oltre alla posizione: fissa per rendere il div fisso in cima, in modo che rimanga nella stessa posizione mentre l'utente scorre attraverso il sito web. Come puoi vedere, oltre all'impostazione degli stili per l'intestazione, stiamo anche impostando alcuni stili specifici per la classe "large" usando header.large. Lo stato iniziale del nostro menu sarà grande e quindi stiamo definendo solo gli stili necessari per farlo apparire come vogliamo non appena l'utente entra nella pagina.

Ridimensionamento dinamico del menu

Abbiamo il nostro menu fatto e in stile, ma vogliamo comunque ridurlo. Per creare questo altro stato, creeremo una nuova classe per il

nel CSS chiamato "piccolo, questo sarà il responsabile della modifica delle proprietà che dobbiamo modificare. Abbiamo già definito il menu più grande, quindi ora dobbiamo solo ridurre il nostro menu, ridurre proporzionalmente la nostra immagine in proporzione e il margine superiore che utilizziamo nel nostro

anche gli elementi devono essere ridotti, in modo che rimangano centrati verticalmente con la nuova altezza del menu:

/* Sizes for the smaller menu */header.small{ height: 50px; }header.small img{ width: 287px; height: 69px; margin-top: -10px; }header.small li{ margin-top: 17px; }

Quindi, come puoi vedere, questi stili sono quasi identici a quelli del menu più grande, abbiamo appena cambiato la classe "large" in "small" e cambiato i valori che stavamo usando in quelli più piccoli. Stiamo usando un margine negativo in alto sull'immagine per centrarlo nel contenitore, poiché l'immagine ha un'ombra sottile ed è più alta della tipografia per adattarla. Ora abbiamo tutti gli stili necessari per fare in modo che il menu cambi dimensione e se provi a cambiare nel tuo HTML

, vedrai nel browser che il menu diventerà più piccolo. Ma abbiamo bisogno di farlo dinamicamente.

Modifica della nostra classe di menu con jQuery

Con tutti i nostri stili in atto, abbiamo solo bisogno di aggiungere un po 'di JavaScript per fare il passaggio tra le classi "grande" e "piccolo". Dal momento che vogliamo cambiare questo in base allo scorrimento dell'utente, useremo la funzione .scrollTop () in jQuery. Questa funzione ci consente di ottenere o impostare la posizione dello scroll in pixel. La posizione di scorrimento è il numero di pixel che sono già stati sfogliati dalla visualizzazione del browser. In questo caso abbiamo solo bisogno di sapere in che modo i pixel manu l'utente ha fatto scorrere in modo da poter attivare il nostro codice e cambiare le classi:

Questo è il codice JavaScript necessario per rilevare quando l'utente ha eseguito lo scorrimento. Quando l'utente ha fatto scorrere più di 100 pixel, rimuoverà la classe "grande" che abbiamo creato e aggiungere la nostra nuova classe, "piccola". In questo modo il menu cambierà in base alle dimensioni precedentemente definite nel CSS. Provalo, ormai dovrebbe funzionare già, ma potresti trovarlo troppo rigido cambiando da uno stato all'altro.

`Transizioni CSS per animare il menu`

Per rendere più fluidi i passaggi tra le classi nei nostri menu, utilizzeremo le transizioni CSS. Basta usare questo pezzo di codice accanto al resto del tuo CSS.

header,nav, a, img, li{transition: all 1s;-moz-transition: all 1s; /* Firefox 4 */-webkit-transition: all 1s; /* Safari and Chrome */-o-transition: all 1s; /* Opera */}

Qui definiamo le transizioni per tutte le proprietà CSS per

  ,   e   elementi, in pratica tutti gli elementi che stiamo cambiando.  Questo codice animerà le modifiche tra entrambe le classi con le transizioni CSS per 1 secondo.  Provalo ora, il risultato dovrebbe essere molto più agevole. 
  È il tuo turno ora 
  Ora che hai visto con quale facilità è possibile ottenere questo effetto, vai avanti e crea la tua versione di una barra dei menu di ridimensionamento.  Puoi anche diventare più creativo di me e modificare ancora più proprietà come il colore di sfondo, il colore del testo e persino le dimensioni e la posizione del menu, e persino testarlo con diversi tipi di transizioni CSS, ma tieni presente che gli utenti dovrebbero tenere il passo con le modifiche nel menu.  Il menu e il logo del sito Web sono in genere uno degli elementi più identificabili e attesi e cambiando drasticamente si potrebbe confondere l'utente, quindi assicuratevi di mantenere una certa coerenza tra le due versioni e verificate sempre con alcuni utenti. 
  Hai costruito un menu come questo?  Preferisci una tecnica diversa?  Fateci sapere nei commenti. 
  Immagine in primo piano / miniatura,   immagine fisarmonica  via Shutterstock. 


        
                        tutto il menu 
                        menu ridimensionabile 
                        ridimensiona su scroll 
                        questo è il menu di brigata



    
        
            
            ← Beyond Blogging: WordPress come piattaforma            
            Novità per i progettisti, marzo 2013 →


                
                                        
    
         Recente 
         Il migliore 
    

    
    
        
            
                          
                
                    
                        Come utilizzare l'API a schermo intero
                    
                
            
                          
                
                    
                        Beyond Blogging: WordPress come piattaforma
                    
                
            
                          
                
                    
                        Come creare una barra dei menu di ridimensionamento
                    
                
            
                          
                
                    
                        Novità per i progettisti, marzo 2013
                    
                
            
                    
        
            
                              
                    
                        
                            Creazione di esperienze WebVR con A-Frame
                        
                    
                
                              
                    
                        
                            Quindi, possiamo usare le variabili CSS ancora?
                        
                    
                
                              
                    
                        
                            11 progetti CSS sperimentali che ti faranno perdere la testa
                        
                    
                
                              
                    
                        
                            7 modi in cui un kit di progettazione o un modello possono salvare il tuo progetto