Një menu e bukur zbritëse mund të krijohet jo vetëm në JavaScript, por gjithashtu duke përdorur etiketa standarde HTML. Kjo metodë e krijimit të një menuje zbritëse do të jetë e dobishme për ata që sapo fillojnë hapat e tyre të parë në krijimin e faqeve dhe duan të thjeshtojnë punën e krijimit të menusë në faqe.
Udhëzimet
Hapi 1
Në kodin HTML, një menu e tillë është një listë e parenditur me lista të vendosura brenda. Për të filluar, krijoni një skedar style.css dhe kopjoni kodin e mëposhtëm CSS atje për të stiluar dhe formatuar menunë:
#nav, #nav ul {
stili i listës: asnjë;
diferencë: 0;
mbushje: 0;
kufiri: 1px solid # 000;
sfond: # 515151;
noton: majtas;
gjerësia: 100%;
}
#nav li {
noton: majtas;
pozicioni: relativ;
ngjyra e sfondit: # 003366;
prapa / terren: asnjë;
}
#nav li ul {
ekran: asnjë;
pozicioni: absolut;
ngjyra e sfondit: # 003366;
mbushje: 8px 0;
gjerësia: 138px;
}
Hapi 2
Tani duhet të shtojmë disa dekorime në artikujt e menusë. Përcaktoni gjerësinë dhe lartësinë për to, hiqni linjat e nënvizuara, vendosni një gjerësi të qartë për secilën lidhje dhe specifikoni ngjyrat e dëshiruara të sfondit.
Hapi 3
Për të gjitha këto ndryshime, shtoni kodin e mëposhtëm në skedar:
#nav a {
ngjyra: #fff;
dekorim teksti: asnjë;
ekran: bllok;
gjerësia: 120px;
mbushje: 4px 10px;
background-color: # 003366 përsëris-y djathtas;
}
#nav a: rri pezull {
ngjyra: # 000;
ngjyra e sfondit: # 0033FF;
}
#nav li: rri pezull {
ngjyra e sfondit: # 333333;
}
Pastaj shtoni pjesën e mëposhtme të kodit për të finalizuar menunë:
#nav li: rri pezull në ul {
ekran: asnjë;
gjerësia: 138px;
maja: -9px;
majtas: 133px;
}
#nav li: hover li: hover ul {
ekran: bllok;
}
Hapi 4
Në versionin HTML, lista e përgjithshme e menuve të parenditura duket kështu - mbi bazën e saj, krijohet menuja, e cila u përmend në artikull.
- Shtëpi
-
Katalog
-
Të gjitha produktet
- Sipas datës
- Prodhuesit
- Të tjera
-
