En trevlig rullgardinsmeny kan skapas inte bara i JavaScript utan även med standard HTML-taggar. Denna metod för att skapa en rullgardinsmeny kommer att vara användbar för dem som just har börjat sina första steg i att skapa webbplatser och vill förenkla arbetet med att skapa menyer på sidor.
Instruktioner
Steg 1
I HTML-kod är en sådan meny en oordnad lista med kapslade listor inuti. För att komma igång skapar du en style.css-fil och kopierar följande CSS-kod dit för att utforma och formatera menyn:
#nav, #nav ul {
liststil: ingen;
marginal: 0;
stoppning: 0;
gräns: 1px fast # 000;
bakgrund: # 515151;
flyta till vänster;
bredd: 100%;
}
#nav li {
flyta till vänster;
position: relativ;
bakgrundsfärg: # 003366;
bakre / mark: ingen;
}
#nav li ul {
display: ingen;
position: absolut;
bakgrundsfärg: # 003366;
stoppning: 8px 0;
bredd: 138px;
}
Steg 2
Nu måste vi lägga till lite dekoration i menyalternativen. Definiera bredden och höjden för dem, ta bort understrykningslinjerna, ställ in en tydlig bredd för varje länk och ange önskade bakgrundsfärger.
Steg 3
Lägg till följande kod i filen för alla dessa ändringar:
#nav a {
färg: #fff;
text-dekoration: ingen;
display: blockera;
bredd: 120px;
stoppning: 4px 10px;
bakgrundsfärg: # 003366 repeat-y right;
}
#nav a: sväva {
färg: # 000;
bakgrundsfärg: # 0033FF;
}
#nav li: hover {
bakgrundsfärg: # 333333;
}
Lägg sedan till följande kod för att slutföra menyn:
#nav li: sväva li ul {
display: ingen;
bredd: 138px;
topp: -9px;
vänster: 133px;
}
#nav li: sväva li: sväva ul {
display: blockera;
}
Steg 4
I HTML-versionen ser den allmänna oordnade menylistan ut så här - på grundval skapas menyn, som nämndes i artikeln.
- Hem
-
Katalog
-
Alla produkter
- Efter datum
- Tillverkare
- Övrig
-
