Sep 18 2009

Tab Navigation with Smooth Horizontal Sliding Using jQuery

read 62 comments
by Karl Swedberg

In this tutorial I'll show you how to create a navigation menu that slides horizontally. It begins with a set of "tabs" on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. While I've never had a need to build one of these for any of my own projects, quite a few people have asked if I would demonstrate how it might be done, so here goes.

Download

You can now download a .zip of complete, working demos featured in this post.

The Styles

For the navigation items, I used a simple unordered list wrapped in a <div class="nav">. While the HTML structure is straightforward, the CSS is a little tricky, so I'll detail it here:

PLAIN TEXT
CSS:
  1. /* nav wrapper */
  2. .tab-nav {
  3.   position: relative;
  4.   width: 610px;
  5.   overflow: hidden;
  6.   background: #ddd url(tab-slide.png) no-repeat 0 0;
  7. }
  8. /* nav */
  9. .tab-nav ul {
  10.   position: relative;
  11.   float: left;
  12.   width: 1600px;
  13.   margin-left: 535px;
  14.   padding-left: 0;
  15.   list-style-type: none;
  16.   background-color: #fff;
  17. }
  18. .tab-nav li {
  19.   float: left;
  20.   clear: left;
  21. }
  22.  
  23. .tab-nav a {
  24.   display: block;
  25.   width: 74px;
  26.   border-right: 1px solid #ddd;
  27.   height: 25px;
  28.   line-height: 24px;
  29.   float: left;
  30.   text-align: center;
  31.   text-decoration: none;
  32.   color: #000;
  33.   background:  url(tab-slide.png) no-repeat 2px -194px;
  34. }
  35. .tab-nav a.expanded {
  36.   background-position: 2px -244px;
  37. }
  38. /* second-level overrides */
  39. .tab-nav ul ul {
  40.   float: left;
  41.   background-color: #333;
  42.   width: auto;
  43.   margin-left: 0;
  44. }
  45. .tab-nav li li {clear: none;}
  46. .tab-nav li li a { color: #fff; width: 100px; background-image: none;}

Most of the relevant CSS here has to do with positioning the nav items. I set the top <ul>'s left margin to 75 pixels less than the wrapper's width so that the top-level links appear on the right side. The 1600px width for the <ul> gives the floated list items ample room to line up horizontally next to each other.

The wrapper's overflow declaration is significant, as it hides the list items when they're sticking out to the right, but the rest is "window dressing."

Sliding the Nav

With the nav looking the way I want it at its initial state, it's time to make it do something. I'll start with a simple setup, having each "tab" (top-level item) slide to the left on the first click to reveal its sub-nav items, and slide back to its initial position when it's clicked a second time.

For this basic behavior, everything can be done inside a click handler for the top-level links. Note: Since I'm using multiple navs for this tutorial, each with its own set of behavior, I'll be referring to them by ID, unlike in the CSS snippet above, where everything is styled by class. There is nothing special about the selectors or their naming here. Name your own elements and select them however you want.

The first thing to do is set a few variables. The $parentItem variable is the <li> parent of the clicked link. The slideAmt is the width of the nested <ul>, which is the next sibling of the link. And direction will eventually determine whether the parent <li> should be slid to the left or to the right.

PLAIN TEXT
JavaScript:
  1. var $topLinks1 = $('#tab-nav-1 > ul > li > a');
  2. $topLinks1.click(function() {
  3.   var $parentItem = $(this).parent(),
  4.       slideAmt = $(this).next().width(),
  5.       direction;
  6.   // code continues
  7. });

Notice the use of $(this). Inside the click handler, this refers to the clicked DOM element. By wrapping this in $(), we can call jQuery methods on it.

To get the sliding motion to occur, we can animate either the left property or the marginLeft property. Here, I'll animate marginLeft. So, the next thing to do is determine the direction of the animation based on the current value of marginLeft: If it's less than 0, direction is set to "+=", which increases it (back to 0); otherwise, direction is set to "-=". At the same time, an "expanded" class will be toggled so that the arrow background image can change directions.

PLAIN TEXT
JavaScript:
  1. var $topLinks1 = $('#tab-nav-1 > ul > li > a');
  2. $topLinks1.click(function() {
  3.   var $parentItem = $(this).parent(),
  4.       slideAmt = $(this).next().width(),
  5.       direction;
  6.  
  7.   if (parseInt($parentItem.css('marginLeft'), 10) <0) {
  8.     direction = '+=';
  9.     $(this).removeClass('expanded');
  10.   } else {
  11.     $(this).addClass('expanded');
  12.     direction = '-=';
  13.   }
  14.   // code continues
  15. });

Finally, we do the animation, plugging in the direction and slideAmt variables. The return false; line stops the default click action from occurring. Here is the finished code for the basic implementation:

PLAIN TEXT
JavaScript:
  1. var $topLinks1 = $('#tab-nav-1 > ul > li > a');
  2.   $topLinks1.click(function() {
  3.     var $parentItem = $(this).parent(),
  4.         slideAmt = $(this).next().width(),
  5.         direction;
  6.  
  7.     if (parseInt($parentItem.css('marginLeft'), 10) <0) {
  8.       direction = '+=';
  9.       $(this).removeClass('expanded');
  10.     } else {
  11.       $(this).addClass('expanded');
  12.       direction = '-=';
  13.     }
  14.    
  15.     $parentItem
  16.       .animate({marginLeft: direction + slideAmt}, 400);
  17.     return false;
  18.   });

Give it a try:

One at a Time

That's all well and good, but I don't really care for having more than one row of items expanded at a time. A couple simple modifications will fix that for us:

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   var $topLinks2 = $('#tab-nav-2 > ul > li > a');
  3.   $topLinks2.click(function() {
  4.     var $parentItem = $(this).parent(),
  5.         slideAmt = $(this).next().width(),
  6.         direction;
  7.     $topLinks2.removeClass('expanded');
  8.     if (parseInt($parentItem.css('marginLeft'), 10) <0) {
  9.       direction = '+=';
  10.     } else {
  11.       $(this).addClass('expanded');
  12.       direction = '-=';
  13.     }
  14.    
  15.     $parentItem
  16.       .animate({marginLeft: direction + slideAmt}, 400)
  17.         .siblings()
  18.         .animate({marginLeft: '0'}, 150);
  19.     return false;
  20.   });
  21. });

The links are stored in a variable first thing here. Whenever a link is clicked, all links have the "expanded" class removed. Of course, only one, at most, will have that class, but I'm lazy and it's easier to tell all of the links to remove the class than it is to hunt links that have the class first.

The same check is performed to set the direction of the animation. If the clicked link's parent <li> is going to be slid to the left, the link will also get the "expanded" class.

Finally, the clicked link's parent is animated in the direction and number of pixels specified by the variables. But here's the twist: all of that parent's siblings have their marginLeft property animated to 0. Again, I'm taking the lazy route, animating all of the siblings, even though one or none of them will need it.

Here's a demo of the "one at a time" version:

Auto-Collapse

Now that the expanding and collapsing are happening the way I like it, I'll add one more little touch. If the user's mouse leaves the containing <div class="tab-nav">, and stays out for a full second, any expanded list will collapse.

PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   var closeAll,
  3.       $topLinks3 = $('#tab-nav-3 > ul > li > a');
  4.  
  5.   $('#tab-nav-3 ul ul').css('opacity', '0.5');
  6.   $topLinks3.click(function() {
  7.     var $parentItem = $(this).parent(),
  8.         slideAmt = $(this).next().width(),
  9.         direction;
  10.     $topLinks3.removeClass('expanded');
  11.     if (parseInt($parentItem.css('marginLeft'), 10) <0) {
  12.       direction = '+=';
  13.     } else {
  14.       $(this).addClass('expanded');
  15.       direction = '-=';
  16.     }
  17.     $parentItem
  18.       .animate({marginLeft: direction + slideAmt}, 400)
  19.         .siblings()
  20.         .animate({marginLeft: '0'}, 150);
  21.     return false;
  22.   });
  23.  
  24.   $('#tab-nav-3')
  25.   .mouseleave(function() {
  26.     closeAll = setTimeout(function() {
  27.       $topLinks3.removeClass('expanded')
  28.         .parent().animate({marginLeft: '0'}, 150);
  29.     }, 1000);
  30.  
  31.   })
  32.   .mouseenter(function() {
  33.     clearTimeout(closeAll);
  34.   })
  35.  
  36. });

Line 2 declares a variable that will be used for the setTimeout(), which you can see tucked inside the .mouseleave() method near the bottom of the code. The setTimeout() function has two arguments: the first is an anonymous function that contains code for triggering the collapse of the list items, and the second is the number of milliseconds to wait (1,000 milliseconds) before the first argument (the anonymous function) is executed. The clearTimeout() inside the .mouseenter() method does what its name suggests: it clears the timeout. If the user mouses out of the nav area but then mouses back in before the 1000 milliseconds are up, the timer is stopped and the function will not be executed.

Note: The mouseenter(fn) and mouseleave(fn) shorthand methods are available as of jQuery 1.3. If you're still using jQuery 1.2.6, you can use .bind('mouseenter', fn) and .bind('mouseleave', fn) instead. Or, with just about any version of jQuery, you can use .hover(fn, fn).

Here is the final demo:

There are many ways to do this sort of thing. Just tweak the CSS or change the animation for a completely different experience.

comment feed

62 comments

  1. eduardo
    September 18, 2009 at 9:21 am

    Impressive! Thanks for sharing.

    Reply
  2. Jason Karns
    September 18, 2009 at 9:52 am

    Overall, looks great. Gets a little wonky when you tab through the links. At first I thought this was designed to handle tab/keyboard navigation. Until I tabbed through them all, and then clicked on the 'opener'. Then it really goes nuts.

    Reply
  3. webmasterdubai
    September 18, 2009 at 2:15 pm

    what a work really nice job done, nice jquery plugin good job.

    Reply
  4. cschroeder
    September 18, 2009 at 2:24 pm

    Very nice.
    Check IE 7 compatibility though - tabs are always visible.

    Reply
  5. Nate Eagle
    September 18, 2009 at 2:33 pm

    I don't think I've ever run across navigation that works this way; I like it! It's another example of doing something that's pretty easy in jQuery but creates a very fresh effect.

    Reply
  6. William Rouse
    September 19, 2009 at 1:59 am

    I wished you would publish the full source code, not only the js files. For example I don't see how you manipulate the left and right arrow heads for each of the major list items.

    Reply
    • Karl Swedberg
      September 19, 2009 at 8:33 am

      Hi William,
      As I mention in the entry ("At the same time, an 'expanded' class will be toggled so that the arrow background image can change directions"), the manipulation of the arrow heads is simply done by adding the "expanded" class to the major list items. The arrow heads are in an image sprite. Adding the class changes the background position. I showed all of the CSS (and commented on some of it) in the first code block above. In any case, here is the relevant CSS for switching the direction of the arrows:

      .tab-nav a {
/* other style declarations here ... see first code block above */
  background:  url(tab-slide.png) no-repeat 2px -194px;
}
.tab-nav a.expanded {
  background-position: 2px -244px;
}
/* second-level links */
.tab-nav li li a { color: #fff; width: 100px; background-image: none;}

      Here is the image sprite.

      Reply
      • William Rouse
        September 19, 2009 at 3:47 pm

        Thank you for you kind response. I really appreciate your tutoring. I will study your work later today when I can spend some time to look at what I don't understand. Take care and once again thanks for your attention.
        WBR

        Reply
        • William Rouse
          October 5, 2009 at 8:08 pm

          It seems that the problem is IE8. The same code works in Chrome but fails to produce the right pointing arrow in IE8.
          Thanks!
          WBR

  7. choen
    September 21, 2009 at 9:00 am

    interesting functions, a new model of navigation tabs. thanks

    Reply
  8. Ayo
    September 21, 2009 at 5:13 pm

    Where is the download link to download the full working example :-(

    Reply
  9. Moksha
    September 23, 2009 at 2:35 am

    its really wonderful, I am working on a Arabic website and now I can use this one for menu, never thought to do something like this.

    Reply
  10. Lam Nguyen
    September 23, 2009 at 2:01 pm

    That's awesome horizontal sliding navigation. I love it, and I will be perfect if you set no outline for the link. Good job!

    Reply
  11. Adii
    September 28, 2009 at 11:42 pm

    Cool,Awesome thnx man

    Reply
  12. dlv
    September 29, 2009 at 8:41 am

    excellent! perhaps i'm gonna using in my next project

    thanks for sahre this kind of resources !

    Reply
  13. Eduardo Gomes
    October 3, 2009 at 9:42 am

    Muito bom essa aplicação em JQuery
    Very good this aplication in JQuery

    vou até adicionar isso no meu site hihihi
    I going add this into my site hihihi

    Reply
  14. Alberto
    October 5, 2009 at 1:02 am

    Cool menu.
    Integrating with blogger I've run into a hitch, the mouse enter event wasn't bound to the tab-nav id:

    
.mouseenter(function() {
    clearTimeout(closeAll);
  })

    so I've added and it looks like this:

    
$('#tab-nav-3').mouseenter(function() {
    clearTimeout(closeAll);
  })

    I understand that this would happen in a normal context, also I didn't test it yet...

    Reply
    • Karl Swedberg
      October 5, 2009 at 8:22 am

      Alberto,
      You actually caught a little bug in the entry's formatted code. Although the source code is correct, the code I posted in the entry had an extraneous semicolon. You can either add $('#tab-nav-3') to the .mouseenter() line, as you did, or remove the semicolon from the previous line (and rely on chaining). I chose to remove the semicolon.

      Cheers!

      Reply
  15. Max
    October 21, 2009 at 5:33 am

    Hi Karl, Great work. one question tough, is it possible to have the menu on the left, with submenu sliding to the right ? I've tried, but didn't get it to work. And another question, is it possible to have the submenu already open and highlighted when arriving on a page ?? thanks a lot

    Reply
  16. asep
    October 22, 2009 at 2:53 am

    I'am newbie, would u share the HTML for this tutorial ?

    tnx b4

    Reply
  17. Blogger Tips And Tricks
    October 27, 2009 at 9:04 am

    Very informative article.I learn more from this site.Thank you.

    Reply
  18. abant
    November 10, 2009 at 7:46 pm

    interesting functions, a new model of navigation tabs. thanks

    Reply
  19. Jon H
    November 16, 2009 at 10:09 am

    It's nice you guys have attached the .js file..but for us total n00bs with JQuery can you guys also post or upload the HTML so we can see how all of this works. I'm very interested in learning JQuery and pulled down the .js file..but any possibility you guys can upload the entire HTML or what calls the JS?

    Reply
  20. gizli dinleme cihazı
    November 21, 2009 at 12:18 am

    I'm very interested in learning JQuery and pulled down the .js file..but any possibility you guys can upload the entire HTML or what calls the JS?

    Reply
  21. David
    November 24, 2009 at 6:37 pm

    If you take a look at this link Click here If you look at the three slightly different colored tabs, I am trying to use jquery ui with these tabs. I want the hover effect to work on these tabs so that when I hover over each tab, new information is displayed. I know that jquery ui tabs widget can do this. To be quite honest though, I have no idea where to start to learn how to customize this widget to the size that I want it to be. I am new to javascript, so I was wondering if there is a website where it will somewhat walk me through this process?

    Thanks for any help.

    Reply
  22. ses kayıt cihazı
    November 29, 2009 at 6:51 pm

    I think i would like to try this great menu in my blog. Thanks

    Reply
  24. Gethin
    December 9, 2009 at 11:42 am

    Am trying to get something like this, so far not working any hint? Thanks

    
       	
	           
	
	          
		       
			    Menubar
    Reply
  25. doug
    December 9, 2009 at 2:20 pm

    Better would be for the button to remain in place while the links expanded out from the button. This would keep the user from having to move the mouse to collapse the links themselves.

    Reply
  26. lists2day
    January 21, 2010 at 4:36 am

    hi, ive been looking for something like this to use for my blog (blogger). is there a way that i can use this for blogger? what will the codes look like? this is a very wonderful widget.

    Reply
  27. mdavidangst
    January 23, 2010 at 10:44 am

    This script is great! -

    Is there a Version of this where the Menu is on the LEFT SIDE?
    I've been tweaking the code, but it's just not right... If anyone, or the author has this in an opposite side version - that would really be fantastic!

    Reply
  28. webking
    February 20, 2010 at 9:16 am

    Is very nice ...

    But IE6 browser is not working...
    Please help me..

    Reply
  29. Tracy Chamblee
    March 14, 2010 at 12:12 pm

    Hey Karl,

    I'm definitely bookmarking this, I know I will need this one day. Very, very nice! Thanks for all your time and for sharing it! :)

    Totally off topic, but I also have a WordPress blog and would like to know if that is a WordPress plugin that creates the 'author' tag on your posts? Please share if so, that's nice, too!

    Tracy

    Reply
    • Karl Swedberg
      March 16, 2010 at 8:38 pm

      Hi Tracy,
      Actually, it's just the comment_class() WordPress function that I added to my comments.php file. It looks something like this in the template:

      <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
  <!-- etc. -->
</li>

      Once you have that in there, comments from the post's author get a "bypostauthor" class. You can use CSS to style it however you want. I just used a background image.

      Hope that helps lead you in the right direction.

      Reply
  30. Cubism Designs
    March 31, 2010 at 9:25 am

    It's superb post as in these days I am searching for similar effect's tut for my project.
    Thanks

    Reply
  31. CoachZ
    April 12, 2010 at 3:59 pm

    using keyboard tab and triggering the navigation via enter shows interesting results, this could be optimized :)

    Reply
  32. john
    April 15, 2010 at 8:17 pm

    Hy

    Great job o the tutorial but I have a question.

    My question is like this insted of moving the expanded class can`t I just change the state of it , what I mean is that I don`t need the nested sub menus and I just want to change the picture if the link is clicked, how can I do this ?

    Thx and excuse my english

    Reply
  33. Prashant Renge
    April 26, 2010 at 5:28 am

    nice jquery plugin good job dude.

    also check on IE7 .

    Reply
  34. Tim
    May 3, 2010 at 6:56 pm

    Has anyone been able to get this to slide to the right instead of the left? I've been trying, but am not getting anywhere...

    -Thanks.

    Reply
  35. Alex
    May 12, 2010 at 1:13 pm

    This menu doesn't work in ie6... How to fix it?

    Reply
  36. Alex
    May 13, 2010 at 10:42 am

    How to get this to slide to the right instead of the left?

    Reply
  37. David
    August 6, 2010 at 12:45 am

    Hi, great plug in and very easy to implent, I just have one question, I used on a project, and I tested on three different browsers, on Safari and Firefox it works great, but when I tried it on IExplorer as soon as I click the arrow it expands horizontally but the arrow dissapears make it impossible to close, any idea on why is this happening ??

    Reply
  38. Affordable Web Solutions
    September 13, 2010 at 12:06 pm

    Nice menu. Is to possible to slide above instead of side..

    Reply
  39. Gowranga Chintapatra
    September 27, 2010 at 1:40 pm

    Hi Karl,
    Really good job. Can you suggest some idea so that I can have horizontal parent tab with same features.
    Thanks

    Reply
  40. baylock
    October 22, 2010 at 3:45 pm

    Nice script, thank you! I'm the fourth, and hopefully the last user to ask: what must we do in order to make the menu slide from left to right? It has been asked many times but there is no answer yet. Of course, you are not obliged to answer as you already did a lot, but it will really be nice of you.
    I tried to change the "direction" and the "marginLeft" in the js file but with no success...

    Reply
    • Phet
      February 10, 2011 at 1:28 pm

      Hope this help...

      CSS:

      <style type="text/css">
html, body {
margin: 0; 
padding: 0; 
border-width: 0;
}
body {
font: 14px/1.4 Helvetica, Verdana, Arial, sans-serif;
text-align: center;
}

.container-menu {
width: 800px;
margin: 40px auto;
text-align: left;
background-color:#F00;
}


/*THE MENU*/
/*Container for the menu*/
.tab-nav {
width: 800px;
overflow: hidden; /*The wrapper's overflow declaration is significant, as it hides the list items when they're sticking out to the right, but the rest is "window dressing."*/
background: #ccc url(tab-slide.png) no-repeat 0 0;
}
/*Tab-background*/
.tab-nav ul {
position: relative;
float: right; 
width: 1600px;
margin-right: 725px; 
padding-right: 0;
list-style-type: none;
background:#0F0/*GREEN*/;
}
/*Menu item list*/
.tab-nav li { 
float: right;
clear: right; 
}


/*HANGING TAB*/
/*Style for the hanging tab, when close menu*/
.tab-nav a {
display: block;
width: 74px;
border-right: 1px solid #ddd;
height: 50px;
line-height: 49px;
float: right;
text-align: center;
text-decoration: none;
color: #F0F/*PINK*/;
background: #06F url(tab-slide.png) no-repeat 2px -180px;
}
/*Style for the hanging tab, when open menu*/
.tab-nav a.expanded {
background-position: 2px -230px;
}



/*Second level menu style (part of the menu that is hidden when closed*/
.tab-nav ul ul { float: right; background-color: #333; width: auto; margin-right: 0;}
.tab-nav li li { clear: none;}
.tab-nav li li a { color: #fff; width: 100px; background-image: none;}
</style>

      Javasript:

      
$(document).ready(function() {
  $('#tab-nav-1 > ul > li > a').click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;

    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
      $(this).removeClass('expanded');
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
      .animate({marginRight: direction + slideAmt}, 400);
    return false;
  });
 
});

$(document).ready(function() {
  var $topLinks2 = $('#tab-nav-2 > ul > li > a');
  $topLinks2.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks2.removeClass('expanded');
    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
      .animate({marginRight: direction + slideAmt}, 400)
        .siblings()
        .animate({marginRight: '0'}, 150);
    return false;
  });
});


$(document).ready(function() {
  var closeAll,
      $topLinks3 = $('#tab-nav-3 > ul > li > a');

  $('#tab-nav-3 ul ul').css('opacity', '0.5');
  
  setTabIndex();
  
  $topLinks3.click(function() {
    var $parentItem = $(this).parent(),
        slideAmt = $(this).next().width(),
        direction;
    $topLinks3.removeClass('expanded');
    if (parseInt($parentItem.css('marginRight'), 10) < 0) {
      direction = '+=';
    } else {
      $(this).addClass('expanded');
      direction = '-=';
    }
    $parentItem
    .animate({marginRight: direction + slideAmt}, 400)
      .siblings()
      .animate({marginRight: '0'}, 150);
        
    setTabIndex();
    
    return false;
  });
  
  $('#tab-nav-3')
  .mouseleave(function() {
    closeAll = setTimeout(function() {
      $topLinks3.removeClass('expanded').parent().animate({marginRight: '0'}, 150);
    }, 1000);
  }).mouseenter(function() {
    clearTimeout(closeAll);
  });

  function setTabIndex() {
    $topLinks3.each(function(index) {
      if ($(this).is('.expanded')) {
        $(this).next().find('a').removeAttr('tabIndex');
      } else {
        $(this).next().find('a').attr({tabIndex: '-1'});
      }
    });
  }

  
});
      Reply
  41. Bryce
    April 26, 2011 at 4:02 pm

    Awesome menu! Thank you for posting. I was wondering how to make this menu function so it slides out on hover instead of click. I am using the left to right version of the JS/CSS posted by Phet.

    Thanks!

    Reply
  42. Missy
    July 27, 2011 at 12:05 pm

    This is really nice, however there's a huge problem.

    Let's say I have a centered page and I want to use this menu on the right-hand side so that the items slide in over the content (pretty much as per your example).

    The positioning of the containers means that any hyperlink in the content can't be clicked - even all the containers of the nav have a transparent background.

    Anyone know of a solution to this?

    Reply
  43. Tea
    March 31, 2012 at 6:20 pm

    Hi,

    Thanks for this example. Could you please tell me if you have an idea on how to do a content tab slider. So, in your example, instead of having a list of submenus sliding can I have a small post-it size window that slides and shows link or information etc.

    Thank you very much.

    Reply

16 Pings

  1. 網站製作學習誌 » [Web] 連結分享
    September 22, 2009 at 12:08 am

    [...] Tab Navigation with Smooth Horizontal Sliding Using jQuery [...]

  2. links for 2009-10-01
    October 1, 2009 at 7:06 pm

    [...] Tab Navigation with Smooth Horizontal Sliding Using jQuery » Learning jQuery – Tips, Techniqu... (tags: jquery howto) [...]

  3. 45 jQuery Navigation Plugins and Tutorials - Noupe
    January 25, 2010 at 10:04 am

    [...] a website’s performance, and with jQuery, we can easily implement awesome transition effects.Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set [...]

  4. 45 jQuery Navigation Plugins and Tutorials | iDESIGN
    January 25, 2010 at 10:31 am

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  5. 45 jQuery Navigation Plugins and Tutorials | Google Reader | Юлиян Попов
    January 25, 2010 at 12:18 pm

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  6. 45 jQuery Navigation Plugins and Tutorials
    January 25, 2010 at 1:19 pm

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  7. 45 jQuery Navigation Plugins and Tutorials » IMvsMI blog
    January 26, 2010 at 5:45 pm

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  8. 45 jQuery Navigation Plugins and Tutorials | SeanBurdick
    January 29, 2010 at 11:01 am

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  9. 45 jQuery Navigation Plugins and Tutorials - Interactive Middle East
    January 31, 2010 at 2:09 pm

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  11. Techflaps | 34 Excellent Tutorials About How To Create And Use jQuery Tabs
    March 6, 2010 at 3:36 am

    [...] TAB NAVIGATION WITH SMOOTH HORIZONTAL SLIDING USING JQUERY [...]

  13. B-Side Productions - Web Design, Web Development, Free WordPress Themes » 11 Stunning Navigation Tutorials
    May 29, 2010 at 8:17 am

    [...] This tutorial teaches you how to put navigation links in separate tabs, that expand when clicked. Perfect for when you need to separate your navigation into different categories, or just want them separated into cool sliding tabs. Read on Learning jQuery » [...]

  14. 使用教程：45个jQuery的导航插件和教程 : 20g：互联网 产品 用户 体验 手机 写真 摄影
    June 6, 2010 at 5:02 am

    [...] 标 签导航光滑水平滑动 在本教程中，您将创建一个导航菜单幻灯片水平。它从一个“标签上包含的元素的右边”设置。当点击一个标签幻灯片左侧显示的链接组。再次点击该标签，它滑 出。 [...]

  15. 45 jQuery Navigation Plugins and Tutorials › New2jQuery
    June 21, 2010 at 9:41 pm

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

  16. 45 jQuery Navigation Plugins and Tutorials | Everything of KK
    July 2, 2010 at 4:17 am

    [...] Tab Navigation with Smooth Horizontal Sliding In this tutorial you will create a navigation menu that slides horizontally. It begins with a set of “tabs” on the right side of a containing element. When clicked, a tab slides to the left to reveal a group of links. Click the tab again, and it slides back. [...]

Leave a Comment

IMPORTANT:

  • If you wish to post code examples, please wrap them in <code> tags.
  • Multi-line code should be wrapped in <pre><code> </code></pre>
  • Use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.