Recreating Roll Out Menu - 1st time jQuery user

JavaScript
1

I’m using jQuery for the 1st time and trying to recreate the effect which is used on the menu on the following site: www.graphicadesign.com

I have managed to get the basics working and have uploaded to a temp address which is here - at the moment i am just trying to get it working for the ‘company’ menu.

With this being my 1st attempt with jQuery i’ve already run into a number of issues which i’m not sure how to go about solving!

  • currently, in my version, hovering over the sub menu items does not keep the sub menu ‘rolled out’ only hovering over the main ‘company’ link does so? how would i make it so that the additional links of the sub menu also keep the rolled out state active?

  • when the sub menu is in the rolled out state and a user rolls off the ‘company’ link and then rolls back onto it the 2nd rollover is stored up until the sub menu rolls back in and then it executes the roll out function again? What i want to achieve is that when a user rolls off and back onto the links whilst they are in a rolled out state it just keeps them rolled out as opposed to looping the cycle again.

Can anyone offer me some advice as to how i should be approaching the above issues?

At the moment this is what i have as my code:


<script src="Javascript/jquery-1.4.1.min.js"></script>
<script>
   // When the page is ready
   $(document).ready(function(){
   
	$("#Company").hover(function(event){
       	$("#SubNavCompany a").animate({marginLeft: 0}, 200);
			
	}, function() {
	$("#SubNavCompany a").delay(2000).animate({marginLeft: -150}, 600);
     });
	});
 </script>

and the HTML


<body>
<div id="PageHolder" class="container_12 ">
	
    <div id="MainNav" class="grid_9">
    	<a href="" id="Home">home</a>
        <a href="" id="Company">company</a>
        <a href="" id="Services">services</a>
        <a href="" id="Portfolio">portfolio</a>
        <a href="" id="Contact">contact</a>
    </div>
    
    <div id="SubNavCompany">
    	<a href="" id="About">about us</a>
        <a href="" id="Location">location</a>
        <a href="" id="CaseStudies">case studies</a>
    </div>
</div>

</body>

Thanks, James

2

You don’t want to use hover() here. You only want to use mouseenter().

The logic you want to use for your event handler could be explained like


if (the submenu for this category item is NOT expanded) {
    if (there is a submenu open) {
        collapse the currently open submenu
    }
    expand the submenu for the current category item
}

As far as how to keep track of what submenu is expanded, you could use addClass()/removeClass() to the category item elements. You could also just use a variable to store the id of the open element.

If you need more help with the implementation specifics, let me know.

3

crmalibu, thanks for the reply… i’ve actually managed to get it working but i have a feeling that i’ve probably implemented it in an un-efficient manner? I came across a post about using .stop(true, true) which really seemed to get me moving forward!

what i’ve ended up with is:


<script src="Javascript/jquery-1.4.1.min.js"></script>
<script>
   // When the page is ready
   $(document).ready(function(){
   
	   $("#Company, #SubNavCompany a").hover(function(event){
       		        $("#SubNavCompany a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			}, function() {
			$("#SubNavCompany a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		  $("#Services, #SubNavServices a").hover(function(event){
       		        $("#SubNavServices a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			}, function() {
			$("#SubNavServices a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Portfolio, #SubNavPortfolio a").hover(function(event){
       		        $("#SubNavPortfolio a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			}, function() {
			$("#SubNavPortfolio a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Contact, #SubNavContact a").hover(function(event){
       		        $("#SubNavContact a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			}, function() {
			$("#SubNavContact a").delay(3000).animate({marginLeft: -150}, 600);
		 });
	});
 </script>

and html as


<body>
<div id="PageHolder" class="container_12 ">
	
    <div id="MainNav" class="grid_9">
      <a href="" id="Home">home</a>
      <a href="" id="Company">company</a>
      <a href="" id="Services">services</a>
      <a href="" id="Portfolio">portfolio</a>
      <a href="" id="Contact">contact</a>
  </div>
    
  <div id="SubNavCompany">
    <a href="" id="About">about us</a>
    <a href="" id="Location">location</a>
    <a href="" id="CaseStudies">case studies</a>
  </div>
    
  <div id="SubNavServices">
    <a href="" id="Design">design</a>
    <a href="" id="Signs">signs</a>
    <a href="" id="Display">display</a>
    <a href="" id="Vehicles">vehicles</a>
  </div>
  
  <div id="SubNavPortfolio">
   	<a href="" id="Gallery">gallery</a>
  </div>
  
  <div id="SubNavContact">
   	<a href="" id="Info">info</a>
    <a href="" id="EnquiryForm">enquiry form</a>
  </div>
</div>

</body>

the result of which can be seen at here

I was originally thinking i would need to use more logic as you have suggested but was just playing about and got it working, i’d be very interested to see what you would recommend as a more appropriate manner of implementation - as i say this my 1st attempt at jQuery so not too sure about good and bad practices.

Thanks, James

4

actually with a bit more playing i have had to change the z-index with jQuery also as somew of the sub menu’s overlapped each other it was making some links unusable so my jQuery now looks like:


<script src="Javascript/jquery-1.4.1.min.js"></script>
<script>
   // When the page is ready
   $(document).ready(function(){
   
	   $("#Company, #SubNavCompany a").hover(function(event){
       		        $("#SubNavCompany a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavCompany").css({zIndex: 10}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavCompany a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		  $("#Services, #SubNavServices a").hover(function(event){
       		        $("#SubNavServices a").stop(true, true).animate({marginLeft: 0}, 200);
			$("#SubNavServices").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavServices a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Portfolio, #SubNavPortfolio a").hover(function(event){
       		        $("#SubNavPortfolio a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
			$("#SubNavPortfolio").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavContact a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavContact").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavPortfolio a").delay(3000).animate({marginLeft: -150}, 600);
		 });
		 
		 
		 $("#Contact, #SubNavContact a").hover(function(event){
       		        $("#SubNavContact a").stop(true, true).animate({marginLeft: 0, zIndex: 10}, 200);
			$("#SubNavContact").css({zIndex: 10}, 0);
			$("#SubNavCompany a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavCompany").css({zIndex: 1}, 0);
			$("#SubNavServices a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavServices").css({zIndex: 1}, 0);
			$("#SubNavPortfolio a").stop().animate({marginLeft: -150}, 600);
			$("#SubNavPortfolio").css({zIndex: 1}, 0);
			}, function() {
			$("#SubNavContact a").delay(3000).animate({marginLeft: -150}, 600);
		 });
	});
 </script>

The html is still the same.