Naudodamiesi geru HTML kodu ir paprastomis CSS taisyklėmis, galite sukurti gražų iššokantįjį meniu, kurį galima lengvai modifikuoti ir papildyti. Naudodami žymėjimo kalbą ir pakopų stiliaus lenteles galite įsitikinti, kad meniu veikia tinkamai visose naršyklėse.
Nurodymai
1 žingsnis
Pirmiausia sukurkite pagrindinę savo meniu struktūrą. Atidarykite teksto rengyklę ir sukurkite sunumeruotą sąrašą su antriniu meniu, kuris veikia kaip pirminis sąrašo elementas. Pavyzdžiui:
-
Pirmasis elementas
- Išskleidžiamasis elementas
- Išskleidžiamasis meniu2
2 žingsnis
Išsaugokite sugeneruotą sąrašą atskirame HTML faile. Tada sukurkite failą su plėtiniu.css ir įveskite visus stiliaus lapo parametrus.
3 žingsnis
Pašalinkite visus ženklelių sąraše esančius užpildus ir ženklelius ir nustatykite meniu plotį naudodami CSS įrankius: ul {list-style: none;
plotis: 200 taškų; }
4 žingsnis
Nustatykite visų sąrašo elementų santykinę padėtį naudodami pozicijos atributą: ul li {position: suhtinis; }
5 žingsnis
Tada turite sukurti submeniu, kurio kiekvienas elementas bus rodomas pagrindinio meniu dešinėje tuo metu, kai pelės žymeklis yra ant elemento: li ul {position: Absolute;
kairėje: 199 taškų;
viršuje: 0;
rodyti: nėra; } Kairysis atributas yra vienu pikseliu mažesnis už paties meniu plotį. Tai leidžia iššokančiuosius elementus sumaniai išdėstyti nesukuriant dvigubų kraštinių. Rodymo atributas naudojamas paslėpti antrinį meniu atidarant puslapį.
6 žingsnis
Sukurkite nuorodas pagal pageidavimą naudodami atitinkamas css parinktis. Įtraukite parametrą „display: block“, kad kiekviena nuoroda užimtų visą jai skirtą vietą.
7 žingsnis
Norėdami, kad meniu būtų rodomas tuo metu, kai žymeklis yra virš jo (užveskite pelės žymeklį), turite įvesti kodą: li: hover ul {display: block; }
8 žingsnis
Nustatykite papildomas nuorodas ir sąrašo elementų rodymo parinktis.
9 žingsnis
Iššokantis meniu yra paruoštas. Dabar lieka įtraukti atributą į.html failą: Iššokantis meniu
