Voglio un drop down menu senza javascript!!

…se questa è la vostra richiesta, eccovi accontentati.

Ci pensa Pixelspread a darci la “pappa pronta” e segnalarci come farlo grazie ad un suo esempio. Ovviamente non funziona su ie6

After playing with some javascript menus today, I decided to see if I could pull off a drop down menu without any javascript. I’ve seen it done before, so I thought I’d give it a shot. It actually ended up being pretty simple, so I thought I’d share the how-to.

I uploaded a demo of what I mean. If you take a look at the source, the basic elements of the menu are ul and li tags.

The first thing to do is differentiate the parent menu items from the menu items that only appear after you hover over the parent item. I did this with classes.

You’ll see the parent item is marked with top, while the rest are marked item. Now I can get to hiding .item and letting .top continue to show. So I’ll add this to the style sheet.

#menu ul .item{display:none;}

And when I hover over the top of the unordered list, I want all list items with class item to appear again. Here’s what I’ll add to the style sheet.

#menu ul:hover .item{display:block;}

You could choose to use display:block or display:inline. The last important piece is the position of the menu.

#menu{position:absolute;}

I wouldn’t say this is necessary, but if you’d like the drop down to appear on top of the content below, it is. Otherwise, your CSS menu will just displace everything underneath it.

You can dig through more of the source from the demo if you’d like to see the styling of the menu. Most important of all, this is all web standards compliant, and keeps the HTML of the page beautiful. I’ve tested it successfully in Camino 1.5.1, Firefox 2.0.0.9, and Safari 3.0.3. If you’d like test it anywhere and see how it fairs, go for it.

lauryn

Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia. Ultimo libro uscito 4 passi per andare online e trovare nuovi clienti da subito

Rispondi

Scarica la checklist per partire con il tuo sito
Iscrivendoti alla newsletter mensile riceverai la checklist pdf alla tua casella email
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica lo starter kit del professionista
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
Un metodo efficace se sei un professionista che offre servizi ma sei alle prime armi con tutto ciò che riguarda il web. Ottieni indicazioni su sito web, blog, social e funnel marketing volti a portare nuovi clienti effettivi.
4 PASSI PER ANDARE ONLINE e ottenere clienti da subito
%d blogger hanno fatto clic su Mi Piace per questo: