Menyu ya kunjuzi kwenye kurasa za wavuti hutumiwa kuhifadhi nafasi na kutoa uwasilishaji wa kimantiki wa muundo wa rasilimali ya wavuti. Kuna njia nyingi za kutekeleza kipengee hiki, moja ya rahisi zaidi imetolewa hapa chini.
Ni muhimu
Ujuzi wa kimsingi wa lugha za HTML na CSS
Maagizo
Hatua ya 1
Nambari ya HTML ya menyu hutumia vipengee vya orodha zilizowekwa (UL na LI), ndani ambayo viungo vya kurasa vimewekwa. Haina muundo wowote tata. Mienendo inatekelezwa kwa njia ya CSS, kizuizi cha maelezo ambacho kinawekwa moja kwa moja kwenye nambari ya chanzo ya ukurasa. Hakuna kitu maalum juu yake pia, zaidi ya hayo, maandishi yana maelezo kadhaa ya kusudi la vizuizi vya mitindo fulani.
Hatua ya 2
<! DOCTYPE html UMMA "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menyu ya kunjuzi * {
font-familia: Verdana;
saizi ya fonti: 14px;
} ul, li, a {
padding: 0;
onyesha: kuzuia;
mpaka: 0;
margin: 0;
} ul {
mpaka: 1px imara #AAA;
upana: 150px;
mtindo-orodha: hakuna;
historia: #FFF;
} li {
rangi ya asili: #AAA;
msimamo: jamaa;
z-index: 9;
padding: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
msimamo: kabisa;
juu: 5px;
kushoto: 111px; / * kwa vivinjari vya IE * /
}
li.folder> ul {kushoto: 140px;} / * kwa vivinjari vingine * / a {
padding: 2px;
mpaka: 1px imara #FFF;
maandishi-mapambo: hakuna;
upana: 100%; / * kwa vivinjari vya IE * /
rangi: # 000;
font-uzito: ujasiri;
}
li> a {width: auto;} / * kwa vivinjari vingine * / li a {
upana: 140px;
onyesha: kuzuia;
} li a.submenu {
rangi ya nyuma: njano;
} / * Viungo * /
a: hover {
rangi ya mpaka: kijivu;
rangi ya asili: # FF0000;
rangi: nyeusi;
}
li. folda ya: hover {
rangi ya asili: # FF0000;
} / * Folda * /
ul ul, li: hover ul ul {onyesha: hakuna;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {kuonyesha: kuzuia;}
- 1. Ukurasa
-
2. Folda
- 2.1 Ukurasa
-
Folda ya 2.2
- Ukurasa wa 2.2.1
- Ukurasa wa 2.2.2
- Ukurasa wa 2.2.3
- Ukurasa wa 2.3
-
3. Folda
- Ukurasa wa 3.1
- 3.2 Ukurasa
- Ukurasa wa 3.3
- 4. Ukurasa
Hatua ya 3
Unaweza kuongeza msaada kwa matoleo ya zamani ya vivinjari vya Internet Explorer kwenye nambari hii - inatekelezwa kwa kutumia JavaScript (na Peter Nederlof) Unahitaji kupakua faili na nambari inayotakiwa, kwa mfano, kutoka kwa kiunga hiki - https://peterned.home.xs4all.nl/htc/csshover3.htc. Lazima iwekwe kwenye folda sawa na ukurasa kuu. Na katika maelezo ya mitindo ya ukurasa kuu, ongeza kiunga kwake - inaweza kuwekwa moja kwa moja baada ya lebo ya mtindo wa kufungua: / * kwa vivinjari vya zamani vya IE *
mwili {tabia: url ("csshover3.htc");}
