Ben's Hobbyhoekje -- Compact sub-menu

Compact sub-menu

Hierboven zie je een menu. Als je op een item klikt, tikt, of er met de muis overheen gaat, verschijnt er een submenu.

Inspiratie voor dit menu is ontstaan door de desktop-versie van de nieuws-site nu.nl. Voor deze site heb ik iets gebouwd wat er op lijkt. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
Het menu bevat geen links en doet daarom niets.

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
De werking van het script
De code van het voorbeeld is gemaakt met HTML, CSS en JavaScript. In dit voorbeeld staat alle code in het document, maar dat is niet strikt noodzakelijk. De CSS en het JavaScript kunnen ook in aparte, gelinkte bestanden staan.
HTML
Het menu bestaat uit twee blokken: Het hoofdmenu (de continu zichtbare, donkerblauwe balk) en de submenu's die verschijnen als de muis over over het hoofdmenu gaat of als een item van het hoofdmenu wordt aangeklikt.
Het hoofdmenu wordt gemaakt met een <ul> waarvan de list-items met CSS achter elkaar zijn gezet.
Een list-item bevat een gewone hyperlink (<a>-tag) als er geen submenu is.
Als er wél een submenu is, heeft de <a>-tag geen href-attribuut. Wel zijn er de attributen onmouseover, onmouseout en onclick. Die worden gebruikt om de submenu's te laten verschijnen of te laten verdwijnen via JavaScript.
De menu-items die een submenu hebben, hebben elk een uniek id om referentie door JavaScript eenvoudig te maken<./li>
In het voorbeeld hebben de items Home en Varia geen submenu, de overige items hebben dat wel.
De submenu's worden gemaakt met <span>-tags. Elk submenu is een <span> en heeft een eigen, uniek id om ze voor JavaScript bereikbaar te maken.
Elk submenu bestaat uit een aantal hyperlinks, gescheiden door vertical bars en spaties. Binnen het menu staat alles op één regel.
Elk submenu heeft de attributen onmouseover en onmouseout, om ze te laten verschijnen of te laten verdwijnen via JavaScript.
CSS
De CSS van het hoofdmenu (lees: het id NuMenu) positioneert het menu in de hoek linksboven en fixeert het daar. Het menu zweeft boven het document (z-index:10). Tevens worden op dit niveau instellingen gemaakt voor de menu-teksten.
Er is ook display: block gegeven om het ook goed te laten werken met oudere browsers.
De hyperlink-teksten (in de <a>-tags) van het hoofdmenu zijn wit en vet, en zijn niet onderstreept. Als de muis er overheen gaat wordt de achtergrond lichtblauw.
Dit wordt ook gedaan door JavaScript. Het is hier echter noodzakelijk voor de hoofdmenu-items zonder submenu.
De ongeordende lijst waar de menu-items in zitten heeft margin: 0 en padding: 0, waardoor het menu echt tegen de bovenrand van het document blijft. De menu-items staan achter elkaar door list-style-type: none.
De list-items zelf hebben een donkerblauwe achtergrond (#058), staan links aangeschoven, hebben een vaste breedte van 9 em en hebben een witte rand.
De span-tags waar de submenu's mee worden gemaakt hebben allemaal de klasse subMenu. Hier wordt de opmaak en een deel van de grootte en de positionering geregeld.
De submenu's zijn fixed op 25 px van boven, dat is de hoogte van het hoofdmenu. Ook zweven de submenu's boven het document: z-index: 5. De links zijn niet onderstreept. De achtergrond is #0cf, dezelfde lichtblauwe kleur als in het hoofdmenu. Deze verandert niet.
De span-tags waar de submenu's mee worden gemaakt hebben allemaal een uniek id. Dat wordt, behalve om te communiceren met JavaScript, ook gebruikt om de submenu's horizontaal uit te lijnen, om de breedte te bepalen en om ze zichtbaar of onzichtbaar te maken met display.
JavaScript
Het JavaScript bestaat uit een variabele, (aantalItems), een Array (subMenus) en twee functions, te weten showSuB() en hideSub().
aantalItems is het aantal items in het hoofdmenu. In het voorbeeld: 5.
De array subMenus bevat aantalItems elementen. In het voorbeeld zijn dat er dus 5. Het eerste en het laatste element zijn 0. De corresponderende items in het hoofdmenu hebben géén submenu.
De andere elementen van subMenus zijn ongelijk aan 0 en hebben wél een submenu.
De elementen van SubMenus worden opgegeven als karakter, dus tussen aanhalingstekens.
De functions showSuB() en hideSub() hebben een parameter: seqno. Daarmee wordt het volgnummer opgegeven van het submenu dat zichtbaar moet worden of moet worden verborgen. In de aanroep van deze functions moet de parameter tussen aanhalingstekens staan. Beide functions stoppen als een submenu niet bestaat. Dat wordt gecontroleerd met behulp van de array SubMenus.
De function showSuB() wordt gestart door onmouseover of onclick. Als eerstpe worden alle openstaande submenu's gesloten. Hiervoor wordt hideSub() aangeroepen.
Vervolgens wordt de CSS-eigenschap display van het betreffende submenu ingesteld op block, waardoor het submenu zichtbaar wordt.
In combinatie hiermee wordt de kleur van het hoofdmenu-item veranderd in #ocf (lichtblauw).
De function hideSuB() wordt gestart door onmouseout of door showSub(). Deze function doet precies het tegenovergestelde van showSuB(): display van het submenu wordt none en de kleur van het hoofdmenu-item wordt #058 (donkerblauw).
Inbouwen in je eigen site
Download de .zip-file en pak hem uit. Neem de code over in je HTML-document, zoals hieronder is aangegeven. Je hebt nu een werkend voorbeeld.
Voeg menu-items toe of verwijder ze juist. Doe dat voor zowel het hoofdmenu als voor de submenu's. Let er daarbij vooral op dat id's uniek zijn, dat de CSS-referenties kloppen en dat dehref-attributen aan- of afwezig zijn in de a-tags.
Pas het JavaScript aan voor het aantal items in het hoofdmenu en welke items een submenu hebben en welke niet.
Pas de CSS van de opmaak aan: breedte van de hoofdmenu-itemsen de submenu's, kleuren, lettertype, enz.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
Alle CSS en JavaScript staat in de <head>.
De HTML staat direct onder de <body>-tag.
De code van het voorbeeld vind je in de download file.

Downloaden:

Druk op de knop: File: voorb615.zip, 2965 bytes.