WN - Hjälp med 2-stegs-meny

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Hjälp med 2-stegs-meny (https://www.wn.se/forum/showthread.php?t=30144)

Hejsan

Håller på med en meny nu några dagar och jag får verkligen inte rätt på det, troligen är det mina bristande kunskaper inom javascript i kombination med att mina Google-sökningar inte träffar rätt, så därför testar jag här.

Som ni kan se på den bifogade filen så vill jag ha en 2-stegs-meny. De problem jag har fallit för är att ruta röd, blå och ruta gul använder sig av samma css-classer vilket ställer till problem om man vill ha ruta gul bredare än ruta röd.

Någon som kanske har en meny-kod liggandes eller på annat sätt kan hjälpa mig? Eller hur ska jag bära mig åt för att få till menyn?

Kan du inte bara sätta olika "class" på de olika menyerna då?

Nej, iom att koden ser ut så här:

Citat:

var MENU_ITEMS =
[
['Meny1', null, arrow,
['Meny11', null, arrow,
['Meny111','#'],
['Meny112','#']],
['Meny12', null, arrow,
['Meny121','#'],
['Meny122','#'],
['Meny123','#'],
['Meny124','#']],
['Meny13', null, arrow,
['Meny131','#']],
['Meny14','#'],
['Meny15','#'],
['Meny16','#'],
['Meny17', null, arrow,
['Meny171','#'],
['Meny172','#']]]
,['Meny2', null, arrow,

osv

Ush och fy för javascript menyer.. kika på horisontella menyer med css för ett bättre alternativ.

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...

Tack för svaret turboraketti, precis vad jag letade efter.

Dock får jag inte den alls att funka i Internet Explorer. När jag för musen över "Om oss" öppnas menyen, men jag kan inte för över musen till den nya menyen för då försvinner den nya menyen, iom att där finns ett "tomrum" mellan "Om oss" och den nya menyen.

Fick det att funka med hjälp av: http://www.tanfa.co.uk/css/examples/menu/vs7.asp

Tack allesammans för hjälpen!