En god rullemenu kan oprettes ikke kun i JavaScript, men også ved hjælp af standard HTML-tags. Denne metode til at oprette en rullemenu vil være nyttig for dem, der lige er ved at starte deres første trin i oprettelse af websteder og ønsker at forenkle arbejdet med at oprette menuer på sider.
Instruktioner
Trin 1
I HTML-kode er en sådan menu en ikke-ordnet liste med indlejrede lister inde. For at komme i gang skal du oprette en style.css-fil og kopiere følgende CSS-kode der for at style og formatere menuen:
#nav, #nav ul {
liste-stil: ingen;
margen: 0;
polstring: 0;
kant: 1 px solid # 000;
baggrund: # 515151;
flyde: venstre;
bredde: 100%;
}
#nav li {
flyde: venstre;
position: relativ;
baggrundsfarve: # 003366;
bag / jord: ingen;
}
#nav li ul {
display: ingen;
position: absolut;
baggrundsfarve: # 003366;
polstring: 8px 0;
bredde: 138px;
}
Trin 2
Nu skal vi tilføje nogle dekorationer til menupunkterne. Definer bredden og højden for dem, fjern de understregede linjer, indstil en klar bredde for hvert link, og angiv de ønskede baggrundsfarver.
Trin 3
For alle disse ændringer skal du tilføje følgende kode til filen:
#nav en {
farve: #fff;
tekst-dekoration: ingen;
display: blok;
bredde: 120px;
polstring: 4 px 10 pixel;
baggrundsfarve: # 003366 gentag-y højre;
}
#nav a: svæv {
farve: # 000;
baggrundsfarve: # 0033FF;
}
#nav li: svæver {
baggrundsfarve: # 333333;
}
Tilføj derefter følgende stykke kode for at færdiggøre menuen:
#nav li: svæver li ul {
display: ingen;
bredde: 138px;
top: -9px;
venstre: 133px;
}
#nav li: svæver li: svæver ul {
display: blok;
}
Trin 4
I HTML-versionen ser den generelle ikke-ordnede menuliste sådan ud - på basis heraf oprettes menuen, som blev nævnt i artiklen.
- Hjem
-
Katalog
-
Alle produkter
- Efter dato
- Producenter
- Andet
-
