Volite web dizajn?
Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.
Kako jednostavno napraviti aktivni link u CSS-u
Primjer aktivnog linka
Kroz ovaj jednostavan tutorijal naučit ćete napraviti cool css efekt koji ne samo da dobro izgleda već je i koristan. Na gornjoj slici možete vidjeti primjer. Princip je isti kao i u našem primjeru samo što je korištena tab navigacija.
Na većini web stranica link u navigaciji je označen radi lakšeg snalaženja posjetioca. To je osnova usability-a ali zna biti gnjavaža ako na svakoj stranici treba prilagoditi kodove. Srećom, i za to postoji jednostavno rješenje.
Kao prvo treba dodati class svakom linku:
npr: linku Početne stranice dati klasu “home”, linku O nama dati klasu “o-nama”, linku Kontakt dati klasu “kontakt” … itd
Zatim treba dodati class tagu na svakoj stranici i to na način:
Za početnu stranicu: <body id=”home”>
Za stranicu o nama: <body id=”o-nama”>
itd…
Nakon toga treba dodati css, npr:
#home .home, # o-nama .o-nama, #kontakt .kontakt
{
/*ovdje dođu željene postavke aktivnog linka: */
color:#000000;
background: #ffffff;
}
I to je sve. Link aktivne stranice uvijek će biti drugačiji od neaktivnih linkova, a može biti drugačiji i od postavki na a:hover.
Slični sadržaj:
- Kako jednostavno napraviti oble rubove? (Jako slično)
- Postepeno povećanje slika i css img. preloader, kako? (Jako slično)
- Web tipografija (Jako slično)
- CSS sprites - izmjena sličica u linkovima; kako i zašto? (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Jako slično)
4 komentara
Trackbacks & Pingbacks
Ostavite komentar
Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.
pa jeli lakse napraviti jedan id ili jednu class-u i na svakoj stanici koristiti samo taj jedan id za trenutnu stranicu, zasto raditi home .home, # o-nama .o-nama, #kontakt .kontakt kada je dovoljno samo napraviti #trenutna ili .trenutna
Oprosti, ovo je stari post i u međuvremenu su se kodovi zbrčkali pa je bilo nejasno, sada sam ispravila. Dakle, svaki link (Home, O nama, Kontakt…) dobije svoju klasu (.home , .o-nama, .kontakt…)
Body svake stranice dobije svoj id (#Home, #O-nama, #kontakt)
Znači samo kada body id bude isti kao klasa linka znači da je ta stranica aktivna
Npr. samo stranica kontakt.html imati će body id #kontakt i link class .kontakt i u tom slučaju će link kontakt biti druge boje nego ostali (jer tako kaže css)
kužiš?
Kuzim, ali mislim da nema potrebe raditi na body-u nista, jednostavno u css-u napraviti jedanu classu npr .aktivni i urediti ga po svojoj zelji, na stranci kontakt dodamo samo kod linka kontakt class .aktivni i to je to, nema potrebe dirati body
a da, može i tako 🙂