|
Poslao: 27 Jan 2009 21:39
|
offline
- babaroga333
- Novi MyCity građanin
- 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
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- 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
|
offline
- Svemirko
- Legendarni građanin
- 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
|
offline
- Rastafarii
- Moderator foruma
- Pridružio: 22 Mar 2006
- Poruke: 3760
- Gde živiš: 127.0.0.1
|
Nije ni IE7 nista bolji, ima on svoje momente  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 
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
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 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
|
offline
- bl00dz3r0
- Elitni građanin
- 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.
http://www.cssplay.co.uk/menus/
Koristio sam vise dropdown/dropline menija sa istoimenog izvora koji rade perfektno u svim browserima (u ie6 uz pomoc conditional comments-a) .
http://www.cssplay.co.uk/menus/pro_drop2
|
|
|
|
|
|
|
Poslao: 28 Jan 2009 15:40
|
offline
- BBBane
- Građanin
- 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 23:20
|
offline
- Svemirko
- Legendarni građanin
- 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
da ce biti muke sa njim naravno da hoce
|
|
|
|
|
|
|
|
|
|
.
