CSS izbornik

Dodavanje dinamičkog efekta

Iako su linkovi gotovi i funkcionalni, nedostaje im nešto što u današnje vrijeme uobičajeno susrećemo kod većine izbornika. Pomicanjem pokazivača miša, korisnici su navikli da im nekakav efekt označi iznad kojeg linka se nalazi pokazivač. Takvi efekti, osim uljepšavanja, imaju i ulogu olakšavanja orijentacije i snalaženja među linkovima.

Dinamičke efekte postižemo dodavanjem pseudoklasa u stil. Upotrijebit ćemo pseudoklasu hover, a mijenjat ćemo boju lijeve granice elementa.

ul, li {
list-style: none;
margin: 0px;
padding: 0px;
}

ul li a, ul li a:visited {
display: block;
text-decoration: none;
margin: 1px;
padding: 2px 0px 2px 5px;
width: 120px;
color: #336;
font-weight: bold;
border-left: 6px solid #336;
}

/* dinamički efekt za izbornik */
ul li a:hover {
text-decoration: none;
border-left-color: #ccf;
}

ul ul li a, ul ul li a:visited {
display: block;
text-decoration: none;
margin: 1px 1px 1px 15px;
padding: 2px 0px 2px 5px;
width: 108px;
color: #336;
font-weight: bold;
border-left: 4px solid #336;
}
/* dinamički efekt za podizbornik */
ul ul li a:hover {
text-decoration: none;
border-left-color: #ccf;
}

Dodavanjem ovih klasa dobili smo konačan prikaz:

Za vježbu stavite kao dinamički efekt promjenu boje pozadine umjesto promjene boje ruba. Dodatno, pokušajte istovremeno napraviti obje promjene.

Na kraju još trebate umjesto linkova koji vode na početak iste stranice u HTML dokumentu postaviti linkove koji vode na odgovarajuće stranice.

Accessibility

Reset All

Boja pozadine

Font

Veličina fonta

Boja teksta

Font Kerning

Image Visibility

Letter Spacing

Line Height

1.2