Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [jquery] smooth animation on sliding menu code tweak help

    hi all, new to both this forum and jquery in general. here is my problem:

    a very generous user at another forum donated his code to the community to make a sliding vertical menu using jquery. you can see his menu in action here: http://www.elarcadenoe.es/

    his code for the menu is here:

    Code:
    $(document).ready(function()
    {
    	// First we hide all exhibitis
    
    	$("#menu ul li.section-title").nextAll().hide();
    
    	// then the active exhibit is showed
    
    	$("#menu ul").each(function(){
    	$(this).find("li.active").prevAll().nextAll().show();
    	}); 
    	
    	//This is the toggle function
    
    	$("#menu ul li.section-title").click(function(){
    	$(this).nextAll().slideToggle("fast");
    	});
    
    });
    it works quite well, however you notice as you click around his menu, it does not close sections as you open new ones, so you get a somewhat jerky feel when you click on a sublink to go into a project, all the menus abruptly close.

    i am trying to figure out a way to have it so that (for example) if 'print' is open, clicking on 'screen' slides open 'screen' and slides closed 'print' at the same time.

    i have been futzing with the code and i found that adding this last line (in bold):

    Code:
    $(document).ready(function()
    {
    	// First we hide all exhibitis
    
    	$("#menu ul li.section-title").nextAll().hide();
    
    	// then the active exhibit is showed
    
    	$("#menu ul").each(function(){
    	$(this).find("li.active").prevAll().nextAll().show();
    	}); 
    	
    	//This is the toggle function
    
    	$("#menu ul li.section-title").click(function(){
    	$(this).nextAll().slideToggle("fast");
    
    	$("#menu ul li.section-title").nextAll().hide(); 
    	});
    
    });
    does close the open sections but does it very jerkily. since i am positive i am doing this tottally wrong, can someone please let me know what the correct line(s) of code would be to get the effect i want.

    thanks much in advance!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,798
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    	$("#menu ul li.section-title").click(function(){
    	$(this).nextAll().slideToggle("fast");
    
    	$("#menu ul li.section-title").nextAll().slideUp('fast'); 
    	});
    try that. What it appears is that he just said slide the currnet one down and just hide the rest, not applying any kind of transition to the effect.

    there are a lot of jQuery accordians out there as well.

    http://www.learningjquery.com/2007/03/accordion-madness
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

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