JeffC Posted June 6, 2012 Share Posted June 6, 2012 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 More sharing options...
thescientist Posted June 6, 2012 Share Posted June 6, 2012 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 More sharing options...
JeffC Posted June 6, 2012 Author Share Posted June 6, 2012 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 More sharing options...
Guest So Called Posted June 7, 2012 Share Posted June 7, 2012 Maybe if you checked for errors you could fix it. Link to comment Share on other sites More sharing options...
thescientist Posted June 7, 2012 Share Posted June 7, 2012 (edited) 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 June 7, 2012 by thescientist Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now