CSS horizontalni dropdown izbornik sa slikom kategorije

Svatko tko je stvarao drop-down izbornike jako dobro je upoznat sa težinom, jer za dobar izbornik je potrebno kombinirati HTML, CSS, JavaScript. Što nije nimalo lak posao, pogotovo kad je potrebno osigurati ispravan prikaz u svim Internet preglednicima. Koristeći samo HTML i CSS moguće je napraviti vizualno lijepe drop-down izbornike koji rade u velikoj većini preglednika uključujući i Internet Explorer. Ono najvažnije je da nije potrebno uložiti velik trud u pisanje JavaSkripti ili dodatno zakomplicirati HTML strukturu.

Stvaranje izbornika

Prvi i najvažniji dio stvaranja ovog izbornika je HTML struktura. Najbolji način je uz pomoć unordered (neuređene) liste, to su vam zapravo HTML tagovi za stvaranje svima nam dobro znanih buleta. Primjer HTML koda za ovaj izbornik


Kao što vidite svaki pod nivo je smješten između novih <ul>…</ul> tagova. Kako bi sam drop-down izbornik radio u IE6 prije otvaranja nove pod liste <ul> dodajete <!–[if lte IE 6]><table><tr><td><![endif]–> isto tako nakon zatvaranja </ul> taga zatvarate prethodno otvorene tagove tablice u kojoj je sadržan pod nivo s <!–[if lte IE 6]></td></tr></table></a><![endif]–>.

Isto tako na kraju svakog elementa liste koji ima pod nivo dodajete <!–[if IE 7]><!–></a><!–<![endif]–> kako bi izbornik radio u IE 7.

Ono što zapravo radimo uz pomoć tih fixeva je da Internet Exploreru 6, odnosno IE 7 govorimo da koriste tagove unutar komentara. Jer poznato je da Microsof ima svoju filozofiju oko čitanja tagova, odnosno standarda za čitanje istih.

Svaki element prvog nivoa ima sličicu s lijeve strane koju predstavlja recimo <li class=”onama”>, dok u kombinaciji sa pod <li class=”pod onama”> daje sličicu s desne strane koja označava podizbornik. Slike s lijeve strane se nalaze u CSS-u definirane pod .izbornik li.(naziv CSS klase) u primjeru je korišten onama.

.izbornik li.onama {
background-image: url(Buddy.png);
background-repeat: no-repeat;
background-position: 10px center;
}

Isto tako ovisno o broju elemenata izbornika u prvom nivou morate povećati visinu (height: 180px) i to u slijedećim CSS klasama

.izbornik { height:210px }

.izbornik li { height:210px }

Sve ostalo možete vidjeti u primjeru, a sam kod ako zavirite u source stranice :-) Ikonice korištene za izbornik možete pronaći pod Besplatne ikone – više od 2500 ikonica

Demo | [download id=”1″ format=”1″]

1 Comment

  1. cipek says:

    lijepa stranica i design

Leave a comment