Pätevän HTML-koodin ja yksinkertaisten CSS-sääntöjen avulla voit luoda ponnahdusikkunan, täydentää sitä ja muokata sitä. Käyttämällä CSS-taulukoita ja merkintäkielityökaluja voit varmistaa, että itse valikko toimii oikein kaikissa selaimissa.
Ohjeet
Vaihe 1
Pidä ensin kiinni perusvalikkopalkista. Luo erityinen numeroitu luettelo, jossa on alivalikko tekstieditorissa. Yleensä "Muistio" käytetään näihin tarkoituksiin. Alivalikko toimii osana vanhempaluetteloa. Esimerkki: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Vaihe 2
Tallenna tämä luettelo erilliseen HTML-tiedostoon. Luo sitten.css-tiedosto. Syötä kaikki vaaditut tyylitaulukon parametrit. Tee tämä erittäin huolellisesti, koska yksi virhe, ja ponnahdusvalikko ei näy oikein tai ei toimi ollenkaan.
Vaihe 3
Poista kaikki luetteloluettelossa olevat luodit ja täytteet. Aseta valikon leveys CSS-työkaluilla: ul -style: none; width: 200px; }
Vaihe 4
Merkitse kaikkien luettelon kohteiden suhteellinen sijainti attribuutilla nimeltä position: ul li: suhteellinen; }
Vaihe 5
Järjestä sitten alivalikko, jonka elementit näkyvät ylätason valikosta oikealle, kun hiiren kohdistin on kohteen päällä: li ul: absoluuttinen; vasen: 199 kuvapistettä; yläosa: 0; näyttö: ei mitään; }
Vaihe 6
Vasen attribuutti on yksi pikseli vähemmän kuin itse valikon leveys. Tämä mahdollistaa ponnahdusikkunoiden sijoittamisen oikein luomatta kaksinkertaisia reunoja. Näyttöattribuuttia käytetään piilottamaan alivalikko sivua avattaessa.
Vaihe 7
Suunnittele linkit tarpeen mukaan käyttämällä sopivia css-asetuksia. Sisällytä display: block -parametri, jotta linkit vievät kaiken heille varatun tilan. Jos haluat, että valikko tulee näkyviin, kun hiiren kohdistin on sen päällä, kirjoita seuraava koodi: li: hover ul: block; }
Vaihe 8
Määritä lisäasetukset luettelokohteiden ja linkkien näyttämiseksi haluamallasi tavalla. Lisää attribuutti.html-tiedostoon. Ponnahdusvalikko on käyttövalmis.
