Codifica un menu di navigazione a discesa stile rivista Web

Lo sviluppo web di frontend è diventato una nicchia molto popolare. Con l'espansione di jQuery, più web designer stanno iniziando a creare fantastiche animazioni ed effetti di pagina. Le possibilità sono infinite!

In questo tutorial creeremo un menu di navigazione a discesa in stile rivista. Questo verrà creato con alcune fantasiose tecniche CSS3 per lavorare con browser conformi agli standard. Anche se sei tremante con jQuery dovresti essere in grado di tenere il passo con questo piccolo pezzetto di codice, e possibilmente imparare qualcosa di nuovo. Controlla lo script demo dal vivo nel mio esempio.

Provalo

Visualizza la demo live - Scarica fonte

Strutturare la nostra pagina HTML

Dovremmo iniziare costruendo il layout di base della pagina. Ho fatto questo in HTML con una lista non ordinata per i collegamenti ai menu. Sia gli stili CSS che la libreria jQuery sono esclusi esternamente, il che consente di risparmiare un po 'di spazio. Aggiunto di seguito è l'intestazione del nostro codice HTML.

Menu a discesa Style sexy stile rivista DesignShack

La libreria jQuery v1.6.2 è ospitata sui server di Google da utilizzare per gli sviluppatori web. Questo spesso può tagliare parte del carico ai propri server. Le differenze sono particolarmente evidenti se si elaborano decine o centinaia di migliaia di visitatori ogni giorno. Ho anche impostato il mio doctype in HTML5, non che questo dovrebbe influire sul nostro script.

Scendendo un po 'nel codice diamo un'occhiata al contenuto del corpo interno. Di seguito è riportato un copia / incolla di tutto ciò che si trova all'interno del tag body. Ho rimosso il codice jQuery finale poiché lo vedremo in una sezione successiva.

<h1><img src="//lesptitesaffairesdemayl.be/img/images_1/code-a-web-magazine-style-dropdown-navigation-menu_2.jpg"></h1> <ul> <li>Homepage</li> <li>Informazioni su Mag <ul> <li>Azienda</li> <li>autori</li> <li>Scrivi per noi?</li> <li>Pubblicità</li> <li>Mettiti in contatto</li> </ul> </li> <li>omaggi <ul> <li>PSD</li> <li>Vettori AI</li> <li>Patterns</li> <li>Icone</li> </ul> </li> <li>Esercitazioni <ul> <li>HTML5</li> <li>CSS3</li> <li>jQuery</li> <li>PHP MySQL</li> <li>Ruby on Rails</li> </ul> </li> <li>Strumenti Web <ul> <li>Prestazione</li> <li>Test del browser</li> <li>Plugin CMS</li> <li>Bigliettini</li> </ul> </li> <li>Originals <ul> <li>Progettazione di siti Web</li> <li>Mobile</li> <li>Interfaccia utente</li> <li>freelance</li> <li>Ispirazione</li> </ul> </li> </ul>

Quindi questo dovrebbe finire la nostra struttura HTML principale. Tutti gli elenchi annidati utilizzano gli elementi ul posizionati all'interno di un elemento dell'elenco principale. Non troppo difficile se hai una conoscenza di base nel web design e nella programmazione. Quindi passiamo agli stili CSS.

Progettare con i CSS

Analizzerò ogni segmento del piccolo file style.css allegato al codice demo. Iniziamo con un margine di gruppo che ripristina i margini / riempimento per l'intero documento. Ripristino di una semplice pagina man, davvero.

* {margine: 0; padding: 0; } body {font-family: Arial, Tahoma, sans-serif; font-size: 11px; colore: # 232323; } / * struttura @group * / #head {background: # e1ecf6; altezza: 100 px; padding-top: 15px; border-bottom: 1px solid # d5dce8; } .wrap {width: 800px; margine: 0 auto; }

Il contenuto della testa contiene una piccola grafica del logo che ho realizzato in Photoshop. Ho usato .wrap come classe in modo da poter riutilizzare gli stessi stili con il nostro menu di navigazione. Questo wrapper crea un div del contenuto di 800px e lo centra sulla pagina.

Il gruppo successivo è un po 'più grande, fornendo gli stili per il menu di navigazione principale e le sue voci di elenco. Notare la #nav il selettore si trova sul nostro elemento originale non ordinato, quindi possiamo usarlo per selezionare tutti gli elementi secondari in seguito.

/ * @group core nav menu * / #nav {margin: 0; padding: 0; stile elenco: nessuno; border-left: 1px solid # d5dce8; border-right: 1px solid # d5dce8; border-bottom: 1px solid # d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; altezza: 50 px; padding-left: 15px; padding-right: 15px; sfondo: # edf3f7; } #nav li {float: left; blocco di visualizzazione; sfondo: nessuno; posizione: relativa; z-index: 999; margine: 0 1px; } #nav li a {display: block; padding: 0; font-weight: 700; altezza della linea: 50px; decorazione del testo: nessuna; colore: # 818ba3; zoom: 1; border-left: 1px trasparente solido; border-right: 1px trasparente solido; imbottitura: 0px 12px; } #nav li a: hover, #nav li a.hov {background-color: #fff; border-left: 1px solid # d5dce8; border-right: 1px solid # d5dce8; colore: # 576482; }

Sulla radice UL ho aggiunto 3 bordi pieni: a sinistra, a destra e in basso. Il bordo superiore copre l'intero sito Web e questo viene aggiunto nell'area dell'intestazione. Ho anche arrotondato gli angoli inferiori sinistro e destro. Questa tecnica è stata eseguita in CSS3 utilizzando -moz, -webkit e le proprietà di raggio-bordo standard.

Gli elementi dell'elenco sono dati a z-index di 999 per apparire sopra tutti gli altri elementi. Quindi in questo modo spostiamo il li originale sul nostro subnav e perdiamo il popup. Invece l'elemento li si espande fino a raggiungere l'intera altezza del nostro nuovo menu scorrevole e resta in primo piano mentre scorriamo il mouse sui collegamenti. Anche posizione: relativa; viene aggiunto per utilizzare correttamente il posizionamento assoluto nella lista interna.

I collegamenti di ancoraggio non sono troppo interessanti di per sé. Si evidenziano con uno sfondo bianco al passaggio del mouse con due bordi aggiuntivi sul lato sinistro e destro. Sul selettore finale al volo ho aggiunto un'altra classe .hov essere usato da jQuery. Questo lo renderà così quando muovi il cursore del mouse sui collegamenti del sottomenu il link nav originale rimane sospeso! Piuttosto pulito.

Stili del menu di navigazione secondaria

Questo ultimo codice CSS modellerà i nostri collegamenti ai sottomenu. Usiamo il posizionamento assoluto per spostarci attorno al nostro elemento sub-ul direttamente nella parte superiore del suo contenitore. Anche un grande effetto ombra esterna con alcune nuove proprietà CSS3.

/ * @group sottonav * / #nav ul {position: absolute; a sinistra: 1px; display: nessuno; margine: 0; padding: 0; stile elenco: nessuno; -moz-box-shadow: 0 1px 3px rgba (0,0,0,0,2); -o-box-shadow: 0 1px 3px rgba (0,0,0,0,2); box-shadow: 0 1px 3px rgba (0,0,0,0,2); -webkit-box-shadow: 0 1px 3px rgba (0,0,0,0,2); imbottitura-fondo: 3px; } #nav ul li {width: 180px; fluttuare: a sinistra; border-top: 1px solid #fff; allineamento del testo: a sinistra; } #nav ul li: hover {border-left: 0px solid transparent; border-right: 0px solid transparent; }

Le singole proprietà che ho usato e i loro browser di supporto possono diventare un po 'confusi. Di seguito una piccola guida alla traduzione.

• -moz-box-shadow - Motore di Firefox / Mozilla
• -o-box-shadow - Opera
• -webkit-box-shadow - Browser WebKit standard, Google Chrome o Safari
• box-shadow - La maggior parte degli altri include Microsoft Internet Explorer

Ogni elemento della lista sub-nav è impostato a 180px in larghezza. Questo definisce la dimensione massima che apparirà nel nostro menu. Se esegui il porting del codice, dovresti cambiarlo per adattarlo alle dimensioni del tuo modello.

#nav ul a {display: block; altezza: 20px; altezza della linea: 20px; imbottitura: 8px 5px; colore: # 666; border-bottom: 1px trasparente solido; text-transform: maiuscolo; colore: # 797979; font-weight: normal; } #nav ul a: hover {text-decoration: none; border-right-color: transparent; border-left-color: trasparente; sfondo: trasparente; colore: # 4e4e4e; } * html #nav ul {margin: 0 0 0 -2px; }

Ogni ancoraggio di sottomenu è impostato su un'altezza e un'altezza di 20 px. Ciò manterrà il testo del menu centrato verticalmente in ciascun blocco di menu. Sull'effetto hover ho nascosto i bordi che sono ereditati dai link di navigazione padre. Tutto abbastanza semplice con gli stili CSS e ora l'ultimo bit di JavaScript per ricostruire tutto insieme.

jQuery Mostra / Nascondi sottomenu

Subito dopo la finale .Wrap div la nostra area di contenuti finisce. Quindi qui ho aggiunto un nuovo tag script e ho inserito tutto il codice jQuery. Questo rende l'editing molto più semplice, e il nostro codice è comunque abbastanza piccolo.

$ (document) .ready (function () {$ ('# nav li'). hover (function () {$ ('ul', this) .slideDown (200); $ (this) .children ('a: first '). addClass ("hov");}, function () {$ (' ul ', this) .slideUp (100); $ (this) .children (' a: first '). removeClass ("hov") );});});

Avvia lo script controllando se il documento della pagina ha completato il caricamento. Vogliamo attivare la nostra prima funzione dopo che l'utente passa sopra un elemento della lista nella radice #nav ul. Il primo blocco di codice funzione è composto da due righe.

Mira al nostro elemento ul interiore e aggiunge un effetto slide-down da completare in 200 millisecondi. In secondo luogo, dobbiamo aggiungere il .hov classe sul link di ancoraggio attualmente selezionato. Ciò mantiene l'effetto stazionario nel collegamento principale anche quando si sposta su collegamenti di navigazione secondaria. La seconda funzione è il nostro parametro di callback per .hover () metodo che si verifica sul mouse spento.

Questo è anche composto da 2 semplici linee di codice. Questi in realtà invertono solo ciò che abbiamo fatto nella prima area. L'ul interiore è costretto a scorrere in un'animazione più rapida (100 millisecondi di lunghezza) e rimuoviamo anche la classe hover.

Visualizza la demo live - Scarica fonte

Conclusione

Ho lasciato il menu abbastanza semplice in modo che altri progettisti possano modificare il modello per adattarlo al proprio sito web. È piuttosto impressionante ciò che è possibile con solo un paio di righe in jQuery! Se hai implementato qualcosa di simile sul tuo sito, faccelo sapere. E non dimenticare di scaricare e giocare con il codice sorgente demo.