Hea HTML-koodi ja lihtsate CSS-reeglite abil saate luua kena hüpikmenüü, mida saab hõlpsasti muuta ja täiendada. Kasutades märgistuskeelt ja kaskaadiga stiililehti, saate tagada, et menüüd töötaksid õigesti kõigis brauserites.
Juhised
Samm 1
Kõigepealt koostage oma menüü põhistruktuur. Avage tekstiredaktor ja looge nummerdatud loend koos alammenüüga, mis toimib vanemate loendi üksusena. Näiteks:
-
Esimene element
- Rippmenüü üksus
- Rippmenüü2
2. samm
Salvestage loodud loend eraldi HTML-faili. Järgmisena looge laiendiga.css fail ja sisestage kõik stiililehe parameetrid.
3. samm
Eemaldage kõik täppidest ja täppidest, mis on täpploendis, ja määrake menüü laius CSS-i tööriistade abil: ul {list-style: none;
laius: 200px; }
4. samm
Määrake kõigi loendis olevate üksuste suhteline asukoht, kasutades positsiooni atribuuti: ul li {position: suhteline; }
5. samm
Järgmisena peate kujundama alammenüü, mille kõik elemendid kuvatakse vanemimenüüst paremal hetkel, kui hiirekursor on üksusel: li ul {position: absoluutne;
vasakul: 199 pikslit;
ülemine: 0;
kuva: puudub; } Vasak atribuut on ühe piksli võrra väiksem kui menüü enda laius. See võimaldab hüpikaknaid arukalt paigutada, ilma topeltpiire tekitamata. Ekraani atribuuti kasutatakse alammenüü peitmiseks lehe avamisel.
6. samm
Stiilige lingid vastavalt soovile, kasutades sobivaid css-valikuid. Lisage parameeter display: block, nii et iga link võtab kogu ruumi, mille ta on sellele reserveerinud.
7. samm
Menüü kuvamiseks hetkel, kui kursor on selle kohal (hõljutage kursorit), peate sisestama koodi: li: hover ul {display: block; }
8. samm
Soovi korral määrake linkide ja loendiüksuste kuvamiseks lisavalikud.
9. samm
Hüpikmenüü on valmis. Nüüd jääb atribuudi lisamine.html-faili: hüpikmenüüsse
