HTML-webpagina's kunnen gebruiken hiërarchische structuren, die bijzonder goed geschikt voor website menu's zijn. Hebt u een grote website met veel paragrafen en subparagrafen binnen het, biedt met behulp van een boom menu uw gebruikers met een intuïtieve manier om te navigeren door uw inhoud. De HTML-opmaak voor een boom menu impliceert normaal lijsten, met elk item met een HTML-ankerelement koppelen aan een bepaald gebied van de pagina of site. Veel sites gebruiken ook Cascading Style Sheet en JavaScript-code om het uiterlijk en de functionaliteit van boom menu's.
Inhoud
Bij het ontwerpen van een boom menu, moeten ontwikkelaars categoriseren de verschillende inhoud delen binnen een site. Bijvoorbeeld, kon een site de verkoop van producten hebben afdelingen voor elke productsoort, met verdere onderafdelingen binnen deze de producten in de categorieën verdelen. Webontwikkelaars gebruiken soms submappen te organiseren van de website-content, in welk geval elke map kan corresponderen met een op het hoogste niveau item binnen de boom menu. Elk item in het menu zullen uiteindelijk een HTML-koppeling, zoals in het volgende voorbeeldcode:
KledingDeze code bevat koppelingen naar een map met de naam "kleding" die in de hoofdmap van de website. Aangezien geen pagina wordt vermeld, wordt de koppeling de indexpagina in die map geopend. In de sectie van de kleding van de boom menu, kon items link naar bepaalde pagina's, als volgt:
Broek
Lijsten
HTML-boom menu's betrekken normaal lijsten. De volgende steekproef opmaak ziet u een menu met behulp van niet-genummerde lijsten:
Dit menu bevat twee op het hoogste niveau secties voor kleding en geschenken. Binnen elk van deze zijn verder lijstitems. Elk item kan bevatten een andere lijst, dus voor complexe websites, een boom menu betrekking op verschillende niveaus van diepgang hebben kan. Door te klikken een item op het hoogste niveau brengt de gebruiker naar de startpagina voor die sectie van de site, terwijl het klikken van een bepaald item hen naar een specifieke pagina binnen een sectie nemen zal.
Stijl
De meeste sites gebruik Cascading Style Sheets om de stijl van hun menu's. Binnen de CSS-code voor een site, ontwikkelaars kunnen het dicteren van verschillende aspecten van het uiterlijk van het menu, met inbegrip van de lay-out evenals de zichtbare kenmerken van elk lijstitem. Webbrowsers weergegeven vaak bullet punten op lijstitems standaard, die veel ontwikkelaars niet wilt weergeven. De volgende voorbeeldcode voor CSS geeft aan dit:
UL {list-style-type: none;}Om te kiezen van een bepaald opsommingsteken, geldt de volgende code:
UL {list-style-type: vierkant;}Ontwikkelaars kunnen optioneel klasse kenmerken toevoegen aan de lijsten op verschillende niveaus binnen een boom menu, afstemming van de CSS aan elk van deze.
Scripting
Veel websites gebruiken JavaScript-functies ter verbetering van de interactiviteit met boom menu's. Met behulp van deze, kunnen ontwikkelaars opgeven dat bepaalde items niet zichtbaar voor de gebruiker in eerste instantie worden moeten. Bijvoorbeeld, te klikken op een item op het hoogste niveau staat, kan de subsecties worden dynamisch weergegeven. JavaScript-functies kunt weergeven of de zichtbaarheid eigenschap van een element dicteren of de browser moet weergeven of verbergen. De volgende code toont een lijstitem moet worden verborgen instellen:
element.style.visibility="hidden";Het volgende alternatief gebruikt de eigenschap display:
element.style.display="none";