WordPress Code Snippets

A fresh mix of code snippets and tutorials

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):

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:

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:

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)