JQuery Drill Down Ipod Menu Widget

Creates a widget, which allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery.

Author:Lee Chestnutt (profile at wordpress.org)
WordPress version required:3.0
WordPress version tested:3.1.4
Plugin version:1.3.1
Added to WordPress repository:28-02-2011
Last updated:15-05-2011
Warning! This plugin has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
Rating, %:20
Rated by:1
Plugin URI:http://www.designchemical.com/blog/index.php/...
Total downloads:29 782
Active installs:300+
plugin download
Click to start download

Creates a widget, which allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. Drill down menus are ideal for managing large, complicated menus in a small, vertical, compact and fixed-sized area. They also offer a great alternative to accordion style and drop down menus. Features include - handles multiple levels, saved state using cookies and multiple menus on the same page.

To facilitate useability the drill down menu offers the option to have a count of the number of links for each level.

The drill down menu also offers 3 different ways to navigate:

  • Using a breadcrumb style menu at the top of the drill down menu
  • A back button to return to previous options
  • Selecting previous link headers, which are fixed at the top of the menu so the user can see the path taken

Uses the jquery cookie plugin by Klaus Hartl for saving the menu state between pages.

Menu Options

The widget has several parameters that can be configured to help cutomise the drill down ipod menu:

  • Save menu state (uses cookies) - Selecting this will allow the menu to remember its open/close state when browsing to a new page.
  • Show counter - adds the number of lower level links next to each heading
  • Show header - If not selected the current selected menu option will be shown as a heading above the menu options
  • Link Type - 3 options, which control how the user navigates the menu:

    1. Breadcrumb - previous selected menu items are displayed as breadcrumbs at the top of the menu. Clicking one of these breadcrumb links will take the user back to that level
    2. Back Link - the previous menu option is displayed as a back link above the menu
    3. Header Link - Previously selected links stay fixed above the menu
  • Default Header Text - The text that is shown in the header when the menu first initialises

  • Reset Link Text - The text that is shown for the header link that will reset the menu
  • Animation Speed - speed of the sliding effect
  • Skin - Several sample skins are available to give examples of css that can be used to style your own ipod drill down menu

See demo