Uz pomoć kompetentnog HTML koda i jednostavnih CSS pravila možete stvoriti skočni izbornik, dopuniti ga i izmijeniti. Korištenjem kaskadnih tablica i alata za označavanje možete osigurati da sam izbornik ispravno radi u svim preglednicima.
Upute
Korak 1
Prvo se držite osnovne trake izbornika. Stvorite poseban numerirani popis s podizbornikom u uređivaču teksta. U ove se svrhe obično koristi "Notepad". Podizbornik djeluje kao element nadređenog popisa. Na primjer: Prvi elementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Korak 2
Spremite ovaj popis u zasebnu html datoteku. Zatim stvorite.css datoteku. Unesite sve potrebne parametre tablice stilova. Učinite to vrlo pažljivo, jer jedna pogreška, a skočni izbornik neće se ispravno prikazati ili uopće neće raditi.
3. korak
Uklonite sve metke i uloške primijenjene na popisu metaka. Postavite širinu izbornika pomoću CSS alata: ul -style: none; width: 200px; }
4. korak
Označite relativni položaj svih stavki na popisu atributom koji se naziva pozicija: ul li: relative; }
Korak 5
Zatim uredite podizbornik, čiji će se elementi pojaviti s nadređenog izbornika zdesna kada se kursor miša nalazi iznad stavke: li ul: absolute; lijevo: 199px; top: 0; display: none; }
Korak 6
Lijevi atribut je jedan piksel manji od širine samog izbornika. To omogućuje ispravno postavljanje skočnih stavki bez stvaranja dvostrukih obruba. Atribut prikaza koristi se za skrivanje podizbornika prilikom otvaranja stranice.
Korak 7
Po potrebi oblikujte veze koristeći odgovarajuće css opcije. Uključite parametar display: block tako da veze zauzimaju sav prostor rezerviran za njih. Da bi se izbornik pojavio kad se pokazivač miša zadrži nad njim, unesite sljedeći kôd: li: hover ul: block; }
Korak 8
Po želji postavite dodatne mogućnosti za prikaz stavki popisa i veza. Uključite atribut u.html datoteku. Skočni izbornik spreman je za upotrebu.
