Stvaranje izbornika vjerojatno je jedna od glavnih točaka u razvoju web mjesta i programa. Uz to, dobra razrada i logičan dizajn takvog izbornika zaštitno je lice web mjesta ili bilo kojeg drugog programa. Na primjer, uzmimo Microsoft i operativni sustav Windows 7. Nakon izlaska Windows 7, Microsoft je čuo puno kritika koje same sebi nisu bile laskave. Bilo je mnogo kritika, ali najčešće neugodno pozicioniranih stavki izbornika. Pažljivo pročitajte ovaj vodič o tome kako stvoriti vodoravni padajući izbornik s CSS-om i Expression Webom. Stilovi oznaka promijenit će se kako bi se stvorio izbornik
Upute
Korak 1
Idite na Upravljanje stilovima, a zatim kliknite gumb Novi stil. Dajte ime Selector ul li novom stilu koji ste upravo stvorili. Također imajte na umu da novi stil mora biti definiran u padajućoj.css datoteci.
Korak 2
Da biste razvukli vodoravni izbornik, stavkama izbornika morate reći da će biti vodoravan. Dalje, trebate odrediti širinu svake stavke izbornika i ukloniti sve nepotrebne točke ispred svih stavki popisa.
3. korak
Za vodoravno poravnanje idite na Layout i postavite atribut zaslona na inline. Postavite atribut float na lijevo. Kliknite gumb Primijeni. Sve stavke popisa moraju biti postavljene u jedan redak. Da se ne bi međusobno preklapali, trebate učiniti sljedeće: postavite vrijednost atributa širine Position na 150px. Sad provjeri. Svi elementi popisa trebali bi postati iste veličine.
4. korak
Sada moramo pokušati ukloniti točke ispred stavki popisa. Da biste to učinili, idite na List i postavite atribut list-style –type na none.
Korak 5
Kliknite U redu da biste prihvatili sve promjene.
Korak 6
Da biste prilagodili veličinu fonta za stil ul li, morate učiniti sljedeće. U odjeljku Upravljanje stilovima, desnom tipkom miša kliknite ul li stil koji trebate odabrati Modify Style. Otvorit će se poznati dijaloški okvir za dodavanje ili promjenu atributa. Idite u kategoriju Font i postavite atribut porodice fontova na Arial, Helvetica, sans-serif. Zatim idite na atribut veličine fonta i postavite ga na 0.9em. Nakon toga, postavite atribut text-transform, postavite vrijednost za njega velikim slovima.
Korak 7
Visina stavki u kreiranom izborniku može se podesiti u kategoriji Pozicija. Postavite atribut visine na 30 piksela.
Korak 8
Dalje, morate spremiti datoteku menu.html. Da bi to učinio, Expression Web otvorit će potreban prozor Spremi ugrađene datoteke za spremanje datoteke. Spremite u datoteku drop-down.css. Kliknite U redu za spremanje.
Korak 9
Sada provjerite svoj rezultat. Za pouzdanost je bolje testirati ga u različitim preglednicima. Da biste provjerili rezultat dobiven u zadanom pregledniku, morate pritisnuti tipku F12 na tipkovnici.
