Pädeva HTML-koodi ja lihtsate CSS-reeglite abil saate luua hüpikmenüü, seda täiendada ja muuta. Kaskaaditabelite ja märgistuskeelte tööriistade abil saate tagada, et menüü ise töötab kõigis brauserites õigesti.
Juhised
Samm 1
Kõigepealt hoidke põhimenüü ribast kinni. Looge tekstiredaktoris alammenüüga spetsiaalne nummerdatud loend. Tavaliselt kasutatakse nendel eesmärkidel märkmikku. Alammenüü toimib vanemate loendi elemendina. Näiteks: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
2. samm
Salvestage see loend eraldi HTML-faili. Seejärel looge.css-fail. Sisestage kõik vajalikud stiililehe parameetrid. Tehke seda väga ettevaatlikult, sest üks viga ja hüpikmenüü ei ilmu õigesti või ei tööta üldse.
3. samm
Eemaldage kõik täppide loendis kasutatud täpid ja polstrid. CSS-i tööriistade abil saate määrata menüü laiuse: ul -style: none; laius: 200px; }
4. samm
Märkige kõigi loendis olevate üksuste suhteline asukoht atribuudiga nimega position: ul li: suhteline; }
5. samm
Seejärel korraldage alammenüü, mille elemendid ilmuvad vanemimenüüst paremale, kui hiirekursor on üksuse kohal: li ul: absoluutne; vasakule: 199 pikslit; ülemine: 0; kuva: puudub; }
6. samm
Vasak atribuut on ühe piksli võrra väiksem kui menüü enda laius. See võimaldab hüpikaknaid õigesti paigutada ilma topeltpiire loomata. Ekraani atribuuti kasutatakse alammenüü peitmiseks lehe avamisel.
7. samm
Stiilige linke vastavalt vajadusele vastavate css-valikute abil. Kaasa parameeter display: block, et lingid võtaksid kogu neile reserveeritud ruumi. Menüü kuvamiseks siis, kui hiirekursor selle kohal hõljutab, sisestage järgmine kood: li: hover ul: block; }
8. samm
Määrake loendikirjete ja linkide kuvamiseks soovi korral lisavõimalused. Lisage atribuut.html-faili. Hüpikmenüü on kasutamiseks valmis.
