Drop down menu zonder javascript

Ik ga laten zien hoe je een drop down menu kan maken zonder javascript te gebruiken en hij werkt in (geloof ik) elke browser.

Stap 1.

Eerst maken we een menu in je html pagina:

(html)

<ul id="menu">
   <li><a href="#">Menu item</a>
      <ul>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
      </ul>
   <li><a href="#">Menu item</a>
      <ul>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
      </ul>
   <li><a href="#">Menu item</a>
      <ul>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
         <li><a href="#">sub item</a></li>
      </ul>
   </li>

</ul>

Ik hou het even simpel, maar je kan hem nog uitbreiden met meerdere menu en sub items. Verder ik het eerste lijst item het id menu.

Stap 2.

We gaan beginnen met de css.

(css)

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

 #menu li {
float : left ;
width : 150px ;
 }

 #menu ul {
position : absolute ;
width : 150px ;
 }

We hebben nu alle menu knoppen naast elkaar staan en alle sub items onder elkaar.

Stap 3.

Nu willen we dat je de sub items alleen ziet wanneer je de muis over de menu knop haalt, we doen daarvoor:

(css 3.0)

 #menu ul {
display : none ;
 }

 #menu li:hover > ul {
display : inline ;
 }

We maken de sub items eerst ontzichtbaar. Vervolgens als je muis over een menu item gaat wordt de desbetreffende sub items zichtbaar.

Je kan hem nu verder opmaken tot dat hij er goed uit ziet.

Belangrijk om te weten is dat je wel een doctype moet hebben ingesteld

Het lijkt me mooi maar mag ik eerst een voorbeeld? En heb je hem zelf gescript?

Ik heb hem zelf gescript, ik heb niet echt een voorbeeld ik heb namelijk nooit een vast host.

Ga hem dan uploaden op een gratis host. (Bijvoorbeeld Woelmuis) Hiervoor is het goed genoeg.

Het voorbeeld:

http://ttsam.woelmuis.nl/Text1.html

Link werkt niet?

Hij werkt wel, alleen je moet een hele tijd wachten.

Waarom is er normaal met een dropdown zo´n lang javascript nodig terwijl het zo kan met alleen een klein beetje html en css. Wel handig!

Snap ik ook nooit, tenzij je animaties enzo er aan toe wil voegen.

Handig maar wist ik al

Met javascript vind ik persoonlijk mooier omdat je dan ook de dropdown kan laten sliden. Maar dit is idd een makkelijke oplossing als je niet zo zeel poespas wil. Simpel en eenvoudig.

Ik denk dat een drop down menu met css beter is dan met javascript, want als iemand javascript uit heeft geschakeld dan werkt deze als nog.

Maar wie heeft nou tegenwoordig zijn javascript uit staan? Er zijn zoveel sites die javascript gebruiken

Dit is gewoon makkelijker te gebruiken voor noobs (zoals ik )

Marjolein schreef:

Maar wie heeft nou tegenwoordig zijn javascript uit staan? Er zijn zoveel sites die javascript gebruiken

Bijna elke grote site heeft javascript youtube
Hyves
Twitter
Facebook
Google
etc.