The Shiba Menubar plugin extends native WordPress custom menus so that you may add page trees, category trees, and archives. You may then render your menubar using a variety of drop-down menu scripts and skins.

February 26th, 2011 – Release 1.2

• Updated for WordPress 3.1.
• Added styles for popular WordPress themes Suffusion and Atahualpa.

Key Features of the Shiba Menubar Plugin

• Lets you add category, page, and archive trees to your native WordPress custom menus.
• Displays drop-down menus using a variety of menubar scripts including MenuMatic, Tinydropdown, and Sexydropdown.
• Easily apply different design skins to your drop-down menu through the Appearance >> Shiba Menus screen.
• Currently, the plugin only displays horizontal menus. In the future I will add in options to display vertical menus.

Drop-Down Menu Types

• Menumatic by greengeckodesign. [Menumatic Demo]
• Tinydropdown by Michael Leigeber. [Tinydropdown Demo]
• Sexydropdown by Soh Tanaka. [Sexydropdown Demo]

The advantage of both Tinydropdown and Sexydropdown is that their associated javascripts are tiny. Menumatic uses MooTools so it has a larger javascript footprint, but it also has some great drop-down menu effects, and it follows some of the best practices in drop-down menu design.

Create and Assign a Menubar

The menubar interface is just the standard Menus interface that comes with WordPress native (since 3.0).

1. To create a menubar, go into Appearance >> Menus.

Native WordPress Menus interface.
2. Add in a menu name and hit the Create Menu button. This will create the menu object and now you may add elements to it.

Add an archive tree to our menubar.
3. To add category, page, or archive trees simply go to the Custom Links menu and enter categories, pages, or achive as the URL. Also enter a Label of your choice.
4. Once you are done, click on the Add to Menu button. This will add the archive tree to your menubar.

Archive tree has been added to our menubar.
5. Add other menubar elements. Once you are done remember to click on the Save Menu button to save your menubar.
6. Now you may assign the menubar to your blog. There are two ways to achieve this:

Assign menubar using the Theme Locations interface.
• Theme Locations – Some themes provide special theme menubar locations. Often these areas are highly styled. If Theme Locations are supported, it will show up on the Theme Locations interface on the Appearance >> Menus screen. Just assign your new menubar using the Theme Locations interface and click on Save.
• Custom Menu Widget – WordPress native also comes with a Custom Menu Widget. You may also assign your menubar by dropping this widget in the proper widget area within your theme.

Assign menubar using the Widgets interface.

Theme Menubar Style

Most themes already have highly styled menubar areas. As a result, the plugin menubar may not display properly due to style collisions between theme and plugin.

Here is a simple trick to remove all theme CSS stylings so that the Shiba Menubar skins are properly applied -

<script type="text/javascript" >
jQuery('#access').attr("id","new-access");
</script>

In the code above, CSS stylings for the TwentyTen menubar are removed by reassigning the menubar div (#access) to something else (#new-access).

Here is an example of the TwentyTen theme using the Menumatic script and Black menubar skin.

The Shiba Menubar Plugin has inbuilt style conditions for the following themes (i.e., the plugin will work out of the box for the themes below) -

• Twenty Ten
• Thematic
• Suffusion
• Atahualpa
• Shiba Theme

Other themes may require some tweaking.

Future Work

• Add vertical menus.
• Set menubar entries to be fixed or variable width.
• Set menubar skin on a widget by widget level.
• Allow certain categories, pages, or archives to be excluded.

Shiba Menubar Plugin Updates

• Shiba Menubar 1.1
  
  October 29th, 2010
  • Added two new drop-down menu scripts – Tinydropdown and Sexydropdown.
  • Added menubar skinning capabilities. You can now apply different skins to your menubar.
  • Easily change menubar scripts and skins through the Appearance >> Shiba Menus screen.

Download Shiba Menubar Plugin

Related Articles