Een mooi vervolgkeuzemenu kan niet alleen in JavaScript worden gemaakt, maar ook met standaard HTML-tags. Deze methode voor het maken van een vervolgkeuzemenu is handig voor degenen die net beginnen met het maken van sites en het werk van het maken van menu's op pagina's willen vereenvoudigen.
instructies:
Stap 1
In HTML-code is zo'n menu een ongeordende lijst met daarin geneste lijsten. Maak om te beginnen een style.css-bestand en kopieer de volgende CSS-code daar om het menu op te maken en op te maken:
#nav, #nav ul {
lijststijl: geen;
marge: 0;
opvulling: 0;
rand: 1px effen # 000;
achtergrond: # 515151;
zweven: links;
breedte: 100%;
}
#nav li {
zweven: links;
positie: relatief;
achtergrondkleur: # 003366;
back / grond: geen;
}
#nav li ul {
Geen weergeven;
positie: absoluut;
achtergrondkleur: # 003366;
opvulling: 8px 0;
breedte: 138px;
}
Stap 2
Nu moeten we wat decoratie toevoegen aan de menu-items. Definieer de breedte en hoogte voor hen, verwijder de onderstreepte lijnen, stel een duidelijke breedte in voor elke link en specificeer de gewenste achtergrondkleuren.
Stap 3
Voeg voor al deze wijzigingen de volgende code toe aan het bestand:
#navigeer een {
kleur: #fff;
tekstdecoratie: geen;
weergave: blok;
breedte: 120px;
opvulling: 4px 10px;
achtergrondkleur: # 003366 herhaal-y rechts;
}
#nav a: zweef {
kleur: # 000;
achtergrondkleur: # 0033FF;
}
#nav li: zweef {
achtergrondkleur: # 333333;
}
Voeg vervolgens het volgende stukje code toe om het menu af te ronden:
#nav li: zweef li ul {
Geen weergeven;
breedte: 138px;
boven: -9px;
links: 133px;
}
#nav li: zweef li: zweef ul {
weergave: blok;
}
Stap 4
In de HTML-versie ziet de algemene ongeordende menulijst er als volgt uit - op basis daarvan wordt het menu gemaakt, dat in het artikel werd vermeld.
- Huis
-
Catalogus
-
Alle producten
- Op datum
- Fabrikanten
- andere
-
