SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal slide menu

    I've got this client that would like the menu to slide out from the left nav bar, horizontally. So far I've put together a jQuery toggle you can see working here:

    Slide out Menu

    What I need is to fade out/slide back when another menu link is clicked. Right now they are overlapping and there are more menu items to come.

    Here's the script now:
    Code JavaScript:
    $(document).ready(function(){ 
       $('#tab_2').toggle(function(){ // toggles #tab_2
    	  $('#group_2').stop().animate({width:"370"}, 500, function() {//slide out
    	  $('#icons_2').fadeIn('slow'); //fades the content in
    	  });  
       },
       function(){ //when #group_2 is clicked
          $('#icons_2').fadeOut('slow', function() { //fade out the content 
          $('#group_2').stop().animate({width:"0"}, 500); //slide back to a width of 0
    	  });
       });
       $('#tab_3').toggle(function(){ // toggles #tab_3
          $('#group_3').stop().animate({width:"370"}, 500, function() {//slide out
    	  $('#icons_3').fadeIn('slow'); //fades the content in
    	  });  
       },
       function(){ //when #group_3 is clicked
          $('#icons_3').fadeOut('slow', function() { //fade out the content 
          $('#group_3').stop().animate({width:"0"}, 500); //slide back to a width of 0
    	  });
       });
     
    });

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps a different way to say it is, I need a way to know when another link in the menu is clicked. Something like:

    1. on click tab 1, slide out group 1

    2. on click tab 2, slide in group 1, slide out group 2

    Any help is very much appreciated.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2008
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for looking. I haven't been able to go further with this code, so I've abandoned it for something totally different.


Tags for this Thread

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
  •