Pregled posta

Adresa bloga: https://blog.dnevnik.hr/tutor

Marketing

Izbornik s rollover efektom

Ovo je tutorial kako napraviti lijepo izgledajući meni kao što možete vidjeti ovdje sa strane :)
Zapravo je vrlo jednostavno.


Glavna stvar koju morate napraviti je da vašu listu linkova sortirate u unordered (nenumeriranu) listu. Ovako:


<ul class="meni"><li>linkovi</li><li><a href="http://inobscuro.com/">in obscuro</a></li><a href="http://chattenoire.com/">chatte noire</a></li><li><a href="http://tutor.blog.hr/">tutor.blog</a></li></ul>

to će izgledati ovako:



Za sada to izgleda malo ružno, ali CSS će sve riješiti :) Zato smo listi dali klasu meni kako bi joj mogli pristupiti preko CSS-a, a da to formatiranje ne utječe na možebitne druge liste na vašem blogu.


.meni {
margin: 0px;
padding: 0px;
font-size: 12px;
color: #eee;
width: 200px;
background: #444;
border: #ccc 1px solid;
list-style: none;
}
.meni li {
font-size: 11px;
line-height:18px;
text-align: center;
line-height:18px;
margin: 2px;
padding: 2px;
padding-left: 3px;
letter-spacing: 2px;
}
.meni li a, .meni li a:visited {
padding:0px;
padding-left: 3px;
color: #fff;
display: block;
text-align: left;
border: #ccc 1px solid;
background: #666;
text-decoration: none;
}
.meni li a:hover {
color: #000;
background: #ccc;
border: #000 1px solid;
}


Ako dodam još malo linkova i sortiram ih po kategorijama, koristeći ovaj kod:


<ul class="meni"><li>moji linkovi</li><li><a href="http://inobscuro.com/">in obscuro</a></li><li><a href="http://chattenoire.com/">chatte noire</a></li><li><a href="http://tutor.blog.hr/">tutor.blog</a></li><li>ostali linkovi</li><li><a href="http://www.google.com/">google</a></li><li><a href="http://www.blog.hr/">blog</a></li><li><a href="http://helpblog.blog.hr/">help blog</a></li></ul>


Promijenite boje i veličine u pixelima, jer naravno ne želite imati baš isti ovakav meni :)



Post je objavljen 16.04.2005. u 18:10 sati.