S pomočjo dobre kode HTML in preprostih pravil CSS lahko ustvarite lep pojavni meni, ki ga je mogoče enostavno spremeniti in dopolniti. Z uporabo označevalnega jezika in kaskadnih slogovnih listov lahko zagotovite pravilno delovanje menijev v vseh brskalnikih.
Navodila
Korak 1
Najprej zgradite osnovno strukturo svojega menija. Odprite urejevalnik besedil in ustvarite oštevilčen seznam s podmenijem, ki deluje kot nadrejeni element seznama. Na primer:
-
Prvi element
- Spustni element
- Spustni meni2
2. korak
Ustvarjeni seznam shranite v ločeno datoteko html. Nato ustvarite datoteko s pripono.css in vnesite vse parametre slogovnega lista.
3. korak
Odstranite vse obloge in oznake, ki se uporabljajo na seznamu oznak, in nastavite širino menija z orodji CSS: ul {list-style: none;
širina: 200px; }
4. korak
Z atributom položaja nastavite relativni položaj vseh elementov na seznamu: ul li {position: relative; }
5. korak
Nato morate oblikovati podmeni, katerega elementi se bodo pojavili na desni strani nadrejenega menija v trenutku, ko je miškin kazalec na elementu: li ul {position: absolute;
levo: 199 slikovnih pik;
zgoraj: 0;
zaslon: noben; } Levi atribut je en slikovni pik manjši od širine samega menija. To omogoča inteligentno postavitev pojavnih elementov, ne da bi ustvarili dvojne obrobe. Atribut zaslona se uporablja za skrivanje podmenija pri odpiranju strani.
6. korak
Povezave po želji oblikujte z ustreznimi možnostmi css. Vključite parameter display: block, tako da vsaka povezava zavzame ves prostor, ki si ga je rezervirala.
7. korak
Če želite, da se meni prikaže v trenutku, ko je kurzor nad njim (lebdenje), morate vnesti kodo: li: hover ul {display: block; }
8. korak
Po želji nastavite dodatne možnosti za prikaz povezav in elementov seznama.
9. korak
Pojavni meni je pripravljen. Zdaj je še treba vključiti atribut v datoteko.html: pojavni meni
