Izrada menu-a sa css-om
Opisat cemo izradu slikovnog menu-a pomocu css-a.
Prvo cemo nacrtati menu, kompletan, ili sliku po sliku, svejedno. Lakse nam je cijeli skupa.
Poduplajte .psd file u kojem radite. (Desni klik na naslov u okviru slike > Duplicate)
Koristit cemo hover stanje, sa drugom bojom teksta na dupliciranoj slici.
Prije rezanja slika, obojat cemo sva polja u hover stanje.
Sada sljedi najveca “mudrost” u izradi menu-a. Racimo da imamo ove slike u .psd formatu; sada cemo ih pretvoriti u -jpg, ili .gif ili jednostavno koristiti Flatern image opciju. Za to se mozete prisjetiti tutoriala Optimiziranje slika. Sada cemo te slike spojiti u jednu. Jedna neka bude povise druge.
To cemo napraviti tako da jednu povecamo za njenu visinu, te samo prebacimo ovu drugu unutar nje same.
(Image > Canvas size)
Zasto ovo radimo ovako? Zato jer ako radimo odvojene slike za normalno stanje linka i hover verziju, prelaskom misa preko linka imat cemo djelic sekunde koji ce ocitavati drugu sliku. Na ovaj nacin izbjegavamo taj ruzni efekt. Ovako browser ucita odmah link stanje, i hover stanje, te prelaskom misa preko linka ne gubi nista.
Sada cemo izrezati sliku na slideove, svaki link posebno, iako cak ni to ne moramo, postoji mogucnost da on ostane ovakav, te da ga samo rasporedimo unutar linkova, ali to necemo koristiti, vec svaki za sebe.
Sada slijedi css, preko kojeg cemo odrediti koji dio gdje da dode.
a.home:link, a.home:visited {
display: block;
height: 30px;
width: 104px;
background: url(slike/home.gif) bottom left no-repeat;
text-indent: -9999px;
float:left;
}a.home:hover {
display: block;
background: url(slike/home.gif) top left no-repeat;
height: 30px;
width: 104px;
}
Tako bi izgledao kod za tipku home. Za svaki drugi link cemo dodati njegov class.
Znaci, odredili smo velicinu svakog linka, te smo jedan postavili u gonji dio, drugi u donji.
text-indent: -9999px; ovaj kod koristimo za to da maknemo tekst linka. On i dalje tu postoji, ali smo ga makli 9999 pixela ulijevo, pa ne postoji teoretska sansa da ce nam smetat.
I to je to, dobili smo slikovni meni, koji nema tog ruznog djelica sekunde ocitavanje hover slike.