Menu's in HTML en CSS II: Geanimeerd pulldown-menu

Bovenaan de bladzijde zie je een horizontale menubalk. Als je met de muis over de items gaat, verandert de achtergrondkleur een beetje en rolt er een sub-menu naar beneden. De muisaanwijzer verandert van een pijl in een handje. De links in de sub-menu's doen overigens niets.

Dit menu is gemaakt met alleen HTML en CSS. Om de menu-items als link te laten werken moet je JavaScript toevoegen.
Op deze pagina wordt uitgelegd hoe je dit menu in je eigen site kunt bouwen.

Dit is een bewerking van een script uit Webdesigner Magazine nr. 91 (oktober 2016), pag. 58 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is Neil Pearce, een designer uit Essex, Engeland.

Voor deze website heb ik de code een beetje gereorganiseerd. Die kun je downloaden om zelf mee aan de slag te gaan.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML (in de body van het document) en CSS, in de file styles.css.
• Het is belangrijk dat de HTML-structuur gehandhaafd blijft, anders werkt het niet goed meer.
   
• HTML
• De HTML-code bestaat bestaan uit één enkele <ul>-tag, met de klasse hList. De list-items vormen het hoofdmenu, dat 'inline' wordt getoond.
• Het hoofdmenu wordt bovenaan de pagina en gecentreerd gepositioneerd door een <div>-tag, die de <ul>-tag omsluit.
• De knoptekst en het submenu van het hoofdmenu-item worden binnen <li> … </li>-tags gemaakt met een <a>-tag. De knoptekst (<h2>) en het hele submenu (<ul>) zitten in de link-tekst.
• Deze aanpak is correct HTML (4 en 5), maar heeft een nadeel: <a>-tags mag je niet nesten. Je kunt <a> dus niet gebruiken om links t maken van de submenu-items. De3 oplossing voor dat probleem vind onder het kopje 'JavaScript'.
   
• CSS
• De CSS begint met een heel beperkte CSS-reset. Alleen een paar instellingen voor het menu worden geïnitialiseerd.
• Instellingen voor de klasse hList (van het hoofdmenu) staan helemaal onderaan in het bestand. Er wordt voor gezorgd dat de list-elementen niet onder, maar naast elkaar staan.
  De tekst in de knopppen ( de linktekst van de <a>-tags) wordt niet onderstreept. Doordat color: inherit is opgegeven, wordt de tekstkleur van het hoofdmenu en de submenu's zwart.
• De knopteksten van het hoofdmenu zijn gemaakt met <h2>, met de klasse btn-title. De kleur van de knopteksten is daar op wit ingesteld, dat overschrijft de inherit vanuit de klasse hList.
• Elke knop van het hoofdmenu heeft naast de klasse btn-title ook een eigen, unieke, klasse. De eerste knop heeft klasse btn-title_1st, de tweede heeft btn-title_2nd, die derde heeft btn-title_3rd, enzovoort. Dit wordt gebruikt om de kleur van de knop in te stellen en te veranderen als de muis er overheen gaat. De andere opmaak van het hoofdmenu loopt via btn-title.
   
• De onderrand van de knoppen van het hoofdmenu is een soort pijlpunt. Die wordt gemaakt op de manier die is beschreven in het item Driehoeken tekenen met CSS. De borders links en rechts zijn transparant en 75px breed. Dat is precies de helft van de breedte van de knoppen in het hoofdmenu.
• De breedte van de hoofdmenu-knoppen is in het voorbeeld gelijk aan 150px. Dat is nodig om de teksten van het hoofdmenu en van de submenu's te kunnen plaatsen. Als de teksten te breed worden, wordt de breedte van de knoppen automatisch aangepast. De pijlpunten gaan echter niet automatisch mee.
  Als je de breedte van de knoppen aanpast, moeten ook de breedte van de pijlpunten worden meegenomen, in de klassen btn-title:before, btn-title:after en btn-dropdown:after.
   
• De sub-menu's hebben elk de klasse btn-dropdown. Ze hebben de breedte van tenminste 100%. Dat betekent dat ze niet smaller kunnen zijn dan de hoofd-menu-knoppen waar ze aan hangen, maar wel breder. De minimale breedte is hier 150 px. Als de menu-teksten meer dan die 150 px breed zijn, wordt het uiterlijk van de submenu's lelijk.
• De submenu's hebben een pijlpunt aan de bovenkant en aan de onderkant. De punt aan de bovenkant wordt geregeld door de CSS van het hoofdmenu, de punt aan de onderkant wordt geregeld door btn-dropdown:after.
   
• De animaties zijn gemaakt met transition.
   
• JavaScript
• JavaScript is alleen nodig om de items in de submenu's te laten werken als een hyperlink. De eenvoudigste manier om dat te doen gaat met onclick. Neem bijvoorbeeld het item Home - Contact:
  
  • Wijzig de code:
    <li>Contact</li>
    in:
    <li onclick="window.location.href='contact.html'">Contact</li>
    Dit opent de link in hetzelfde window.
  • Het is ook mogelijk de link in een nieuw window te openen, dan gebruik je:
    <li onclick="window.open('contact.html')">Contact</li>
    Met window.open() kun je nog een paar parameters meegegeven, zie daarvoor het item Window openen/sluiten vanuit een ander window.
   
• Toepassen in je eigen site
• Download de .zip file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
• Bouw het menu op met je eigen items. Volg de aanpak onder het kopje 'JavaScript' om hyperlinks te maken.
• Verander de kleuren naar je eigen smaak. Let er op dat sommige kleuren meer dan een keer worden ingesteld.
• Verander het lettertype en -grootte naar je eigen smaak. Merk op dat een ander lettertype er voor kan zorgen dat de breedte van de (sub)menu-items groter moet worden of kleiner kan worden.
• Verander eventueel de breedte van de knoppen in het hoofdmenu. Volg daarbij de aanpak die is beschreven onder het kopje 'CSS'.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

(Zet dit bovenaan in de <BODY>.

<div style="margin-left:-300px;padding-left:50%">
  <ul class="hList">
  <li>
    <a href="#click" class="btn">
      <h2 class="btn-title btn-title_1st">Home</h2>
      <ul class="btn-dropdown">
        <li>Portfolio</li>
        <li onclick="">Contact</li>
        <li>Blog</li>
        <li>Over ons</li>
      </ul>
    </a>
  </li>
  <li>
        (<a>-tag met code voor knop 2)
  </li>
  <li>
        (<a>-tag met code voor knop 3)
  </li>
  <li>
        (<a>-tag met code voor knop 4)
  </li>
  </ul>
</div>

Downloaden:
 
Druk op de knop:  File: voorb545.zip, 1611 bytes.

Opmerking:
 
Een eenvoudiger menu dan het hier gebruikte vind je in het item Menu's in HTML en CSS I: Pulldown-menu.