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:
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.
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:
- moji linkovi
- in obscuro
- chatte noire
- tutor.blog
- ostali linkovi
- blog
- help blog
Promijenite boje i veličine u pixelima, jer naravno ne želite imati baš isti ovakav meni :)