En fin rullegardinmeny kan opprettes ikke bare i JavaScript, men også ved hjelp av standard HTML-koder. Denne metoden for å lage en rullegardinmeny vil være nyttig for de som nettopp har startet sine første skritt i å opprette nettsteder og ønsker å forenkle arbeidet med å lage menyer på sider.
Bruksanvisning
Trinn 1
I HTML-kode er en slik meny en ikke-ordnet liste med nestede lister inni. For å komme i gang, opprett en style.css-fil og kopier følgende CSS-kode der for å style og formatere menyen:
#nav, #nav ul {
liste-stil: ingen;
margin: 0;
polstring: 0;
grense: 1px solid # 000;
bakgrunn: # 515151;
flyte: venstre;
bredde: 100%;
}
#nav li {
flyte: venstre;
posisjon: relativ;
bakgrunnsfarge: # 003366;
bak / bakken: ingen;
}
#nav li ul {
display: ingen;
posisjon: absolutt;
bakgrunnsfarge: # 003366;
polstring: 8px 0;
bredde: 138px;
}
Steg 2
Nå må vi legge til litt dekorasjon på menyelementene. Definer bredden og høyden for dem, fjern understrekingslinjene, angi en klar bredde for hver lenke, og spesifiser de ønskede bakgrunnsfargene.
Trinn 3
For alle disse endringene, legg til følgende kode i filen:
#nav a {
farge: #fff;
tekstdekorasjon: ingen;
skjerm: blokk;
bredde: 120px;
polstring: 4px 10px;
bakgrunnsfarge: # 003366 repeat-y right;
}
#nav a: hover {
farge: # 000;
bakgrunnsfarge: # 0033FF;
}
#nav li: hover {
bakgrunnsfarge: # 333333;
}
Deretter legger du til følgende kode for å fullføre menyen:
#nav li: hover li ul {
display: ingen;
bredde: 138px;
topp: -9px;
venstre: 133px;
}
#nav li: hover li: hover ul {
skjerm: blokk;
}
Trinn 4
I HTML-versjonen ser den generelle uordnede menylisten slik ut - på grunnlag er menyen opprettet, som ble nevnt i artikkelen.
- Hjem
-
Katalog
-
Alle produkter
- Etter dato
- Produsenter
- Annen
-
