Ett konkret exempel på css-meny då.
Semantisk markup (nästade onumrerade listor, går förstås att generera från din JS-array om du vill):
Kod:
<ul>
<li><a href=start>Start</a></li>
<li>Om oss
*<ul>
*<li><a href=personal>Personal</a></li>
*<li>Kontakta oss
* *<ul>
* *<li><a href=mail>Skicka mail</a></li>
* *<li><a href=brev>Skicka brev</a></li>
* *<li><a href=sms>SMS:a</a></li>
* *</ul></li>
*</ul></li>
</ul>
CSS för att få listan att bete sig som en meny med utfällbara nivåer:
Kod:
ul { width: 100px; } /* någon lämplig bredd */
li { background-color: red; } /* bg-färg på dina menynivåer */
li li { background-color: lightblue; }
li li li { background-color: yellow; }
ul, li { margin: 0; padding: 0; border: 0; list-style: none; position: relative; }
li>ul {display: none; position: absolute; top: 0; left: 100%; } /* lägg undermenyn till höger */
li:hover { background-color: lightgrey; } /* snyggare med highlight? */
li:hover>ul {display: block; } /* visa undermenyn */
De tre sista CSS-raderna kan inte tolkas av MSIE<7, så där blir undermenyerna alltid synliga. Eller så inkluderar man en patch (
http://ie7-js.googlecode.com) i sin <head>, så blir MSIE5-6 (nästan) standard-kompliant.
/C#
EDIT: rättade lite stavfel och la till ett par kommentarer...