Een dropdown menu maken met HTML en CSS

Pdf downloaden
Pdf downloaden

Met een dropdownmenu creëer je een duidelijk en hiërarchisch overzicht van alle belangrijke onderdelen op de pagina en de subsecties die de pagina bevat. Je hoeft alleen maar je muis over de hoofdsecties te bewegen om de subsecties te laten verschijnen. Je kunt met alleen HTML en CSS een dropdownmenu maken.

Deel 1
Deel 1 van 2:

Het schrijven van de HTML

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Normaal gesproken gebruik je <nav> voor de navigatiebalk op de hele website, <header> voor kleinere linksecties die paginagebonden zijn of <div> als geen enkele andere optie lijkt te passen. [1] [2] Plaats dit in een <div>-element, zodat je de stijl van zowel de container als het menu zelf kunt aanpassen.
    • <div>
    •    <nav>
    •    </nav>
    • </div>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    We zullen het class-attribuut later gebruiken om de stijl van deze elementen aan te passen met CSS. Geef zowel de container als het menu een eigen class-attribuut.
    • <div class="nav-wrapper" >
    •    <nav class="nav-menu" >
    •    </nav>
    • </div>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/76\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/76\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De ongeordende lijst (<ul>) bevat de items van het hoofdmenu (lijst-items <li>), als de gebruiker zijn muis daar overheen beweegt ziet hij/zij de dropdownmenu's. Voeg de class "clearfix" toe aan je lijstelement; we komen hier later op terug in de CSS-spreadsheet. [3]
    • <div class="nav-wrapper">
    •    <nav class="nav-menu">
    • <ul class="clearfix">
    • <li>Home</li>
    • <li>Medewerkers
    • <li>Contact
    • </li>
    • </ul>
    •    </nav>
    • </div>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9c\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9c\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Als deze menu-items van het hoogste niveau ook naar hun eigen pagina's linken kun je de links nu invoegen. Link naar een niet-bestaande anchor (zoals "#!"), zelfs als ze nergens naar toe linken, zodat de cursor van de gebruiker er anders uit gaat zien. In dit voorbeeld leidt Contact nergens naar toe, maar de andere twee menu-items wel:
    • <div class="nav-wrapper">
    •    <nav class="nav-menu">
    •       <ul class="clearfix">
    •          <li> <a href="/"> Home </a> </li>
    •          <li> <a href="/Medewerkers"> Medewerkers </a>
    •          </li>
    •          <li> <a href="#!"> Contact </a>
    •          </li>
    •       </ul>
    •    </nav>
    • </div>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Nadat de stijl gemaakt is vormen deze lijsten het dropdownmenu. Plaats de lijst in het lijstitem waar de gebruiker zijn muis overheen zal bewegen. Voeg een class-attribuut en een link toe, net als eerder.
    • <div class="nav-wrapper">
    •    <nav class="nav-menu">
    •       <ul class="clearfix">
    •          <li><a href="/">Home</a></li>
    •          <li><a href="/Medewerkers">Medewerkers</a>
    • <ul class="sub-menu">
    • <li><a href="/borsato">Marco Borsato</a></li>
    • <li><a href="/titulaer">Chriet Titulaer</a></li>
    • </ul>
    •          </li>
    •          <li><a href="#!">Contact</a>
    • <ul class="sub-menu">
    • <li><a href="mailto:helpdesk@bedrijf.nl">Meld een probleem</a></li>
    • <li><a href="/support">Klantenondersteuning</a></li>
    • </ul>
    •          </li>
    •       </ul>
    •    </nav>
    • </div>
    Advertentie
Deel 2
Deel 2 van 2:

De CSS schrijven

Pdf downloaden
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Plaats een link naar je CSS-stylesheet in de head-sectie van je HTML-document als de link er nog niet staat. In dit artikel behandelen we niet de basis van CSS, zoals het instellen van een lettertype en achtergrondkleur.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Weet je nog dat je de "clearfix"-class hebt toegevoegd aan de menulijst? Normaal gesproken hebben de elementen van het dropdown-menu een doorzichtige achtergrond, waardoor andere elementen verschoven kunnen worden. Een eenvoudige aanpassing aan de CSS kan dit probleem verhelpen. Hier volgt een mooie, snelle oplossing, al werkt dit niet in Internet Explorer 7 en eerder: [4]
    • .clearfix:after {
    • content: "";
    • display: table;
    • }
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-8-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Met deze code kun je je menu aan de bovenkant van de pagina plaatsen, en je verbergt de dropdownelementen. Dit is expres heel sober zodat we ons kunnen richten op de relevante code. Je kunt het later aanpassen met extra CSS-code, zoals padding en margin.
    • .nav-wrapper {
    •    width:100%;
    •    background: #008B8B;
    • }
    • .nav-menu {
    •    position:relative;
    •    display:inline-block;
    • }
    • .sub-menu {
    •    position:absolute;
    •    display:none;
    •    background: #555;
    • }
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-9-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    De elementen in de dropdown-lijst staan nu zo ingesteld dat ze niet worden getoond. Hier volgt hoe je een hele sublijst laat verschijnen zodra je over de "parent" beweegt:
    • .nav-menu ul li:hover > ul {
    •    display:block;
    • }
    • Let op — als in de menu-items in het dropdownmenu nog meer menu's verborgen zitten, dan zullen de hier toegevoegde eigenschappen van toepassing zijn op alle menu's. Als je de stijl alleen wilt laten gelden voor het eerste niveau van de dropdownmenu's, gebruik dan in plaats daarvan ".nav-menu > ul". [5]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Webdesigners laten normaal gesproken met een pijl naar beneden zien dat een element een dropdownmenu opent. Deze code voegt die pijl toe aan elk element in je menu: [6]
    • .nav-menu > ul > li:after {
    •    content: "\25BC"; /*escaped unicode voor de pijl naar beneden*/
    •    font-size: .5em;
    •    display: block;
    •    position: absolute;
    •    }
    • Let op — Pas de positie van de pijl aan met de eigenschappen top, bottom, right of left.
    • Let op — Als niet al je menu-items dropdowns bevatten, pas dan niet de vormgeving van de hele class nav-menu aan. Voeg in plaats daarvan een andere class toe (zoals dropdown) aan elk li-element waar je een pijl wilt hebben. Verwijs naar die class in bovenstaande code.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0e\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg\/v4-460px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0e\/Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg\/v4-728px-Create-a-Dropdown-Menu-in-HTML-and-CSS-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Het menu werkt nu als het goed is, maar het is nog niet erg mooi. Met de eigenschappen in CSS kun je naar wens aanpassen hoe elke class of element eruit ziet en op welke positie ze zich bevinden.
    Advertentie

Tips

  • Als je een dropdownmenu wilt toevoegen aan een formulier is dat heel eenvoudig in HTML5 met het element <select>. [7]
  • Met de link <a href="#"> scrol je naar de bovenkant van de pagina, en een link die verwijst naar een niet-bestaande anchor, zoals <a href="#!">, scrolt niet. Als dat te slordig aanvoelt kun je met CSS wijzigen hoe de cursor eruit ziet.
  • Als je de voorbeeldcode kopieert en plakt, verwijder dan alle opsommingstekens.
Advertentie

Gerelateerde artikelen

Gratis toegang krijgen tot betaalde nieuwsartikelen
Het noorden vinden in Google Maps
Iemand opzoeken met een afbeelding
Waarom is ChatGPT altijd down?
De publicatiedatum van een website vinden
Contact opnemen met Yahoo
Een EML openen
Doen alsof je tekst van een website bewerkt
ChatGPT gebruiken
Google Home-apparaten verbinden met een nieuw wifi-netwerk
Alfabetiseren in Google Documenten
Oude websites vinden die niet meer bestaan
Advertentie

Bronnen

  1. ↑ http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
  2. ↑ http://html5doctor.com/you-can-still-use-div/
  3. ↑ http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css
  4. ↑ http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/
  5. ↑ https://css-tricks.com/child-and-sibling-selectors/
  6. ↑ http://blog.teamtreehouse.com/create-simple-css-dropdown-menu
  7. ↑ https://docs.webplatform.org/wiki/guides/html_forms_basics

Over dit artikel

In andere talen
Deze pagina is 23.309 keer bekeken.

Was dit artikel nuttig?

Advertentie