Share
Il nostro layout Skeleton contiene una serie di sfide reattive, tra cui la navigazione principale. In questi screencast prepareremo le cose riordinando la griglia della linea di base, parlando della sostituzione delle immagini, del menu e infine usando jQuery per rendere le cose più reattive.
Prima di immergerci nella navigazione principale, dobbiamo riordinare alcuni aspetti del nostro layout. Per cominciare, dovremo assicurarci che tutte le misurazioni che abbiamo finora funzionino in armonia con la nostra griglia di base. In secondo luogo, parleremo di un approccio alternativo alla sostituzione delle immagini che mette in evidenza alcuni aspetti importanti delle prestazioni.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!La base della nostra navigazione principale è un menu dall'aspetto slick con un sottomenu a discesa e alcune transizioni sottili. In questo video verranno illustrati i meccanismi di base di un menu a discesa in css, oltre ad alcuni punti (relativi a ciò di cui stavamo parlando con la sostituzione di immagini) su prestazioni e accessibilità.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!Avendo ottenuto il funzionamento della navigazione, è ora di pensare a come i nostri utenti mobili lo vivranno. Utilizzeremo le query multimediali jQuery e CSS per sostituire il menu standard con a alternativa per schermi di piccole dimensioni.
Come accennato da Michael, gli elementi del sottomenu come sono attualmente presenti appariranno terribili quando cadranno affogati da piccole voci di menu:
Questo perché la larghezza del sottomenu è uguale alla larghezza del link principale. Il testo all'interno dei collegamenti è a capo e tutto è incasinato. Possiamo risolvere questo problema aggiungendo una regola aggiuntiva ai collegamenti del sottomenu:
nav.primary ul ul li a white-space: nowrap;
che impedisce l'avvolgimento del testo e costringe il sottomenu a ingrandirsi. Molto meglio!
Alcuni link utili per approfondire ciò che è stato trattato in questi video.
Accentsconagua