Naudodamiesi kompetentingu HTML kodu ir paprastomis CSS taisyklėmis, galite sukurti iššokantįjį meniu, jį papildyti ir modifikuoti. Naudodami pakopines lenteles ir žymėjimo kalbos įrankius galite įsitikinti, kad pats meniu tinkamai veikia visose naršyklėse.
Nurodymai
1 žingsnis
Pirmiausia laikykitės pagrindinės meniu juostos. Sukurkite specialų numeruotų sąrašą su submeniu teksto redaktoriuje. Paprastai šiems tikslams naudojamas „Notepad“. Antrinis meniu veikia kaip tėvų sąrašo elementas. Pvz.: „First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5“.
2 žingsnis
Išsaugokite šį sąrašą atskirame HTML faile. Tada sukurkite.css failą. Įveskite visus reikiamus stiliaus lapo parametrus. Darykite tai labai atsargiai, nes viena klaida ir iššokantis meniu bus rodomas neteisingai arba visai neveiks.
3 žingsnis
Pašalinkite visas kulkas ir užpildą, taikomus ženklelių sąraše. Nustatykite meniu plotį naudodami CSS įrankius: ul -style: none; plotis: 200px; }
4 žingsnis
Visų sąrašo elementų santykinę padėtį pažymėkite atributu, vadinamu position: ul li: santykinis; }
5 žingsnis
Tada sutvarkykite submeniu, kurio elementai bus rodomi iš pirminio meniu dešinėje, kai pelės žymeklis bus virš elemento: li ul: absoliutus; kairė: 199 taškų; viršuje: 0; ekranas: nėra; }
6 žingsnis
Kairysis atributas yra vienu pikseliu mažesnis už paties meniu plotį. Tai leidžia iššokančiuosius elementus teisingai išdėstyti nesukuriant dvigubų kraštų. Rodymo atributas naudojamas paslėpti antrinį meniu atidarant puslapį.
7 žingsnis
Sukurkite nuorodas pagal poreikį naudodami atitinkamas css parinktis. Įtraukite parametrą „display: block“, kad nuorodos užimtų visą jiems skirtą vietą. Norėdami, kad meniu būtų rodomas pelės žymekliui užvedus virš jo, įveskite šį kodą: li: hover ul: block; }
8 žingsnis
Nustatykite papildomas sąrašo elementų ir nuorodų rodymo parinktis. Įtraukite atributą į.html failą. Iššokantis meniu yra paruoštas naudoti.
