Padajući meni u CSS-u

Kategorija: CSS Delicious Delicious Stumble It!

Napraviti padajući meni (tzv. drop down meni) samo pomoću CSS-a nije toliko teško, barem što se tiče najnovijih brauzera. Problem su starije verzije Internet Explorera, za koje je potrebno dodatno korišćenje JavaScripta da bi takav meni radio. U svakom slučaju, nema potrebe kodirati takav meni od nule, kad već postoje odlična gotova rešenja koja je potrebno prilagoditi konkretnom dizajnu. Ako vam zatreba da napravite padajući meni za neki sajt, predlažem vam da pogledate Free CSS Drop-Down Menu Framework.

Flickr Ultimate Horizontal Drop-down menu

Postoji 20-ak gotovih šablona, tema, možete izabrati varijantu koja vama odgovara i prilagoditi je. Html je potpuno odvojen od CSS-a, kod i fajlovi su odlično organizovani, tako da pravljenje novog menija ne predstavlja nikakav problem, naravno za one koji znaju da rade u HTML i CSS-u. Podrška za sve brauzere se podrazumeva, a JavaScript se koristi samo za IE 6 i starije verzije (može se koristiti uz jQuery ili Scriptaculous, ako ih već koristite na sajtu).

Ultimate Horizontal Drop-down menu

Osim Free CSS Drop-Down Menu Framework-a, postoje i druga rešenja. Na primer, postoji i način da se napravi CSS padajući meni bez korišćenja JavaScripta, možete pogledati primere na http://www.cssplay.co.uk/menus/. Ovaj meni http://www.cssplay.co.uk/menus/pro_drop2 ne koristi JS, a radi u svim brauzerima. Međutim, postoji i druga strana. Ako pogledate izvorni kod, videćete da je HTML prepun uslovnih komentara za IE, a koliko vidim, ovaj meni ne prolazi html validaciju. Zbog toga, meni lično se više dopada prva varijanta.

Potencijalno povezani tekstovi:

CSS za početnike – top 5 web sajtova za učenje css-a

Preuzmite besplatno knjigu The Art and Science of CSS

Intervju sa CSS ekspertom Eric Meyerom i njegov savet kako naučiti CSS

Ne koristite @import za ubacivanje CSS stilova u HTML dokument

Sve što ste znali o CSS-u (ni)je pogrešno

CSS pozicioniranje

Komentari

Ostavite komentar
  1. * obavezno
  2. * obavezno

Napomena: morate prvo kliknuti na Pregled komentara, pa nakon učitavanja stranice na Pošalji komentar. Ovo je način zaštite od automatski generisanih komentara.