Izbornik se koristi za olakšavanje korisničke navigacije kroz odjeljke na web mjestu. Da bi privukao pažnju posjetitelja, jelovnik bi trebao biti funkcionalan, lak za upotrebu i istovremeno se kombinirati s dizajnom cijelog resursa.
Instrukcije
Korak 1
Prije stvaranja izbornika, odlučite se za njegov tip. Možete stvoriti padajući horizontalni ili vertikalni okvir koji će se prikazati korisniku kada korisnik zadrži pokazivač miša iznad njega. Pri odabiru određenog menija možete se voditi koliko će posjetiteljima biti prikladno koristiti ga i kako će se kombinirati s dizajnom.
Korak 2
Nakon odabira vrste izbornika, otvorite datoteku stranice bilo kojim uređivačem teksta koji koristite za uređivanje HTML-a. Idite do željenog odjeljka koda u koji želite umetnuti svoj element sučelja.
Korak 3
Nakon toga napravite listu opcija stvaranjem bloka i izradom numerirane liste s dodijeljenim ID-om. Na primjer:
- Link 1
- Link 2
- Link 3
U ovom primjeru kreirao sam nabrajanu listu od tri elementa i smjestio je u div sloj s ID ID-om panela.
Korak 4
Idite na blok odjeljka na vašoj stranici i stvorite odgovarajući izbornik kaskadnih listova stilova. Ako želite stvoriti vodoravni izbornik, možete uključiti ugrađeni atribut za rezultirajuću listu:
#panel ul li {display: inline; }
Korak 5
Da biste kreirali vodoravnu crtu duž cijele stranice, možete koristiti sljedeći kod:
#panel ul {margina-lijevo: 0; popunjavanje: 2px 0; }
Korak 6
Tada možete izvršiti vizuelnu podjelu na pravougaonike:
#panel ul li a {margin-left: 3px; granica: 1px; popunjavanje: 2px 3px; pozadina: plava; }
Ovaj kôd postavlja uvlake teksta od elemenata obruba preko atributa lijeve margine i dodavanja, a također postavlja boju pozadine za svaku od stavki liste. U ovom primjeru boja je plava, ali možete je promijeniti po vlastitom nahođenju.
Korak 7
Da biste usmjerili na stavku na trenutnoj stranici koja je izabrana na kartici, postavite odgovarajuće parametre u otvorenu klasu:
#menu ul li a # otvoren {background: red; rub-dno: 1px; }
Trenutna stranica odabrana na panelu sada će biti prikazana crvenom bojom.
Korak 8
Spremite promjene u datoteku i provjerite funkcionalnost napisanog koda otvaranjem stranice putem preglednika. Da biste postavili dodatne opcije prikaza, uvijek možete dodati CSS ili HTML kako biste poboljšali izgled objekta.
