Textpattern CMS

#1 2009-12-20 10:42:29

Gallex

Member

Registered: 2006-10-08

Posts: 1,304

drop-down menu and ie

hi css gurus,

created drop-down menu (top right) using this tutorial
working well in opera, firefox, but still didn’t get to work in ie 6.0

as section_list don’t have id attribute, had to use class attribute in section_list (my main menu) and changed the javascript from

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

to

startList = function() {
if (document.all&&document.getElementByClass) {
navRoot = document.getElementByClass("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

p.s.

not using this hack (cause it's not needed in my horizontal menu in my mind)

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

everything else should be like in this tutorial.
is it wrong in a javascript i changed little bit?

#2 2009-12-20 13:25:17

Gallex

Member

Registered: 2006-10-08

Posts: 1,304

Re: drop-down menu and ie

i decided to try this more accessible solution

but i need to change id=“nav” to class=“nav” in this javascript because my horizontal menu uses class attribute instead of id

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

could anybody do it for me? i’m afraid i might louse up it myself

Last edited by Gallex (2009-12-20 13:45:13)

#3 2009-12-20 13:57:31

Gocom

Developer Emeritus

From: Helsinki, Finland

Registered: 2006-07-14

Posts: 4,533

Website

Re: drop-down menu and ie

You are already using jQuery. And where I stand, you are just trying to fix IE6’s hover issue. In such situation you don’t need sooo much code. Therefor, one liner is enough:

$(document).ready(function(){
$("#main-menu li").hover(
  	function () {
    	$(this).addClass("hover");
        },
	function () {
        $(this).removeClass("hover");
        }
);
});

Which adds the class hover to lis. With that you can use the hover class as a :hover replacement for IE.

li.hover,
li:hover {
	[...]

And such. If jQuery’s hover() function still bugs (it used to), you can use mouseover and mouseout instead ($("#main-menu li").mouseout / $("#main-menu li").mouseover). Like for example something like:

$("#main-menu li").mouseover(function(){
      $(this).addClass("hover");
}).mouseout(function(){
      $(this).removeClass("hover");
});

Last edited by Gocom (2009-12-20 14:14:37)

---

Rah | GitHub

#4 2009-12-21 13:31:15

Gallex

Member

Registered: 2006-10-08

Posts: 1,304

Re: drop-down menu and ie

Gocom wrote:

You are already using jQuery. And where I stand, you are just trying to fix IE6’s hover issue. In such situation you don’t need sooo much code. Therefor, one liner is enough:

$(document).ready(function(){
$("#main-menu li").hover(
.....

brilliant! thank’s a lot again jukka.

and if i want to use it in 2 different menus, how i separate them, with commas?

$(document).ready(function(){
$("#main-menu li", "#side-menu li").hover(
....

like this?

#5 2009-12-21 18:26:24

Gocom

Developer Emeritus

From: Helsinki, Finland

Registered: 2006-07-14

Posts: 4,533

Website

Re: drop-down menu and ie

Gallex wrote:

like this?

"#main-menu li, #side-menu li"

Bookmark jQuery docs

---

Rah | GitHub