WordPress Code Snippets

A fresh mix of code snippets and tutorials

Tabbed sidebar menu with jQuery


Here’s an clean, simple way to add a tabbed sidebar menu using jQuery. You can see an example in the Introspection WP Theme.

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. 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: Get the Introspection WP Theme (check out the sidebar)

Show Support

Like the free coding tips at WP-Mix? Please Like the new Facebook Page!