Tabbed sidebar menu with jQuery
101
Here’s an clean, simple way to add a tabbed sidebar menu using jQuery. You can see an example in the sidebar of the Introspection theme demo.
Step 1: HTML
Add the following HTML to the sidebar of your web page(s):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<ul class="tabs"> <li class="active"><a href="#tab1">Recent</a></li> <li><a href="#tab2">Popular</a></li> <li><a href="#tab3">Random</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Proin feugiat lobortis lorem</li> <li> Curabitur quis dui sapien</li> </ul> </div> <div id="tab2" class="tab_content" style="display:none;"> <ul> <li>Suspendisse potenti</li> <li>Curabitur sed felis vitae</li> <li>Mauris feugiat varius</li> </ul> </div> <div id="tab3" class="tab_content" style="display:none;"> <ul> <li>Pellentesque in libero</li> <li>Vestibulum luctus porttitor</li> <li>Vestibulum vel arcu ipsum</li> </ul> </div> </div> |
Of course, you’ll want to replace the “lorem-ipsum” content with something useful.
Step 2: CSS
Next step, add the following CSS to your stylesheet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Tabbed sidebar menu @ http://wp-mix.com/tabbed-sidebar-menu-jquery/ */ ul.tabs { position: relative; z-index: 1000; float: left; margin: 0; padding: 0; list-style: none; border-left: 1px solid #777; } ul.tabs li { position: relative; overflow: hidden; height: 26px; float: left; margin: 0; padding: 0; line-height: 26px; background-color: #2A2A2A; border-bottom: 1px solid #777; border-right: 1px solid #777; border-top: 1px solid #777; } ul.tabs li a { display: block; padding: 0 10px; color: #999; outline: none; text-decoration: none; } html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #3B3B3B; border-bottom: 1px solid #3B3B3B; } html ul.tabs li.active a:link { color: #ccc; } .tab_container { position: relative; top: -1px; z-index: 999; width: 100%; float: left; font-size: 11px; background-color: #3B3B3B; border: 1px solid #777; } .tab_content { padding: 7px 11px 11px 11px; line-height: 1.5; } .tab_content ul { margin: 0; padding: 0; list-style: none; } .tab_content li { margin: 3px 0; } |
Note that this is the CSS used to style the menu as displayed in the Introspection theme demo. Customize as needed to fit your design.
Step 3: jQuery
For the final step, we add the requisite jQuery to make it all happen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript"> // Tabbed sidebar menu @ http://wp-mix.com/tabbed-sidebar-menu-jquery/ $(document).ready(function() { $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); //$(activeTab).fadeIn(); if ($.browser.msie) {$(activeTab).show();} else {$(activeTab).fadeIn();} return false; }); }); </script> |
Unlike the first two steps, no editing is required for the jQuery — unless you want to customize with your own skillz ;)
Demo: http://bluefeed.net/wordpress/ (in sidebar)