Met behulp van competente HTML-code en eenvoudige CSS-regels kunt u een pop-upmenu maken, dit aanvullen en wijzigen. Door de trapsgewijze tabellen en opmaaktaalhulpmiddelen te gebruiken, kunt u ervoor zorgen dat het menu zelf correct werkt in alle browsers.
instructies:
Stap 1
Houd eerst de basismenubalk vast. Maak een speciale genummerde lijst met een submenu in een teksteditor. Meestal wordt hiervoor "Notepad" gebruikt. Het submenu fungeert als een element van de bovenliggende lijst. Bijvoorbeeld: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Stap 2
Bewaar deze lijst in een apart html-bestand. Maak vervolgens een.css-bestand. Voer alle vereiste stijlbladparameters in. Doe dit heel voorzichtig, want één foutje, en het pop-upmenu wordt niet goed of helemaal niet weergegeven.
Stap 3
Verwijder alle toegepaste opsommingstekens en opvulling in de lijst met opsommingstekens. Stel de breedte van het menu in met behulp van CSS-tools: ul -style: none; width: 200px; }
Stap 4
Markeer de relatieve positie van alle items in de lijst met een attribuut genaamd position: ul li: relative; }
Stap 5
Rangschik vervolgens het submenu, waarvan de elementen uit het bovenliggende menu naar rechts zullen verschijnen als de muiscursor boven het item staat: li ul: absoluut; links: 199px; boven: 0; display: geen; }
Stap 6
Het linker attribuut is één pixel minder dan de breedte van het menu zelf. Hierdoor kunnen pop-upitems correct worden geplaatst zonder dubbele randen te creëren. Het display-attribuut wordt gebruikt om het submenu te verbergen bij het openen van de pagina.
Stap 7
Stijl de links naar behoefte met behulp van de juiste css-opties. Voeg de parameter display: block toe zodat de links alle ruimte innemen die voor hen is gereserveerd. Om het menu te laten verschijnen wanneer de muiscursor erover beweegt, voert u de volgende code in: li: hover ul: block; }
Stap 8
Stel naar wens extra opties in voor het weergeven van lijstitems en koppelingen. Voeg een attribuut toe aan het.html-bestand. Het pop-upmenu is klaar voor gebruik.
