jquery styling is blocking href

[ralphonzo]

I've scripted a menu that works fine until the stylised jquery rumbles in to town, whereupon the links seem to be covered.

Here's the jQuery menu with a click option that I tried that didn't work:

$(function() {
	$('#m1').mouseover(function(){
		$("#box").animate({left: '0'}, 300);
	});
	$('#m2').mouseover(function(){
		$("#box").animate({left: '120'}, 300);
	});
	$('#m3').mouseover(function(){
		$("#box").animate({left: '248'}, 300);
	});
	$('#m4').mouseover(function(){
		$("#box").animate({left: '362'}, 300);
	});
	$('#m5').mouseover(function(){
		$("#box").animate({left: '476'}, 300);
	});
});
$("li").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Here's the CSS for the menu and the overlaying identifyer:

#menu {
	float:right;
	/*padding: 40px 0 0 0;*/
	margin: -120px 0px 0px 0px;
	position: relative;
	margin-left: 421px;
}

#menu a {
	color:#000000;
	padding:0 0 0 50px;
	font-size:18px;
	z-index: 1;
}

#menu ul {
	padding:0px;
	margin:0px;
}

#menu ul li {
	display:inline;
	padding:0px;
	margin:0px;
}

#menu li:hover a {
	color:#F05B00;
}

#box{
		background-image:url(images/eazyspace_menu.png);
		width: 120px;
		height: 97px;
		margin: -62px 0px 0px 10px;
		position: absolute;
		z-index: 10;
	}
#box a{
	pointer: hand;
	
}

And here's the HTML:

<div id="menu" style="border: 0px solid #3333CC;">
                <ul>
                	<li><a href="index.html" id="m1">home</a></li>
                	<li><a href="workshops.html" id="m2">workshops</a></li>
                	<li><a href="storage.html" id="m3">storage</a></li>
                	<li><a href="projects.html" id="m4">projects</a></li>
                	<li><a href="contact.php" id="m5">contact</a></li>
				</ul>
            	<div id="box"></div>
            </div>

I've tried the onclick method, but as even the textual link doesn't work, it doesn't either.

I'm stumped!

 

[jpadie]

assuming that you put the jquery code at the top of the page in the head element, you have put the click event binder outside of the $(document).ready() structure, so it will bind on all the li elements in the DOM at the time that it is first parsed. i.e. none.

put the click binder back into the ready() structure or after your li elements are in the dom or change the click to a live binding (now deprecated).

 

[ralphonzo]

Still not getting any response from the click on the "li", not even the "hello" alert.

$(function() {
	$('#m1').mouseover(function(){
		$("#box").animate({left: '0'}, 300);
	});
	$('#m2').mouseover(function(){
		$("#box").animate({left: '120'}, 300);
	});
	$('#m3').mouseover(function(){
		$("#box").animate({left: '248'}, 300);
	});
	$('#m4').mouseover(function(){
		$("#box").animate({left: '362'}, 300);
	});
	$('#m5').mouseover(function(){
		$("#box").animate({left: '476'}, 300);
	});
	$("#menu li").click(function(){
		alert("hello");
     	window.location=$(this).find("a").attr("href");
    	return false; 
	});
});

#menu {
	float:right;
	/*padding: 40px 0 0 0;*/
	margin: -120px 0px 0px 0px;
	position: relative;
	margin-left: 421px;
}

#menu a {
	color:#000000;
	padding:0 0 0 50px;
	font-size:18px;
	z-index: 1;
}

#menu ul {
	padding:0px;
	margin:0px;
}

#menu ul li {
	display:inline;
	padding:0px;
	margin:0px;
}

#menu li {
	width: 200px;
}

#menu li a {
	color:#F05B00;
}

Tried to add a "display: block;" to the "#menu li a" element, but it took it away from inline and other bizarrenesses!

 

[ClulessChris]

how about:

$('#lnkMenu li').hover(
    function(){
       &('ul',this).stop(true, true).slideDown(250);
    ),
       &('ul',this).stop(true,true)slideUp(250);
    }
);

HTML:

<ul id='lnkMenu'>
    <li>Header 1</li>
       <ul>menu 1 option 1</ul>
       <ul>menu 1 option 2</ul>
       <ul>menu 1 option 3</ul>
    <li>Header 2</li>
       <ul>menu 2 option 1</ul>
    <li>Header 3</li>
       <ul>menu 3 option 1</ul>
<ul>

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[ClulessChris]

Sorry should have said that the CSS will then set:
#lnkMenu ul { display: none }

and other styles as you wish

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[jpadie]

works ok for me. I automatically added a stop() command, but even without it, the code seems to work ok.

 

[ralphonzo]

OK, I got it working. I cheated I'm afraid!

var locTarget = "index.html";
	//menu
	$('#m1').mouseover(function(){
		$("#box").animate({left: '0'}, 300);
		locTarget = "index.html";
	});
	$('#m2').mouseover(function(){
		$("#box").animate({left: '120'}, 300);
		locTarget = "workshops.html";
	});
	$('#m3').mouseover(function(){
		$("#box").animate({left: '248'}, 300);
		locTarget = "storage.html";
	});
	$('#m4').mouseover(function(){
		$("#box").animate({left: '362'}, 300);
		locTarget = "projects.html";
	});
	$('#m5').mouseover(function(){
		$("#box").animate({left: '476'}, 300);
		locTarget = "contact.php";
	});
	$("#box").click(function(){
		window.location.href = locTarget;
    	return false; 
	});

How inelegant is that?