user4fun Posted August 22, 2010 Share Posted August 22, 2010 I took this example from the internet and itis not working. Can you tell me why? (I ahve included my html section as well <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">$(document).ready(function() { $("ul.blockeasing li.main").mouseover(function(){ //When mouse over ... //Following event is applied to the subnav itself (making height of subnav 60px) $(this).find('.subnav').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutBounce'}) }); $("ul.blockeasing li.main").mouseout(function(){ //When mouse out ... //Following event is applied to the subnav itself (making height of subnav 0px) $(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutBounce'}) }); //menu item background color animation $("li").hover(function() { $(this).stop().animate({ backgroundColor: "#C13D93"}, 600);}, function() { $(this).stop().animate({ backgroundColor: "#333333" }, 600); }); ); </script><link rel="stylesheet" type="text/css" href="vcso_style.css" /></head><body><ul class="blockeasing"> <li class="main"><a href="#">About Us</a> <ul class="subnav"> <li><a href="#">Overview</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Why Us</a></li> </ul> </li> <li class="main"><a href="#">Products</a> <ul class="subnav"> <li><a href="#">Main Product</a></li> <li><a href="#">DSL Lines</a></li> <li><a href="#">DialUps</a></li> <li><a href="#">Main Stream</a></li> </ul> </li> <li class="main"><a href="#">Contact Us</a> <ul class="subnav"> <li><a href="#">Twitter</a></li> <li><a href="#">Email</a></li> <li><a href="#">LinkedIn</a></li> <li><a href="#">Facebook</a></li> </ul> </li> </ul> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2010 Share Posted August 22, 2010 you are missing a link to a file, and you have error at end of code (missing culy bracket) <!-- include jQuery Library From Google Code --><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script><!-- include jQuery UI From Google Code--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function() { $("ul.blockeasing li.main").mouseover(function(){ //When mouse over ... //Following event is applied to the subnav itself (making height of subnav 60px) $(this).find('.subnav').stop().animate({height: '60px', opacity:'1'},{queue:false, duration:1500, easing: 'easeOutBounce'}) }); $("ul.blockeasing li.main").mouseout(function(){ //When mouse out ... //Following event is applied to the subnav itself (making height of subnav 0px) $(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutBounce'}) }); //menu item background color animation $("li").hover(function() { $(this).stop().animate({ backgroundColor: "#C13D93"}, 600);}, function() { $(this).stop().animate({ backgroundColor: "#333333" }, 600); });});/*--*//*]]>*/</script> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2010 Share Posted August 22, 2010 those links are to outdated jquery files, which give errors, even though the menus still work, here are the updates which show no errors.<!-- include jQuery Library From Google Code --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><!-- include jQuery UI From Google Code--><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.