MyCity » Web dizajn / HTML » padajuci meni sa css-om [drop down menu]

padajuci meni sa css-om [drop down menu]

Napisano na dan: 27.1.2009
1

padajuci meni sa css-om [drop down menu]
Sledeća strana Pagination

Idi na vrh

Poslao: 27 Jan 2009 21:39
Idi na vrh
offline
  • Pridružio: 15 Okt 2008
  • Poruke: 10
  • Gde živiš: VI quadrant

Napravio sam drop down menu uz pomoc Sothink software-a i prilicno sam zadovoljan uradenim kao i programom. Eh sad, ...

Naleteo sam po forumima da mnogi izbegavaju resenja sa Jawa script-ama, posto sam pocetnik ne znam zasto su im u tome "velike oci" ali sam zbog sebe resio da naucim , te vas molim da, ako ma voljnih, da mi prikazete najednostavniji html primer gnezdenja drop down menu-ija sa listama i prateci css file.

Na netu sam trazio i pronasao niz primera koji maltene od reda nisu radili ili su radili povrsno tj. sa greskama te sam zato i zbunjen ....



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
Poslao: 28 Jan 2009 00:39
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3763
  • Gde živiš: 127.0.0.1

Zasto ne raditi nesto tako vazno poput navigacije uz pomoc JavaScripta? Jednostavno - zato sto ne smes da uzmes zdravo za gotovo da svi posetioci drze podrsku za JS ukljucenom. Odnosno, nema JS - nema navigacije = veci deo sajta je "odsecen", tj nepristupacan.

Napraviti 100% CSS drop down meni je nemoguce bez koriscenja JS-a, a da radi u svim browserima. Glavni problem pravi IE6 jer ne prepoznaje pseudo-element :hover na bilo kom tagu osim <a>.

Resenje je delimicno jednostavno: napravi se css drop down koji radi u ostalim browserima, a za IE6 se dodaje JS u formi kondicionalnih komentara koje cita samo IE (ostali browseri ih smatraju za obicne komentare i ne reaguju), tako da i korisnici koji koriste IE6 mogu da vide navigaciju.

Sa druge strane, resenja koja dobijes koriscenjem programa poput Sothink DHTML menu builder i slicnih nisu bas savrsena, jer ih pokrece poveliki JS, potpuno bespotrebno, jer sa mnogo manje JS-a mozes da napravis potpuno isti efekat.

Videcu ja da iskopam negde moj drop down koji je 99% CSS (JS je samo za IE6) i radi bez problema, pa cu da ga okacim u vidu tutoriala, sa sve komentarima.



Poslao: 28 Jan 2009 01:41
Idi na vrh
offline
  • Pridružio: 24 Mar 2004
  • Poruke: 3962
  • Gde živiš: Zemun

Jos malo da izguramo, i za godinu dana do dve ce moci i bez JS-a (nadam se da ce IE6 zauvek otici sa scene u sirem obliku)
IE7 izvaljuje :hover na liste tako da nece treba JS.

Mada iskreno ...90% korisnika sigurno drzi js ukljuceno (sada je on potreban iz zbog ajax-a), ali meni je ako nista drugo bar glupo toliko koda kada moze to lepo u css-u, samo da je to jos i IE umeo da svari

Poslao: 28 Jan 2009 02:46
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3763
  • Gde živiš: 127.0.0.1

Nije ni IE7 nista bolji, ima on svoje momente Smile npr CSS opacity, koji IE7 uopste ne gleda, ne gleda cak ni onaj IE specific (i apsolutno nestandardan) CSS property koji sluzi za isto to (providnost nekog objekta / taga), tako da cemo sa IE jos dugo da imamo muku (MS se za sada svojski trudi).

Ja se iskreno nadam da ce IE u svim verzijama nestati sa scene u nekom narednom periodu LOL

Da se vratim na temu... procenat od (recimo) 10% posetilaca koji JS drzi iskljucenim nije alarmantan... ako sajt ima do stotinak poseta dnevno. Za posecenije sajtove, to je ozbiljan nedostatak. Evo ti i dobar primer: probaj da se ulogujes na ebanking bilo koje banke iz FF, a da ne koristis IEtab ekstenziju (ili njima slicnu). A onda zamisli da IE nemas na sistemu, niti mozes da ga instaliras Smile

Ja sam pristalica toga da sve sto moze da se uradi bez JS, da se tako i radi. Em je kod pregledniji (neretko ga ima i manje), em ne zavisis od toga da li je JS ukljucen ili ne, em JS ima neke jako browser specific nacine komuniciranja... Tamo gde ne postoji druga opcija, tek onda JS, uz sto bolju adaptaciju na iskljucen JS... E sad, ako neko koristi IE6, uz iskljucen JS...

Elem, evo dropdown CSS menija. Prvo, u <head> deo iskopirati sledeci kod (JS za slucaj da posetilac koristi IE6):

<!--[if lt IE 7.]> <script type="text/JavaScript"> navHover = function() {    var lis = document.getElementById("navmenu").getElementsByTagName("LI");    for (var i=0; i<lis.length; i++) {       lis[i].onmouseover=function() {          this.className+="-iehover";       }       lis[i].onmouseout=function() {          this.className=this.className.replace(new RegExp("-iehover\\b"), "");       }    } } if (window.attachEvent) window.attachEvent("onload", navHover); </script> <![endif]-->

Ovaj kod ce svi browseri osim IE ignorisati, jer je postavljen u formi komentara. IE ce, ukoliko je verzija manja od 7.0 procitati i ovaj kod i izvrsiti ga, a ako je verzija 7.0 ili novija ignorisati ga.

Dalje, tamo gde treba da bude dropdown jednostavno iskopirati ovo:

<ul id="navmenu">    <li class="mainLNK"><div>LINK 1</div>       <ul>          <li><a href="#" class="submenu">Podlink 1 1</a></li>          <li><a href="#" class="submenu">Podlink 1 2</a></li>          <li><a href="#" class="submenu">Podlink 1 3</a></li>       </ul>    </li>    <li class="mainLNK"><div>LINK 2</div>       <ul>          <li><a href="#" class="submenu">Podlink 2 1</a></li>          <li><a href="#" class="submenu">Podlink 2 2</a></li>          <li><a href="#" class="submenu">Podlink 2 3</a></li>       </ul>    </li>    <li class="mainLNK"><div>LINK 3</div>       <ul>          <li><a href="#" class="submenu">Podlink 3 1</a></li>          <li><a href="#" class="submenu">Podlink 3 2</a></li>          <li><a href="#" class="submenu">Podlink 3 3</a></li>       </ul>    </li> </ul>

i tako dalje, koliko god je podmenija potrebno.

I onda ostaje jos CSS, koji izgleda ovako:

ul, li {    margin: 0px;    padding: 0px; } #navmenu {    list-style-type: none; } #navmenu li, .mainLNK, .mainLNK-iehover {    float: left;    display: inline; } .mainLNK div, .mainLNK-iehover div {    padding-left: 5px;    padding-right: 5px;    display: block; } .mainLNK ul {    display: none;    background-color: #fff;    list-style-type: none;    margin-left: 5px; } .mainLNK-iehover ul {    background-color: #fff;    position: absolute;    float: left;    list-style-type: none;    margin-left: 5px; } #navmenu li ul li {    display: block;    float: none; } #navmenu li:hover ul {    display: block;    position: absolute; } a.submenu {    background-color: #fff;    color: #898989;    text-decoration: none;    display: block;    height: 15px;    width: 100px; } a.submenu:hover {    background-color: #003366;    color: #fff; }

I to je to Smile CSS se moze sredjivati po zelji, uz zadrzavanje ovih property-ja koji su navedeni. Pozeljno je promeniti sirinu za a.submenu, jer je navedena sirina (100px) stavljena za primer.

Poslao: 28 Jan 2009 13:31
Idi na vrh
offline
  • Pridružio: 05 Jun 2003
  • Poruke: 2075
  • Gde živiš: MaYur CitY

Citat:
Napraviti 100% CSS drop down meni je nemoguce bez koriscenja JS-a, a da radi u svim browserima. Glavni problem pravi IE6 jer ne prepoznaje pseudo-element :hover na bilo kom tagu osim <a>.


Apsolutno netacno.
[Link mogu videti samo ulogovani korisnici]

Koristio sam vise dropdown/dropline menija sa istoimenog izvora koji rade perfektno u svim browserima (u ie6 uz pomoc conditional comments-a) .

[Link mogu videti samo ulogovani korisnici]

Poslao: 28 Jan 2009 15:40
Idi na vrh
offline
  • Pridružio: 25 Nov 2007
  • Poruke: 187

Može se napraviti bez JS i uz pomoć div tagova.Tako da se slažem da se može napraviti drop down bez JS.Naravno postoji i mnogo više načina...
A inače ovo je tech forum,znači tu se nalazi puno onih koji znaju dosta na kompu...pa je svejedno 97.19% JS Enabled korisnika...
Ja imam ukinuto,ali ako hoću nešto da vidim,uključim i vidim..Neverujem da ima neko ko je isključio JS,a da nebude znao da vidi tvoj sajt kako treba,tako da ja ne bi ni brinuo na tvom mestu,ali Sothink pravi malo prevelike fajlove...Bolje probaj nešto sam da iskombinuješ...

Poslao: 28 Jan 2009 19:24
Idi na vrh
offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3763
  • Gde živiš: 127.0.0.1

U pravu si bl00dz3r0, my bad Smile a kad sam pogledao source sa linka koji si dao, setio sam se da sam to vec video kad sam trazio full CSS dropdown, ali da sam to resenje odbacio zbog previse komentara i dodatnog koda samo za IE6 Smile

Poslao: 28 Jan 2009 23:20
Idi na vrh
offline
  • Pridružio: 24 Mar 2004
  • Poruke: 3962
  • Gde živiš: Zemun

@Rastafarii
ma ja sam se manje vise samo osvrnuo na :hover kod ie7 i da on to izvaljuje kada je upitanju lista Smile

da ce biti muke sa njim naravno da hoce Smile

Poslao: 29 Jan 2009 01:09
Idi na vrh
offline
  • igor86  Male
  • Stručni saradnik
    Web programiranje
  • Pridružio: 24 Maj 2006
  • Poruke: 1633

Ma kontati js enabled 100% i udri Wink.

Poslao: 29 Jan 2009 13:36
Idi na vrh
offline
  • Pridružio: 05 Jun 2003
  • Poruke: 2075
  • Gde živiš: MaYur CitY

Rastafarii ::U pravu si bl00dz3r0, my bad Smile a kad sam pogledao source sa linka koji si dao, setio sam se da sam to vec video kad sam trazio full CSS dropdown, ali da sam to resenje odbacio zbog previse komentara i dodatnog koda samo za IE6 Smile

Pa sad koliko js koda imas? Smile ovi komentari su prilicno zanemarljivi.
Bitno je da sljaka bez problema Smile

MyCity » Web dizajn / HTML » padajuci meni sa css-om [drop down menu]

Ko je trenutno na forumu
 

Ukupno su 3127 korisnika na forumu :: 69 registrovanih, 11 sakrivenih i 3047 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 20624 - dana 04 Apr 2026 04:18

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: Andrija357, Apok, Ares12356, ArmFPGA, AudioTehnica, awathorn, blatruc82, Bobrock1, bojankrstc, branko87, C-Gun, Car89, CHARLIE JA., Ciri1994, CrveniSolaris, dejan1972, Demi87, draganca, Draganeli, dusan.l, Dzambas, ElGenius, Elvin, FOX, g_g, galerija, Grebostrek, GrobarRomanticar, Hitri, Jager715510, Jaz, jodzula, Jozo74, kretino, lacko, ljubsz, M74AB3, Makarid, Marky, mačković, MB120mm, mercedesamg, mikrimaus, milan.vukovic, milenko crazy north, Milometer, Mis uz pusku, Muki 123, Niki2024, nixos, Nobunaga, nobutado, OKT, Oscar2, Pantaaa, pavle_pzs, samipag822, ShtagodShtagod, Smiljkovich, stegonosa, t84dar, taackee, VBoss, vladaa012, vukdra, x011, Zec, Zmaj Tolak, 79693