Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

horizontaal css based menu met submenu

2 antwoorden
  • hallo! ik heb een vraag. ik weet sinds vandaag :) dat het mogelijk is om een css menu (horizontaal) te maken met bijbehorend submenu. bijv te zien op http://www.aplus.co.yu/css/nestedtabs2/ maar mijn vraag gaat nog iets verder dan dat. het menu dat ik aan het maken ben moet het mogelijk zijn om het submenu 'vast' te zetten wanneer je op het item klikt waarmee je het submenu uitklapt. dit vanwege een bepaalde workflow de gemaakt moet worden waarbij het gemakkelijk is dat de bezoeker/gebruiker alle menuitems constant in beeld ziet. kan dit puur met CSS of komt hier iets anders bij kijken (php, javascript) en weet iemand een link waar dit te vinden is? alvast bedankt voor het meedenken Alexander
  • Puur CSS gaat in ieder geval niet. De browser zal namelijk moeten "onthouden" over welk element het laatst overheen gegaan is met de muis/op welk element het laatst geklikt is. Je zult hier dus Javascript voor nodig hebben, maar als je het slim aanpakt kun je dat tot een minimum beperken en tegelijk toch de lijsten zichtbaar houden voor hen die geen javascript gebruiken. Wat je zou kunnen doen is iets dergelijks: [code:1:f793cbf338] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Lijst-gebaseerd menu voorbeeld</title> <style type="text/css"> li ul li { position: absolute; width: 4em; } li { display: block; float: left; } .actiefSubmenu ul li { display: block; } .inactiefSubmenu ul li { display: none; } </style> <script type="text/javascript"> window.onload = function() { els = document.getElementsByTagName('li') for (var i=0; i < els.length; i++) { if (els[i].id.substring(0,2) == 'li') els[i].onmouseover = setActive; els[i].className = 'inactiefSubmenu'; } } function setActive() { for (var i=0; i < els.length ; i++) els[i].className = 'inactiefSubmenu'; this.className = 'actiefSubmenu'; } </script> </head> <body> <ul> <li id="li1">item 1 <ul> <li>submenu 1</li> </ul> </li> <li id="li2">item 2 <ul> <li>submenu 2</li> </ul> </li> </ul> </body> </html> [/code:1:f793cbf338] Dit lijkt te zijn wat je bedoelt. Let erop dat de setActive() functie nu de className bij [u:f793cbf338]alle[/u:f793cbf338] li-elementen op "inactiefSubmenu" wordt ingesteld. Verder deed het script het niet als ik hem in de <head> zetten en was ik te lui om uit te zoeken waarom :). EDIT: Nu aangepast met <script> in head a.d.h.v. Paulus' suggestie. Uitleg: - Elk <li>-element in de "hoofdlijst" bevat een tekst (de naam van het submenu, bijvoorbeeld "Werknemers") en een lijst. Die tweede lijst bevat elementen die in het submenu komen te staan (bijv. Jan, Piet en Alfons). - Het script kijkt van alle <li>-elementen of het id met "li" begint (dit moet je natuurlijk aanpassen). Zoja, dan stelt het deze zo in dat de functie setActive() wordt aangeroepen als er met de muis overheen gegaan wordt. Ook wordt aan deze elementen de class "inactiefSubmenu" toegekend, waardoor ze normaal niet zichtbaar zijn. Zo is alles toch te zien voor mensen zonder Javascript. - De functie setActive() zorgt ervoor dat alle sublijsten weer verborgen worden en dat de sublijst van het element waar overheen gegaan wordt de class "actiefSubmenu" krijgt. In de CSS is ingesteld dat deze wel zichtbaar is d.m.v. display:block. Ik hoop dat je hier wat aan hebt. Ik heb het alleen getest in Firefox 1.5RC1, maar in principe zou het ook in IE en Opera moeten werken.

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.