Jump to content

Javascript menu issues


JeffC
 Share

Recommended Posts

Hello,I am trying to make a menu, with bars that slide out from the side to connect to other menu bars. The issue I have is when I put the mouse over the "Home" button, the bar does not slide out from the side. The code is below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>  <title>Untitled</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel=stylesheet href="style.css" style="text/css" media="screen"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="cufon.js" type="text/javascript"></script><script src="jquery.easing.1.3.js" type="text/javascript"></script><script type="text/javascript">  $(function() {   Cufon.replace('a, span').CSS.ready(function() {	var $menu   = $("#slidingMenu");	var $selected = $menu.find('#active');	var $moving  = $('<li />',{	 className : 'move',	 top  : $selected[0].offsetTop + 'px',	 width  : $selected[0].offsetWidth + 'px'	 });	 $moving.css('top',$selected[0].offsetTop + 'px');	 $('#slidingMenuDesc > div').each(function(i){	  var $this = $(this);	  $this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');	 });		 $menu.bind('mouseleave',function(){	   moveTo($selected,400);		})	   .append($moving)	   .find('li')	   .not('.move')	   .bind('mouseenter',function(){	   var $this = $(this);	   var offsetLeft = $this.offset().left - 20;	   $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400,		   'easeOutExpo');	   moveTo($this,400);		})		.bind('mouseleave',function(){	   var $this = $(this);	   var offsetLeft = $this.offset().left - 20;	   $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');		});;		 function moveTo($elem,speed){	  $moving.stop(true).animate({	   top  : $elem[0].offsetTop + 'px',	   width : $elem[0].offsetWidth + 'px'	  }, speed, 'easeOutExpo');	 }	}) ;   });  </script></head><body>  <div id="menu">      <div id="slidingMenuDesc" class="slidingMenuDesc">	<div><span></span></div>	<div><span></span></div>	<div><span></span></div>	<div><span></span></div>	<div><span></span></div>   </div>    <ul id ="slidingMenu" class="slidingMenu">   <li id="active"><a href="#">Home</a></li>   <li><a href="#">Portfolio</a></li>   <li><a href="#">Services</a></li>   <li><a href="#">News</a></li>   <li><a href="#">About Us</a></li>   <li><a href="#">Contact Us</a></li>  </ul>   </div>  <div id="Welcome">   <h1>Welcome.</h1>   <p></p>  </div></body></html>

There are four files attached, which contain the code for the whole website. If someone could take a look and tell me what is wrong, I would appreciate it.

JQuery menu.zip

Link to comment
Share on other sites

are you checking for errors? have you tried any debugging to see what code gets executed, and what doesn't? i.e. at what point the code stops.

Link to comment
Share on other sites

are you checking for errors? have you tried any debugging to see what code gets executed, and what doesn't? i.e. at what point the code stops.
It isn't that I am checking for errors, it is that there is a piece of it that does not work for some reason, that no matter what I try, I simply cannot fix it.
Link to comment
Share on other sites

It isn't that I am checking for errors, it is that there is a piece of it that does not work for some reason, that no matter what I try, I simply cannot fix it.
I figured as much. to that I will simply reply...
are you checking for errors? have you tried any debugging to see what code gets executed, and what doesn't? i.e. at what point the code stops.
if you don't what that means, then say so. All modern browsers have an error console, and support the console.log method. simple googles searches will yield some information on how to open the error console in your particular browser. then add logging statements to your code to track its execution flow and look for errors. Edited by thescientist
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...