Uz pomoć dobrog HTML koda i jednostavnih CSS pravila možete stvoriti lijep skočni meni koji se lako može mijenjati i dopunjavati. Korištenjem jezika za označavanje i kaskadnih tabela stilova možete osigurati da meniji ispravno rade u svim pregledačima.
Instrukcije
Korak 1
Prvo izgradite osnovnu strukturu svog menija. Otvorite uređivač teksta i kreirajte numeriranu listu sa podizbornikom koji djeluje kao nadređena stavka popisa. Na primjer:
-
Prvi element
- Padajuća stavka
- Dropdown2
Korak 2
Spremite generirani popis u zasebnu html datoteku. Dalje, kreirajte datoteku sa.css nastavkom i unesite sve parametre tabele stilova.
Korak 3
Uklonite bilo koji dodatak i oznake koji se primjenjuju na listi oznaka i postavite širinu izbornika pomoću CSS alata: ul {list-style: none;
širina: 200px; }
Korak 4
Postavite relativni položaj svih stavki na popisu koristeći atribut položaja: ul li {position: relative; }
Korak 5
Dalje, trebate dizajnirati podizbornik, čiji će se svaki element pojaviti desno od nadređenog izbornika u trenutku kada je pokazivač miša na stavci: li ul {position: absolute;
lijevo: 199px;
gore: 0;
zaslon: nema; } Lijevi atribut je jedan piksel manji od širine samog izbornika. To omogućava inteligentno pozicioniranje iskačućih stavki 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 meni pojavio u trenutku kada je kursor iznad njega (lebdenje), morate unijeti kod: li: hover ul {display: block; }
Korak 8
Po želji postavite dodatne opcije za prikaz veza i stavki liste.
Korak 9
Skočni meni je spreman. Sada ostaje uključiti atribut u.html datoteku: Skočni meni
