Web dizajn i razvoj glavne su teme ovog bloga. Prva stanica svakog web ekstremista gladnog informacija. Želite znanje? Izvolite...
Kako jednostavno napraviti aktivni link u CSS-u
Jedan redak Css-a, jedna riječ Html-a… ma ništa lakše !
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:
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.
Ako članak još nije objavljen vi možete biti prvi!
Pogledajte i ove članke sličnog sadržaja
- 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)
- Zlatni omjer u modernom CSS-u (Jako slično)
Imate nešto za reći? Ostavite komentar...
Kažite nam što mislite, a ako želite vidjeti svoju sliku u komentarima nabavite gravatar!
