CSS Dropdowns ibridi

Postato il
Newbrigand - Tutorial
No Comments
ISSN: 1534-0295. 30 March 2005 – Issue No. 197

Translated with the permission of A List Apart Magazine and the author[s].

Ebbene sì. Un altro articolo sui menù CSS dropdown — ma uno che risolve molti dei problemi associati ai metodi comuni dei menu dropdown e degradano in maniera perfetta.
I CSS dropdown ibridi consentono di accedere a tutte le pagine, rendendo l’utente consapevole di dove si trova all’interno del sito, sono puliti e leggeri da
caricare. Sono una saporita pillola vitaminica, quindi smettetela di lamentarvi e provateli.


So cosa state pensando…"Abbiamo davvero bisogno di un’altro articolo sui menu a discesa fatti con i CSS?" Permettetemi di convincervi. Che cosa ne diremmo se potessimo avere un menu pulito ben strutturato che unirebbe il dinamismo e la facilità di codice eliminando i loro problemi principali (senza menzionare che degradano in maniera perfetta)?
I problemi con i menu a discesa sono:

  1. le loro opzioni secondarie sono inaccessibili a meno che attiviate l’intero sistema del menu; e
  2. offrono indicazioni insufficienti di orientamento per l’utente. Può essere difficile navigare all’interno di una sezione particolare del sito perché dovete andare di nuovo al menu a discesa per cambiare pagina.

Questa tecnica è un modo a prova di bomba per assicurare la compatibilità dei browser ed essere usabili persino da chi possiede vecchi browsers o ha difficoltà ad accedere ai menu a discesa, a causa di un’inabilità o un disagio con i menu a discesa.
Inoltre fa un lavoro molto migliore dei menu
a discesa standard nell’orientare l’utente all’interno del

Avvertimento: Questa tecnica non funzionerà con le liste che richiedono tantissimi articoli, dove i menu a discesa splendono o sprofondano sotto il peso della loro stessa massa, dipende dalla vostra prospettiva.

Stiamo per generare un menu ibrido che funziona orizzontalmente lungo la finestra del browser. Ha due livelli di navigazione (nel nostro esempio, soggetti principali e loro pagine collegate). Il nostro menu consentirà l’accesso a discesa a tutte le pagine in entrambi i livelli di navigazione, visualizzerà costantemente le scelte fatte nel tema selezionato, manterrà l’utente informato di dove si trova all’interno del sito e sarà pulito e leggero da caricare.
Troppo bello? Allora cominciamo.

Prima di tutto abbiamo bisogno di una lista

Incominciamo con una lista di periodi architettonici e alcuni dei loro maggiori rappresentanti. Daremo un ID all’elemento <ul>

e attribuiremo due classi "off" e "on" agli articoli principali della lista
(che non è probabilmente la soluzione migliore, ma funzionerà per gli scopi di questo articolo):

<ul id="nav">
<li class="off"><a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>

<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>

<li><a href="#">Bramante</a></li>
</ul></li>
<li class="off"><a href="#">Art Nouveau</a>
<ul>

<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>

<li><a href="#">van de Velde</a></li>
</ul></li>
<li class="on"><a href="#">Modern</a>
<ul>

<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>

<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul></li>

<li class="off"><a href="#">Postmodern</a>
<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>

<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>

</ul></li>
<li class="off"><a href="#">Digital</a>
<ul>
<li><a href="#">Xenakis</a></li>

<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>

<li><a href="#">Hadid</a></li>
</ul></li>
</ul>

Mettiamoci un pò di stile

Questo è un ottimo posto da cui cominciare. Un
markup
semplice e semanticamente corretto facile da gestire in un unico file. Viene visualizzato proprio come vi aspettate venga visualizzato.

La prima cosa che faremo con il nostro CSS è visualizzare il primo livello della lista orizzontalmente (usando la proprietà float) e nascondere tutti gli elementi secondari della lista. Inoltre faremo in modo che i link della lista appaiano grassetto, colorati e con un bordo.

#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}

#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
display: none;
}

#nav li a {
/*for all links in the list*/
color: #f90;
font-weight: bold;
display: block;
height: 15px;
width: 100px;
border: 1px solid #29497b;
padding: 5px;
}

Dopodichè posizioniamo il nostro secondo livello di navigazione sotto la lista principale, in maniera tale che quando questo riapparirà sarà nel posto giusto.

#nav li.off ul, #nav li.on ul {
/*put the subnavs below and hide them all*/
display: none;
position: absolute;
top: 33px;
height: 15px;
left: 0;
padding-top: 10px;
}

Per concludere, mostreremo la barra del secondo livello di navigazione dell’area del tema selezionato
“Modern”. Il modo migliore per fare questo, se volete un unico file del menù, e quello di attribuire una classe al corpo della pagina, diciamo, “Modern,” e i corrispondenti selettori. Per questo articolo, che sarà pubblicato nel corpo della pagina di qualcun altro e dovrebbe essere autosufficiente, abbiamo settato una classe "on" alle topic attive, ed "off" a quelle inattive.

#nav li.on a {
/*change border color for active topic area*/
border: 1px solid #f90;
}

#nav li.on ul a, #nav li.off ul a {
/*  cancel inherit of border
on subnav of active topic */
border: 0;
}

#nav li.on ul {
/*display active subnav list*/
display: block;
}

Dopo aver aggiunto un paio di bordi, possiamo vedere che cosa abbiamo ottenuto fin’ora qui.

Quindi al passaggio del mouse uno viene giù…

Adesso attiviamo i rollover. Questo non è molto differente da qualsiasi altro menù a discesa con i CSS
— la funzione di hover è applicata all’elemento li, cosi IE sarà soffocato a causa della sua povera implementazione della: hover pseudo-classe. Torneremo su questo in un minuto. Il seguente CSS rimuove il bordo dal secondo livello di navigazione, fa in modo che il sottomenù attivo sia sempre visibile, e che quelli inattivi vengano mostrati solo al passaggio del mouse sui menu parent. Settiamo un z-index per assicurarci che il passaggio del mouse abbia precedenza sul sottomenù dell’area attiva.

#nav li.on ul a, #nav li.off ul a {
float: left;
/*ie doesn't inherit the float*/
border: 0;
color: #f90;
width: auto;
margin-right: 15px;
}

#nav li.on ul {
/*display the current topic*/
display: block;
}

#nav li.off:hover ul {
/*  display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}


Lo rendiamo un pò più user-friendly, con un background al passaggio sui menù.

#nav li.off a:hover, #nav li.off:hover a {
background: #29497b;
color: #f90;
}

Controllate dove siamo arrivati qui.

Accogliamo il nostro "speciale" amico dei browser

Avete due opzioni per gli utenti dei browsers quali per esempio Internet Explorer, che difettano del supporto:hover su tutto tranne sull’elemento <a>. Potete lasciare il menu così com’è, sapendo che funzionerà benissimo quando tutti i browsers implementeranno :hover (tocchiamo ferro), e cullarci nella consapevolezza che tutte le opzioni di navigazione saranno visibili e accessibili a tutti gli utenti, oppure possiamo implementare un pò di JavaScript per riscrivere i selettori CSS in un linguaggio che IE capisce, per rendere il dinamismo del menù a discesa accessibile a tutti.

>(Funzionare in IE così com’è, è relativo) Abbiamo bisogno di aggiustare il posizionamento un pochino usando il trucco dell’asterisco.

#nav li.off ul, #nav li.on ul {
/*put the subnav below*/
top: 33px;
*top: 44px; /*reposition for IE*/
}

Così funziona perfettamente nei browsers moderni
standards-compliant, e funziona in maniera funzionale, con il corretto posizionamento nelle versioni 5 e 6 di Internet Explorer. Con un pò di lavoro possiamo far funzionare hover in IE. Questo semplice JavaScript riscrive gli hover come eventi mouseover, e funziona con tutte le versioni di IE/Win 5.x e 6.x. Un grosso ringraziamento a
Patrick Griffiths e Dan Webb il cui articolo
“Suckerfish Dropdowns” mi ha iniziato ai sistemi di navigazione basati sui CSS. Il loro snippet JavaScript è il seguente:

startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

Con un semplice cambiamento al CSS:

#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}

#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
background: #29497b;
color: #f90;
}

per aggiungere la classe ".over" agli articoli della lista che richiedono l’hovering, la lista funziona anche per voi utenti IE/Win. Non che non dovremmo pensare ad un nuovo browser, ma per il momento continueremo a sostenere le masse nella maniera in cui sono state abituate.

Questo è tutto quindi, un cambiamento incrementale, forse, sopra il lavoro
precedente con i menu a discesa CSS, ma un altro angolo da esplorare
per quei casi dove realmente è utile avere le opzioni di navigazione visualizzate piuttosto che nascoste all’interno di un menu a discesa.

Ma possono essere belli?

OK non è tutto. Non potrei lasciarvi senza una versione leggermente più ricca, per portare questa tecnica dal mondo delle parole al mondo reale. Con alcuni cambiamenti, un immagine
CSS sprite navigation (grazie, Dave Shea), una foto fatta a New York City, ancora un pò di CSS, otteniamo un sistema di menù che mostra davvero la potenza dei CSS combinati con il graphic design. controllate il
menu a discesa ibrido con i CSS finale , completamente funzionante in tutti i moderni browsers.