Gražų išskleidžiamąjį meniu galima sukurti ne tik „JavaScript“, bet ir naudojant standartines HTML žymes. Šis išskleidžiamojo meniu sukūrimo metodas bus naudingas tiems, kurie tik pradeda savo pirmuosius žingsnius kurdami svetaines ir nori supaprastinti meniu meniu puslapiuose.
Nurodymai
1 žingsnis
HTML kode toks meniu yra nesutvarkytas sąrašas, kurio viduje yra įdėti sąrašai. Norėdami pradėti, sukurkite failą style.css ir nukopijuokite šį CSS kodą į meniu stilių ir formatą:
#nav, #nav ul {
list-style: nėra;
paraštė: 0;
užpildas: 0;
kraštas: 1px solid # 000;
fonas: # 515151;
plūdė: kairė;
plotis: 100%;
}
#nav li {
plūdė: kairė;
padėtis: giminaitis;
fono spalva: # 003366;
back / ground: nėra;
}
#nav li ul {
rodyti: nėra;
pozicija: absoliuti;
fono spalva: # 003366;
užpildas: 8px 0;
plotis: 138 taškų;
}
2 žingsnis
Dabar mes turime pridėti keletą papuošimų meniu elementuose. Apibrėžkite jų plotį ir aukštį, pašalinkite pabraukimo linijas, nustatykite aiškų kiekvienos nuorodos plotį ir nurodykite norimas fono spalvas.
3 žingsnis
Atlikdami visus šiuos pakeitimus, faile pridėkite šį kodą:
#nav a {
spalva: #fff;
teksto dekoravimas: nėra;
rodyti: blokuoti;
plotis: 120px;
užpildas: 4px10px;
fono spalva: # 003366 pakartokite-y dešinė;
}
#nav a: užveskite pelės žymeklį {
spalva: # 000;
fono spalva: # 0033FF;
}
#nav li: užveskite pelės žymeklį {
fono spalva: # 333333;
}
Tada pridėkite šį kodą, kad užbaigtumėte meniu:
#nav li: užveskite li ul ul {
rodyti: nėra;
plotis: 138 taškų;
viršuje: -9px;
kairėje: 133 taškų;
}
#nav li: užveskite li: užveskite ul {
rodyti: blokuoti;
}
4 žingsnis
HTML versijoje bendras nesutvarkytų meniu sąrašas atrodo taip - jo pagrindu sukuriamas meniu, kuris buvo paminėtas straipsnyje.
- Namai
-
Katalogas
-
Visi produktai
- Pagal datą
- Gamintojai
- Kita
-
