Stvaranje menija je vjerovatno jedna od glavnih točaka u razvoju web stranica i programa. Uz to, dobra razrada i logičan dizajn takvog izbornika zaštitno je lice web stranice ili bilo kojeg drugog programa. Na primjer, uzmimo Microsoft i operativni sistem 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 nezgodno 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 će se promijeniti da bi se kreirao meni
Instrukcije
Korak 1
Idite na Upravljanje stilovima, a zatim kliknite gumb Novi stil. Dajte ime Selector ul li novom stilu koji ste upravo kreirali. 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.
Korak 3
Za vodoravno poravnanje idite na Layout i postavite atribut prikaza na inline. Postavite atribut float na lijevo. Kliknite gumb Primijeni. Sve stavke liste moraju biti postavljene u jedan red. Da se oni ne bi međusobno preklapali, morate učiniti sljedeće: postavite vrijednost položaja atributa širine na 150px. Sad provjeri. Svi elementi liste trebali bi postati iste veličine.
Korak 4
Sada moramo pokušati ukloniti točkice ispred stavki na listi. Da biste to učinili, idite na List i postavite atribut list-style –type na none.
Korak 5
Kliknite U redu da prihvatite sve promjene.
Korak 6
Da biste prilagodili veličinu fonta za stil ul li, morate učiniti sljedeće. U Manage Styles, kliknite desnim tasterom miša na 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 meniju 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. Pritisnite U redu za spremanje.
Korak 9
Sada provjerite svoj rezultat. Za pouzdanost je bolje da ga testirate u različitim pregledačima. Da biste provjerili rezultat dobiven u zadanom pregledniku, morate pritisnuti tipku F12 na tipkovnici.
