Drop down menu zonder javascript | deel 2

Deel 1

In deel 2 heb ik een kleine uitbreiding op deel 1. We gaan in dit deel een sub menu maken voor het sub menu dat we al hebben.

Stap 1.

Eerst breiden we het menu uit:

(html)

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

We hebben gewoon de lijst uitgebreid.

Stap 2.
Voordat we verder gaan geven we het menu een lay-out en laat ik het stijlblad zien dat we al hadden.

(css 3.0)

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

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

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

 #menu ul {
display : none ;
 }

 #menu li:hover > ul {
display : block ;
 }
// de lay-out
 #menu li {
background : #CCC ;
border : 1px solid #000 ;
 }

Stap 3.

We moeten nu alleen het sub menu van het sub menu op de goede plaats zien te krijgen. Dat doen we zo:

(css)

#menu ul ul {
margin: -1em 0 0 150px ;
}

We zetten eerst het menu 1 regel omhoog en dan 150px naar rechts.

Als het goed is moet dit het resultaat zijn: http://ttsam.woelmuis.nl/Text3.html

Leuke uitbreiding!
Alleen ik zie demo niet hoorHost het anders op v3host
www.v3host.be tijdelijk

Het laden duurt heel lang, maar hij doet het wel.

woelmuis.nl lag de laatste dagen er veel uit jammer genoeg.

@Ttsam
dit heb je mooi uit gelegt dat het mogelijk is met css.
ik wist het zelf namelijk al.

maar het enigste wat ik jammer vind dat de menu onderdeel zo snel weg is als je muis net een beetje te veel schuivt valt die direct al weg. dan moet je weer opnieuw door het helle menu door lopen. dat is voor al lastig als je een klien beetje bibbert.

maar veder super. er zullen best wel wat mensen aan hebben

@Simon.

De mensen die beetje bibberen (denk jij dus) moeten hun muis snelheid maar wat lager zetten.

dat is gewoon een dropdown menugeen sub menu toch??

Dit is een dropdown menu met sub menu. Deel 1 is een dropdown menu. Als je bij het voorbeeld op ¨Menu item¨ wijst heb je een dropdown menu. Als je op een submenu wijst komen nog een paar submenu´s. Dat klopt toch?

Beste Ttsam,
Bedankt voor je twee mooie tuturials, ze zijn goed en duidelijk.
Ik heb alleen nog een verzoekje:
Zou je de tuturial willen uitbreiden met een gedeelte waarin wordt uitgelegd hoe jij de dropdownmenus een mooie style geeft? Ik denk dat veel mensen daar behoefte aan hebben!

Dit is net als deel 1 geweldige tut, Je moet eens site openen genaamt: UltimateDropdown.com ofzo, en dan submenu op submenu op submenu op submenu op submenu op submenu op submenu op dropdown menu .

Nice gedaan!

Had je het wel door dat je een heel oud topic van 2010 bumpte?

Kingunit schreef:

Had je het wel door dat je een heel oud topic van 2010 bumpte?

Neen o.o
Maar deel 1 was al gebumbt en ik keek niet naar datum, ik ging naar Deel 2 en had niet door dat ik datum van zo oud bumpte..

Maarja, nu zijn beide delen terug op eerste pagina.

ik heb een bug gevonden
Als je knop 1 gaat opent knop 2 ook.

En als je bij Knop 1 het eerst sub aan klikt. Gaat de tweede naar beneden