Izbornik se koristi za olakšavanje korisničke navigacije kroz odjeljke na web mjestu. Da bi privukao pozornost posjetitelja, jelovnik bi trebao biti funkcionalan, lagan za upotrebu i istodobno se kombinirati s dizajnom cijelog resursa.
Upute
Korak 1
Prije stvaranja izbornika, odlučite se za njegovu vrstu. 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 izbornika 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. Dođite do željenog odjeljka koda u koji želite umetnuti element sučelja.
3. korak
Nakon toga napravite popis opcija stvaranjem bloka i izradom numeriranog popisa s dodijeljenim ID-om. Na primjer:
- Poveznica 1
- Poveznica 2
- Poveznica 3
U ovom sam primjeru izradio popis s tri nabrajanja i stavio ga u div sloj s ID-om ID ploče.
4. korak
Idite na blok odjeljka vaše stranice i stvorite odgovarajući izbornik kaskadnih listova stilova. Ako želite stvoriti vodoravni izbornik, možete uključiti ugrađeni atribut za rezultirajući popis:
#panel ul li {display: inline; }
Korak 5
Da biste stvorili vodoravnu crtu duž cijele duljine stranice, možete upotrijebiti sljedeći kôd:
#panel ul {margina-lijevo: 0; popunjavanje: 2px 0; }
Korak 6
Tada možete napraviti vizualnu podjelu na pravokutnike:
#panel ul li a {margin-left: 3px; obrub: 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 popisa. 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 odabrana na kartici, postavite odgovarajuće parametre u otvorenu klasu:
#menu ul li a # otvoren {background: red; obrub-dno: 1 piksela; }
Trenutna stranica odabrana na ploči 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 mogućnosti prikaza, uvijek možete dodati CSS ili HTML kako biste poboljšali izgled objekta.
