Ang isang magandang dropdown menu ay maaaring malikha hindi lamang sa JavaScript, ngunit gumagamit din ng karaniwang mga HTML tag. Ang pamamaraang ito ng paglikha ng isang drop-down na menu ay magiging kapaki-pakinabang para sa mga nagsisimula pa lamang ng kanilang unang mga hakbang sa paglikha ng mga site at nais na gawing simple ang gawa ng paglikha ng mga menu sa mga pahina.
Panuto
Hakbang 1
Sa HTML code, ang nasabing menu ay isang hindi naiayos na listahan na may mga nakapaloob na listahan sa loob. Upang magsimula, lumikha ng isang file ng style.css at kopyahin ang sumusunod na CSS code doon upang mai-istilo at mai-format ang menu:
#nav, #nav ul {
list-style: wala;
margin: 0;
padding: 0;
hangganan: 1px solid # 000;
background: # 515151;
lumutang pakaliwa;
lapad: 100%;
}
#nav li {
lumutang pakaliwa;
posisyon: kamag-anak;
kulay sa background: # 003366;
likod / lupa: wala;
}
#nav li ul {
ipakita: wala;
posisyon: ganap;
kulay sa background: # 003366;
padding: 8px 0;
lapad: 138px;
}
Hakbang 2
Ngayon kailangan naming magdagdag ng ilang dekorasyon sa mga item sa menu. Tukuyin ang lapad at taas para sa kanila, alisin ang mga linya ng salungguhit, magtakda ng isang malinaw na lapad para sa bawat link, at tukuyin ang nais na mga kulay ng background.
Hakbang 3
Para sa lahat ng mga pagbabagong ito, idagdag ang sumusunod na code sa file:
#nav a {
kulay: #fff;
dekorasyon sa teksto: wala;
ipakita: harangan;
lapad: 120px;
padding: 4px 10px;
background-color: # 003366 ulitin-y kanan;
}
#nav a: hover {
kulay: # 000;
kulay sa background: # 0033FF;
}
#nav li: hover {
kulay sa background: # 333333;
}
Pagkatapos ay idagdag ang sumusunod na piraso ng code upang tapusin ang menu:
#nav li: hover li ul {
ipakita: wala;
lapad: 138px;
itaas: -9px;
kaliwa: 133px;
}
#nav li: hover li: hover ul {
ipakita: harangan;
}
Hakbang 4
Sa bersyon ng HTML, ganito ang pangkalahatang hindi naayos na listahan ng menu - batay dito, nilikha ang menu, na nabanggit sa artikulo.
- Bahay
-
Catalog
-
Lahat ng produkto
- Sa pamamagitan ng petsa
- Mga tagagawa
- Iba pa
-
