Hyvän HTML-koodin ja yksinkertaisten CSS-sääntöjen avulla voit luoda mukavan ponnahdusvalikon, jota voidaan helposti muokata ja täydentää. Käyttämällä merkintäkieliä ja CSS-tyylitaulukoita voit varmistaa, että valikot toimivat oikein kaikissa selaimissa.
Ohjeet
Vaihe 1
Rakenna ensin valikkosi perusrakenne. Avaa tekstieditori ja luo numeroitu luettelo, jossa on alivalikko, joka toimii ylätason luettelokohteena. Esimerkiksi:
-
Ensimmäinen elementti
- Avattava valikko
- Avattava valikko 2
Vaihe 2
Tallenna luotu luettelo erilliseen HTML-tiedostoon. Luo seuraavaksi tiedosto.css-laajennuksella ja syötä kaikki tyylitaulukon parametrit.
Vaihe 3
Poista luettelomerkkien luettelossa olevat täyte ja luettelomerkit ja aseta valikon leveys CSS-työkaluilla: ul {list-style: none;
leveys: 200px; }
Vaihe 4
Aseta luettelon kaikkien kohteiden suhteellinen sijainti käyttämällä position attribuuttia: ul li {position: suht. }
Vaihe 5
Seuraavaksi sinun on suunniteltava alivalikko, jonka kaikki elementit näkyvät päävalikon oikealla puolella, kun hiiren osoitin on kohdassa: li ul {position: absoluuttinen;
vasen: 199 kuvapistettä;
yläosa: 0;
näyttö: ei mitään; } Vasen attribuutti on yksi pikseli vähemmän kuin itse valikon leveys. Tämä mahdollistaa ponnahdusikkunoiden sijoittamisen älykkäästi luomatta kaksinkertaisia reunoja. Näyttöattribuuttia käytetään piilottamaan alivalikko sivua avattaessa.
Vaihe 6
Suunnittele linkit haluamallasi tavalla käyttämällä sopivia css-asetuksia. Sisällytä display: block -parametri siten, että jokainen linkki vie kaiken sille varatun tilan.
Vaihe 7
Jos haluat, että valikko tulee näkyviin, kun kohdistin on sen päällä (hiiri), sinun on annettava koodi: li: hover ul {display: block; }
Vaihe 8
Aseta lisäasetukset linkkien ja luettelokohteiden näyttämiseksi haluamallasi tavalla.
Vaihe 9
Ponnahdusvalikko on valmis. Nyt on vielä sisällytettävä attribuutti.html-tiedosto: ponnahdusvalikkoon
