Uz pomoć dobrog HTML koda i jednostavnih CSS pravila možete stvoriti lijep skočni izbornik koji se lako može mijenjati i dopunjavati. Korištenjem jezika za označavanje i kaskadnih tabela stilova možete osigurati ispravnost rada izbornika u svim preglednicima.
Upute
Korak 1
Prvo izradite osnovnu strukturu svog jelovnika. Otvorite uređivač teksta i stvorite numerirani popis s podizbornikom koji djeluje kao nadređena stavka popisa. Na primjer:
-
Prvi element
- Padajuća stavka
- Padajući2
Korak 2
Spremite generirani popis u zasebnu html datoteku. Zatim stvorite datoteku s.css nastavkom i unesite sve parametre stilske tablice.
3. korak
Uklonite sve obloge i oznake koji se primjenjuju na popisu oznaka i postavite širinu izbornika pomoću CSS alata: ul {list-style: none;
širina: 200px; }
4. korak
Postavite relativni položaj svih stavki na popisu pomoću atributa position: ul li {position: relative; }
Korak 5
Dalje, trebate dizajnirati podizbornik, čiji će se svaki element pojaviti s desne strane nadređenog izbornika u trenutku kada je pokazivač miša na stavci: li ul {position: absolute;
lijevo: 199 piksela;
vrh: 0;
zaslon: nema; } Lijevi atribut je jedan piksel manji od širine samog izbornika. To omogućuje inteligentno postavljanje skočnih predmeta bez stvaranja dvostrukih obruba. Atribut prikaza koristi se za skrivanje podizbornika prilikom otvaranja stranice.
Korak 6
Oblikujte veze prema želji koristeći odgovarajuće css opcije. Uključite parametar display: block tako da svaka veza zauzima sav prostor koji je za nju rezervirala.
Korak 7
Da bi se izbornik pojavio u trenutku kad je kursor iznad njega (lebdenje), morate unijeti kôd: li: hover ul {display: block; }
Korak 8
Po želji postavite dodatne mogućnosti za prikaz veza i stavki popisa.
Korak 9
Skočni izbornik je spreman. Sada ostaje uključiti atribut u datoteku.html: Skočni izbornik
