SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Simple Jquery slide down, add active class?

    I have the following slide down menu.

    Bar, click bar menu slides down below...

    Code JavaScript:
     
    $(document).ready(function() {
     
    	$(".dropdown dt a").click(function() {
    		$(".dropdown dd #panel").slideDown(150);		
    	});
     
    	$(".dropdown dd #panel").click(function() {
    		$(".dropdown dd #panel").slideUp(150);
    	});
     
    	var myTimeout = null; 
    	$(".dropdown").bind("mouseleave", function() { 
    		myTimeout = window.setTimeout(function() { 
    			 $(".dropdown dd #panel").slideUp(150); 
    		}, 1000);  // <-- 1000ms 
    	}); 
     
    	$(".dropdown dd #panel").bind("mouseenter",function() { 
    		window.clearTimeout(myTimeout); 
    	}); 
     
     
    });

    Can someone help me out in adding an active class to the .dropdown dt a

    So when you hover over the bar at the top (.dropdown dt a) it changes colour, but when you leave to go into the panel that has slid down it goes back to its normal state not hover state, because your not over it anymore.

    Is it possible add an active class to .dropdown dt a whilst your in the slide down panel .dropdown dd #panel, so i can style it the same colour as the roll over giving the appearance its all connected...?

    I've seen it done with a few drop down menus but cannot figure it out...

    Thanks for any help

  2. #2
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've given it a go myself not really knowing what am doing and it kind of works..
    Code JavaScript:
    $(document).ready(function() {
     
    	$(".dropdown dt a").click(function() {
    		$(".dropdown dd #panel").slideDown(150);
    		$('.dropdown dt a').addClass('active');		
    	});
     
    	$(".dropdown dd #panel a").click(function() {
    		$(".dropdown dd #panel").slideUp(150);
     
    	});
     
    	var myTimeout = null; 
    	$(".dropdown").bind("mouseleave", function() { 
    		myTimeout = window.setTimeout(function() { 
    			 $(".dropdown dd #panel").slideUp(150); // <-- 1000ms  
    		}, 1000);$('.dropdown dt a').removeClass('active'); 
    	}); 
     
    	$(".dropdown dd #panel").bind("mouseenter",function() { 
    		window.clearTimeout(myTimeout); 
    	}); 
     
     
    });

    Problem is that when you leave the drop menu it rather jarringly removes the .class like a roll over, could do with it taking a similar amount of time as the slide back up so all works in tandem.

    Perhaps add the same time of 150 to the .removeClass ?

    I'm not sure...

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone help me out with the smooth transition from the remove class?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •