Kwa msaada wa nambari nzuri ya HTML na sheria rahisi za CSS, unaweza kuunda menyu nzuri ya dukizi ambayo inaweza kubadilishwa kwa urahisi na kuongezewa. Kwa kutumia lugha markup na Karatasi za Mitindo ya Kuingiza, unaweza kuhakikisha kuwa menyu hufanya kazi kwa usahihi katika vivinjari vyote.
Maagizo
Hatua ya 1
Kwanza, jenga muundo wa kimsingi wa menyu yako. Fungua kihariri cha maandishi na unda orodha yenye nambari iliyo na menyu ndogo ambayo hufanya kama orodha ya mzazi. Kwa mfano:
-
Kipengele cha kwanza
- Kitu kinachoangushwa
- Kushuka2
Hatua ya 2
Hifadhi orodha iliyozalishwa katika faili tofauti ya html. Ifuatayo, tengeneza faili na ugani wa.css na uweke vigezo vyote vya karatasi ya mtindo.
Hatua ya 3
Ondoa pedi yoyote na risasi ambazo zinatumika kwenye orodha ya risasi na weka upana wa menyu ukitumia zana za CSS: ul {list-style: none;
upana: 200px; }
Hatua ya 4
Weka nafasi ya jamaa ya vitu vyote kwenye orodha ukitumia sifa ya msimamo: ul li {position: jamaa; }
Hatua ya 5
Ifuatayo, unahitaji kubuni submenu, ambayo kila moja ya vitu ambavyo vitaonekana kulia kwa menyu ya mzazi wakati wakati pointer ya panya iko kwenye kipengee: li ul {position: absolute;
kushoto: 199px;
juu: 0;
onyesha: hakuna; } Sifa ya kushoto ni pikseli moja chini ya upana wa menyu yenyewe. Hii inaruhusu vitu vya pop-up kuwekwa vyema bila kuunda mipaka maradufu. Sifa ya kuonyesha hutumiwa kuficha menyu ndogo wakati wa kufungua ukurasa.
Hatua ya 6
Mtindo wa viungo kama unavyotaka kutumia chaguzi sahihi za css. Jumuisha kuonyesha: kuzuia parameta ili kila kiunga kichukue nafasi yote ambayo imejiwekea.
Hatua ya 7
Ili kufanya menyu ionekane wakati mshale umeisha juu yake (hover), unahitaji kuingiza nambari: li: hover ul {display: block; }
Hatua ya 8
Weka chaguzi za ziada za kuonyesha viungo na orodha ya vitu unavyotaka.
Hatua ya 9
Menyu ya pop-up iko tayari. Sasa inabaki kujumuisha sifa kwenye faili ya.html: Menyu ya ibukizi
