Het menu wordt gebruikt om de gebruikersnavigatie door de secties op de site te vergemakkelijken. Om de aandacht van de bezoeker te trekken, moet het menu functioneel en gebruiksvriendelijk zijn en tegelijkertijd worden gecombineerd met het ontwerp van de gehele bron.
instructies:
Stap 1
Bepaal het type voordat u een menu maakt. U kunt een horizontale of verticale vervolgkeuzelijst maken die aan de gebruiker wordt getoond wanneer de gebruiker er met de muiscursor overheen beweegt. Bij het kiezen van een bepaald menu kunt u zich laten leiden door hoe gemakkelijk het is voor bezoekers om het te gebruiken en hoe het zal worden gecombineerd met het ontwerp.
Stap 2
Nadat u een menutype hebt gekozen, opent u uw paginabestand met de teksteditor die u gebruikt om HTML te bewerken. Navigeer naar het gewenste gedeelte van de code waar u uw interface-element wilt invoegen.
Stap 3
Maak daarna een lijst met opties door een blok aan te maken en een genummerde lijst te maken waaraan een id is toegewezen. Bijvoorbeeld:
- Link 1
- Link 2
- Koppeling 3
In dit voorbeeld heb ik een lijst met opsommingstekens van drie elementen gemaakt en deze in een div-laag geplaatst met de ID-paneel-ID.
Stap 4
Ga naar het sectieblok van uw pagina en maak het juiste trapsgewijze stijlbladmenu aan. Als u een horizontaal menu wilt maken, kunt u het inline-attribuut voor de resulterende lijst opnemen:
#panel ul li {display: inline; }
Stap 5
Om een horizontale lijn over de gehele lengte van de pagina te maken, kunt u de volgende code gebruiken:
#panel ul {marge-links: 0; opvulling: 2px 0; }
Stap 6
Vervolgens kunt u de visuele verdeling in rechthoeken doen:
#panel ul li a {marge-links: 3px; rand: 1px; opvulling: 2px 3px; achtergrond: blauw; }
Deze code stelt tekstinspringingen van randelementen in via de marge-links en opvulkenmerken, en stelt ook een achtergrondkleur in voor elk van de lijstitems. In dit voorbeeld is de kleur blauw, maar u kunt deze naar eigen inzicht wijzigen.
Stap 7
Om naar het item op de huidige pagina te wijzen dat op het tabblad is geselecteerd, stelt u de juiste parameters in op de open klasse:
#menu ul li a # open {achtergrond: rood; grens-onder: 1px; }
De huidige pagina die in het paneel is geselecteerd, wordt nu in het rood weergegeven.
Stap 8
Sla de wijzigingen in het bestand op en controleer de functionaliteit van de geschreven code door uw pagina via een browser te openen. Om extra weergave-opties in te stellen, kunt u altijd CSS of HTML toevoegen om het uiterlijk van het object te verbeteren.
