Mijn-eigen-website.nl

Maak zelf een (horizontaal) dropdown-menu

Een dropdown-menu is eigenlijk een lijst binnen een lijst. En met css maak je er een menubalk van!

Hoe ingewikkeld een dropdown-menu misschien ook lijkt, in werkelijkheid is het niet meer dan een lijst, waarvan sommige onderdelen op hun beurt ook weer een lijst bevatten. Dat submenu is dus eigenlijk een lijst binnen een lijst, en al deze lijsten geef je vorm met behulp van css. Op deze pagina leg ik je uit hoe je een horizontaal dropdown-menu maakt.

De structuur: de html-code voor je dropdown-menu

  1. Begin met een gewone, ongeordende lijst. De html-tags voor zo'n lijst zijn <ul> en </ul>. De html-tags voor de verschillende lijstonderdelen (list items) zijn <li> en </li>.

    Geef de lijst een id (bijvoorbeeld: hoofdmenu) en zet hem in zijn geheel binnen een division (div). Die div geef je ook een eigen id (bijvoorbeeld: menubalk).

    <div id="menubalk">
    <ul id="hoofdmenu">
        <li>Menuknop 1</li>
        <li>Menuknop 2</li>
        <li>Menuknop 3</li>
        <li>Menuknop 4</li>
        <li>Menuknop 5</li>
    </ul>
    </div>
  2. Maak een sublijst bínnen de lijstonderdelen die een dropdown-menu moeten krijgen (dus vóór de afsluitende </li>-tags van die lijstonderdelen. Geef de list items die zo'n sublijst hebben gekregen, een class (bijvoorbeeld: submenu).

    <div id="menubalk">
    <ul id="hoofdmenu">
        <li>Menuknop 1</li>
        <li class="submenu">Menuknop 2
            <ul>
                <li>Subknop 2a</li>
                <li>Subknop 2b</li>
                <li>Subknop 2c</li>
            </ul>
        </li>
        <li class="submenu">Menuknop 3
            <ul>
                <li>Subknop 3a</li>
                <li>Subknop 3b</li>
            </ul>
            </li>
        <li>Menuknop 4</li>
        <li>Menuknop 5</li>
    </ul>
    </div>
  3. Maak van elk woord uit het menu een link door het tussen link-tags te zetten (<a> en </a>). Tussen de dubbele aanhalingstekens in href="" moet de url komen te staan van de pagina waar deze link naar moet gaan verwijzen. In het voorbeeld hieronder staat op die plaats nog een hekje (#). Vervang de hekjes dus door je eigen linkbestemming.

    De menuknoppen die een submenu hebben, krijgen geen linkbestemming (daar laat je het hekje gewoon staan). Wel wordt er in de openingstag van deze links nog onClick="return true" neergezet. Dit stukje javascript zorgt ervoor dat op een tablet of smartphone (waar je niet met een muis werkt) het submenu verschijnt als je op deze knop tapt.

    <div id="menubalk">
    <ul id="hoofdmenu">
        <li><a href="#">Menuknop 1</a></li>
        <li class="submenu"><a href="#" onClick="return true">Menuknop 2</a>
            <ul>
                <li><a href="#">Subknop 2a</a></li>
                <li><a href="#">Subknop 2b</a></li>
                <li><a href="#">Subknop 2c</a></li>
            </ul>
        </li>
        <li class="submenu"><a href="#" onClick="return true">Menuknop 3</a>
            <ul>
                <li><a href="#">Subknop 3a</a></li>
                <li><a href="#">Subknop 3b</a></li>
            </ul>
            </li>
        <li><a href="#">Menuknop 4</a></li>
        <li><a href="#">Menuknop 5</a></li>
    </ul>
    </div>

De layout: de css-code voor je dropdown-menu

Met de html-code van hierboven heb je de structuur van je menubalk met dropdown-menu vastgelegd. Nu kun je je met de vormgeving gaan bezighouden. Dat doe je door css-eigenschappen en -waarden te koppelen aan de verschillende html-elementen van je menubalk.

  1. Stel (als dat niet al gebeurd is) de ruimte rond al de html-elementen op je pagina in op 0. Sommige browsers voegen uit zichzelf ruimte in rond html-onderdelen. De asterisk werkt als een soort joker-teken, daarmee kun je in één klap alle html-elementen een bepaalde stijl geven:

    * {
        margin: 0; 
        padding: 0;
    }
    
  2. Stel de breedte van de menubalk in (100%) en kies een achtergrondkleur (meer over html-kleuren). De css-code uit het tweede blokje heb je ook nog nodig om er straks voor te zorgen dat de menubalk de volledige breedte van 100% van je websitevak of scherm inneemt:

    #menubalk {
        width: 100%;
        background-color: chocolate;
    }
    
    #menubalk:after {
        clear: both;
        content: " ";
        display: table;
    }
  3. Haal de automatische opsommingstekens weg die automatisch voor de list items worden gezet:

    #menubalk ul { 
        list-style-type: none;
    }
    
  4. Zorg ervoor dat de list items van het eerste niveau (die normaal onder elkaar worden neergezet) náást elkaar komen te staan. Door het teken > te gebruiken tussen #hoofdmenu en li, hebben de volgende eigenschappen alléén betrekking op de list items die direct onder het element 'hoofdmenu' vallen.

    (Ter vergelijking: bij punt 3 hiervoor (waar niet zo'n >-teken staat), hebben de eigenschappen betrekking op álle onderdelen met de code ul die zich binnen de menubalk bevinden.)

    #hoofdmenu > li {
        float: left;
        position: relative;
    }
    
  5. Geef de links van het hoofdmenu vorm. Je stelt de achtergrondkleur in, de tekstkleur, de lettergrootte en -zwaarte, de ruimte die er om de tekst heen moet komen (padding), de tekstuitlijning, je haalt de onderstreping weg die links automatisch krijgen (text-decoration: none), en je zorgt ervoor dat de links als een blokje worden weergegeven (display: block). Elke eigenschap sluit je af met een puntkomma:

    #hoofdmenu > li > a {
        background-color: chocolate;
        color: white;
        font-size: 1em;
        font-weight: bold;
        padding: 1em 1.5em 1em 0.5em;
        text-align: left;
        text-decoration: none;
        display: block;
    }
  6. Je zorgt ervoor dat de achtergrondkleur van een menuknop verandert als je er met je muis overheen beweegt:

    #hoofdmenu > li > a:hover {
        background-color: midnightblue;
    }
  7. Je verbergt het submenu:

    .submenu > ul {
        display: none;
    }
  8. Je zorgt ervoor dat het submenu wél verschijnt als je met je muis over een van de knoppen van het hoofdmenu beweegt of als je erop klikt op tapt, en dat dat dropdown-menu dan als één blok wordt weergegeven, over eventuele andere html-elementen heen (z-index: 2):

    #hoofdmenu > li:hover ul {
        display: block;
        position: absolute;
        z-index: 2;
    }
  9. Op dezelfde manier als je de knoppen van het hoofdmenu had vormgegeven, doe je dat nu ook met de knoppen van het submenu. Voor de subknoppen geef je ook nog een breedte (width) op:

    .submenu > ul > li > a {
        background-color: midnightblue;
        border-top: 1px solid white;
        color: white;
        display: block;
        padding: 1em 0.75em 1em 0.5em;
        text-align: left;
        text-decoration: none;
        width: 7em;
        display: block;
    }
  10. Je geeft aan welke kleur de knoppen van het submenu moeten krijgen als je er met een muis overheen beweegt of als je erop klikt of tapt:

    .submenu > ul > li > a:hover {
        background-color: steelblue;
    }
    

Meer uitbreidingen voor een dropdown-menu

In de Minicursus Websitebouw voor beginners maak je gebruik van een basistemplate met een dropdown-menu dat responsive is gemaakt, dat wil zeggen dan het menu vanzelf verandert als je website wordt bekeken op een smartphone. Alle menuknoppen (dus ook die van het hoofdmenu) nemen dan de breedte van het scherm aan. Verder verdwijnt dit dropdown-menu op een smartphone helemaal en komt er in plaats daarvan een menuknop te voorschijn, waar je op moet klikken om de verschillende menu-opties te kunnen zien.

Copyright © 2004-2017 Arkon v.o.f. – Leiden / KvK: 28069730 / BTW: NL805348827B01
contactsitemapprivacybeleid