sastgroup.com

Css Menu a tendina con css e DOM – Suckerfish Dropdowns

Posted on 06. May, 2006 by Administrator in css, tutorials

Obiettivo
In questo articolo tratteremo come creare un menu a tendina con css e DOM

Articolo
Per iniziare, dobbiamo usare il miglior metodo per definire un menu di navigazione, la lista. in questo esempio lavoreremo con una semplice lista html

<ul>
<li>Sunfishes
<ul>
<li><a href="">Blackbanded sunfish</a></li>
<li><a href="">Shadow bass</a></li>
<li><a href="">Ozark bass</a></li>
<li><a href="">White crappie</a></li>
</ul>
</li>

<li>Grunts
<ul>
<li><a href="">Smallmouth grunt </a></li>
<li><a href="">Burrito</a></li>
<li><a href="">Pigfish</a></li>
</ul>
</li>

<li>Remoras
<ul>
<li><a href="">Whalesucker</a></li>
<li><a href="">Marlinsucker</a></li>
<li><a href="">Ceylonese remora</a></li>
<li><a href="">Spearfish remora</a></li>
<li><a href="">Slender suckerfish</a></li>
</ul>
</li>
</ul>

Il primo livello di liste, rappresenta il menu orizzontale, il secondo i menu a

Diamogli lo stile

Per iniziare, tutte le liste hanno bisogno di essere settate con:

ul {
padding: 0;
margin: 0;
list-style: none;
}

Adesso dobbiamo trasformare il primo livello delle liste in una barra orizzontale. Ci sono molti modi ma noi useremo

Potremmo usare inline (display: inline), ma in questo esempio useremo

li {
float: left;
position: relative;
width: 10em;
}

La posizione e' relative perche' vogliamo che la posizione del secondo livello , nested lists to be relative to the first-level list items and the width has been set to space it out a bit.

Il prossimo passaggio e' attrezzare le liste di secondo livello cosi esse saranno anche esse drop down:

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
}

per le liste di secondo livello, la posizione e' assoluta e il loro stato iniziale e' settato come "non mostrato".

li > ul {
top: auto;
left: auto;

}

Per creare l'effetto di rollover e mostrare le liste di secondo livello dobbiamo aggiungere:

li:hover ul { display: block; }

Quale dice che tutta la lista che è annidata in un item della lista che ha il cursore,si posiziona sopra esso dove dovrebbe essere visualizzato.

Fermo un attimo!
“This dropdown malarkey doesn't work!” I hear 102.6% (or the latest percentage being thrown about) of you cry. I am, as some might have guessed, talking about Internet Explorer users. The more you use and develop with browsers such as Mozilla the more you realize how pathetic Internet Explorer
can be when it comes to web standards. The :hover pseudo class should work with any element, but in Internet Explorer it only works with links. So. What’s the use in a dropdown menu when it only works on -2.6% of browsers? Not much, to be honest. We need to apply a little bit more magic.

DOM-based scripting in aiuto
We’ve established IE’s lack of support for the :hover pseudo class, but by using the Document Object Model, we can attach mouseover and mouseout events to any element. This is good news for us because it means that with a simple snippet of JavaScript we can effectively patch IE’s :hover problems.

Because IE is blind we need to find another way to identify the properties of the :hover pseudo class. With JavaScript, we know that we can manipulate the className property of an element so what we are going to do first is alter the CSS:

li:hover ul{ display: block; }

diventa:

li:hover ul, li.over ul{ display: block; }
Ora abbiamo invocato :hover CSS aggiungendo alla class over l'elemento desiderato.
Abbiamo bisogno di identificare il nodo a cui applicare lo script per cui

<ul>

diventa:

<ul id="nav">

il nostro script javascript e':

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;

Articolo originale di Dan Webb su http://www.alistapart.com/articles/dropdowns/