Menyu nzuri ya kushuka inaweza kuundwa sio tu kwenye JavaScript, lakini pia kwa kutumia vitambulisho vya kawaida vya HTML. Njia hii ya kuunda menyu kunjuzi itakuwa muhimu kwa wale ambao wanaanza tu hatua zao za kwanza katika kuunda tovuti na wanataka kurahisisha kazi ya kuunda menyu kwenye kurasa.
Maagizo
Hatua ya 1
Katika nambari ya HTML, menyu kama hiyo ni orodha isiyo na orodha na orodha zilizo ndani ndani. Ili kuanza, tengeneza faili ya style.css na unakili nambari ifuatayo ya CSS hapo ili kuunda na kuunda menyu:
#nav, #nav ul {
mtindo-orodha: hakuna;
margin: 0;
padding: 0;
mpaka: 1px imara # 000;
historia: # 515151;
kuelea: kushoto;
upana: 100%;
}
#nav li {
kuelea: kushoto;
msimamo: jamaa;
rangi ya asili: # 003366;
nyuma / ardhi: hakuna;
}
#nav li ul {
onyesha: hakuna;
msimamo: kabisa;
rangi ya asili: # 003366;
padding: 8px 0;
upana: 138px;
}
Hatua ya 2
Sasa tunahitaji kuongeza mapambo kwenye vitu vya menyu. Fafanua upana na urefu kwao, ondoa mistari iliyosisitizwa, weka upana wazi kwa kila kiunga, na taja rangi za mandharinyuma zinazohitajika.
Hatua ya 3
Kwa mabadiliko haya yote, ongeza nambari ifuatayo kwenye faili:
#nav a {
rangi: #fff;
maandishi-mapambo: hakuna;
onyesha: kuzuia;
upana: 120px;
padding: 4px 10px;
rangi ya asili: # 003366 kurudia-y kulia;
}
#nav a: hover {
rangi: # 000;
rangi ya asili: # 0033FF;
}
#nav li: hover {
rangi ya asili: # 333333;
}
Kisha ongeza kipande kifuatacho cha msimbo ili kumaliza menyu:
#nav li: hover li ul {
onyesha: hakuna;
upana: 138px;
juu: -9px;
kushoto: 133px;
}
#nav li: hover li: hover ul {
onyesha: kuzuia;
}
Hatua ya 4
Katika toleo la HTML, orodha ya menyu isiyo na kipimo ya jumla inaonekana kama hii - kwa msingi wake, menyu imeundwa, ambayo ilitajwa katika kifungu hicho.
- Nyumbani
-
Katalogi
-
Bidhaa zote
- Kwa tarehe
- Watengenezaji
- Nyingine
-
