Met behulp van goede HTML-code en simpele CSS-regels kun je een leuk popup-menu maken dat je eenvoudig kunt aanpassen en aanvullen. Door opmaaktaal en Cascading Style Sheets te gebruiken, kunt u ervoor zorgen dat menu's correct werken in alle browsers.
instructies:
Stap 1
Bouw eerst de basisstructuur van uw menu. Open een teksteditor en maak een genummerde lijst met een submenu dat fungeert als een bovenliggend lijstitem. Bijvoorbeeld:
-
Eerste element
- Vervolgkeuzelijst
- Vervolgkeuzelijst2
Stap 2
Sla de gegenereerde lijst op in een apart html-bestand. Maak vervolgens een bestand met de extensie.css en voer alle stijlbladparameters in.
Stap 3
Verwijder eventuele opvulling en opsommingstekens die van toepassing zijn in de lijst met opsommingstekens en stel de menubreedte in met behulp van CSS-tools: ul {list-style: none;
breedte: 200px; }
Stap 4
Stel de relatieve positie van alle items in de lijst in met behulp van het position attribuut: ul li {position: relative; }
Stap 5
Vervolgens moet je een submenu ontwerpen, waarvan elk van de elementen rechts van het bovenliggende menu zal verschijnen op het moment dat de muisaanwijzer op het item staat: li ul {position: absolute;
links: 199px;
boven: 0;
Geen weergeven; } Het linker attribuut is één pixel minder dan de breedte van het menu zelf. Hierdoor kunnen de pop-up items intelligent worden gepositioneerd zonder dubbele randen te creëren. Het display-attribuut wordt gebruikt om het submenu te verbergen bij het openen van de pagina.
Stap 6
Stijl de links naar wens met behulp van de juiste css-opties. Voeg de display: block-parameter toe zodat elke link alle ruimte inneemt die ervoor is gereserveerd.
Stap 7
Om het menu te laten verschijnen op het moment dat de cursor erboven staat (hover), moet je de code invoeren: li: hover ul {display: block; }
Stap 8
Stel naar wens extra opties in voor het weergeven van koppelingen en lijstitems.
Stap 9
Het pop-upmenu is klaar. Nu rest het om het attribuut in het.html-bestand op te nemen: Pop-upmenu
