Themeforest

Wordpress Plugin – jQuery Drill Down iPod Menu Widget

Updated 21st June 2011

Drill down menu plugin

Drill down menus (similar to the iPod style menu) offer an excellent way of managing and organising large, complicated hierarchical menus in a small, vertical, compact and fixed-sized area. For a change to the standard menu styles they also offer a great alternative to accordion style and drop down menus.

This Wordpress plugin creates a widget, which allows you to create a drill down menu from any Wordpress custom menu using jQuery.

Features include – handles multiple levels, saved state using cookies and multiple menus on the same page. 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

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

Also Check Out Our Premium WordPress Plugins:

Demo jQuery Drill Down iPod Menu

http://www.designchemical.com/lab/demo-wordpress-jquery-drill-down-ipod-menu-plugin/

Download The Plugin

Download JQuery Drill Down Ipod Menu Widget 1.3.1 (14,719)

Installation

  1. Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-drill-down-ipod-menu` folder to the `/wp-content/plugins/` directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. In the widgets section, select the ‘jQuery Drill Down iPod Menu’ widget and add to one of your widget areas
  4. Select one of the WP menus, set the required settings and save your widget

Useage

In order to use this plugin you will need the following:

A Wordpress custom menu

Either use an existing menu or set one up via the menu option in Wordpress admin. The drill down menu is excellent for handling multiple levels, which would be difficult to use with drop down or accordion menus.

Widget area

Either use an existing widget area in your Wordpress theme or create a new widget area in the required location. This is a vertical menu so it needs to be located appropriately. The drill down menu takes up a fixed size and is very compact.

For more information on how to add a new widget to your Wordpress theme see our follow up Wordpress tutorial – “Adding A Widget Area To Your Theme Files”.

Create Your Drill Down iPod Menu

To create your drill down menu go to the widget admin page and drag the “jQuery Drill Down iPod Menu” widget to the desired widget area. Then select your custom menu from the drop down list in the widget control panel.

Click “save” to activate the widget.

Configuring Your Widget

The widget has several parameters that can be configured to help cutomise the drill down 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

Frequently Asked Questions

Check out our FAQ for the jQuery Drill Down Menu Plugin.

Many issues that can crop up with installing and using the plugin with different themes have been covered in our comments section. Please check previous comments for further information/tips.

Demo jQuery Drill Down iPod Menu

http://www.designchemical.com/lab/demo-wordpress-jquery-drill-down-ipod-menu-plugin/

Download The Plugin

Download JQuery Drill Down Ipod Menu Widget 1.3.1 (14,719)

Feedback

If you find this plugin useful please rate it at wordpress.org.

If you have any problems or suggestions on how we can make the plugin better let us know via comments, email or our online contact form.

Updates

Version 1.3.1 – 21st June 2011

  • Fixed: IE7 bug.

Version 1.3 – 25th May 2011

  • Fixed: Bug with save menu state option.

Version 1.2 – 23rd May 2011

  • Update: jQuery Drill Down Menu plugin includes check to see if cookie plugin exists.

Screenshots

Widget in edit mode

For more information and tips on the best type of vertical menu plugin to use refer to – Choosing a Vertical Menu Wordpress Plugin For Your Site.

76 Comments

  • Have you a NON-WordPress version of your jQuery Drill-Down iPod Menu?

  • Hi Lee,

    I have switched from the accordion menu to your Jquery IPod menu. A couple of issues seem to be problematic:

    1) Need to be able to expose (or scroll) all the menu items.

    2) Menu doesn’t open the pages at the interim levels of the site.

    3) Once a page is loaded the menu closes, does not maintain “state”

    Please advise.

    Thanks,
    Dave

    • Hi Lee,

      Okay I adjusted the padding to accommodate for the additional menu items. Issue with maintaining “state” while navigating to pages still problematic. Any suggestions??

      Thanks,
      Dave

  • Hi

    Hope you can help, when I click on any of the links it goes to that page but the menu items flicker and appear really bunched up for a moment then they appear okay.

    Anyway to prevent this from happening?

    Thanks

  • Hi

    I have the menu working and looks great! – The only problem that I appear to have is that the menu does not display the last two links.

    I have read other comments and looks like a few others are experiencing the same problem.

    i have tried about a dozen themes and the problem is the same on each one. When I view the source code all the menu parent links are their, but for some reason not all are showing.

    Can somebody please advise me as to why this could be happening?

    Many Thanks

  • Hi

    This is great and perfect for a site I am working on. Is it possible to change the direction the submenus come into view. So instead of right to left maybe top to bottom?

    Many Thanks

  • Every plugin You made is great, would be awesome if You include a shortcode for every single one of them. Than all of the plugins would gain lack of flexibility and possible become unmatched in WP sphere.
    Keep up the good work!

    • Hi,

      Thanks for the feedback. I am planning on adding shortcodes to the menu plugins so will hopefully get those updated soon.

  • I think all the WordPress plugins you guys have made are awesome. I just wondered if there are any plans to have a shortcode option on this one. Would be really useful if there was.

    • Hi,

      We can look at adding one for a future update

  • Hi
    I wonder why in menu are dots before text and menu is to wide for sidebar?
    Thanks
    Dejan

    • Hi,

      These will be caused by your theme’s widget CSS. Check the theme style sheet for settings that are causing list bullets and the increased width

  • Hi,

    Anyone know why that menu doesnt work.

    1. All menus are oppened
    2. U use only one JQuery for everything as fallow instructions.
    3. I got this error in firebug:

    Uncaught TypeError: Object # has no method ‘dcDrilldown’

    Thanks

    • Hi,

      do you have a link to the site?

      • Hi,

        Yeap: http://dev1.betterdecisionmedia.com/

        Thanks for your help. Spend many time on it and no result :(

      • NOTE: Same happens with all plugins from this site.

        I trued add fresh jquery lib but still no result

        Thanks

      • Thanks! Fixed – conflict with other js libraries…

        • OK glad you managed to get it fixed

  • Hi Lee!
    I love your plugins and I try to understand the code as good as I can.
    Right now I implement your drill down menu widget and it is cool how it seem to be able to change size automatically sometimes. But would it be possible to autosize the widget to the height that is needed at the individual state instead of at all times sizing it after the maximum “menuHeight = itemHeight * maxItems;”?
    I would be pleased if you could help me :)
    Regards
    Snowpaw

    • hi,

      The plugin currently requires that the total height of the widget is equal to the maximum height that the menu can go

      • Lee,
        thanks for the quick response.
        Couldn’t we/you change that behaviour? You know the code, is it hard to implement this hight-change?
        Best Regards
        Snowpaw

        • It would probably require a relatively major change to the plugin as the fixed height is an integral part of how it works

  • Hi

    I´ve tried to get jQuery Drill Down iPod Menu to work on my site. Changed to many other themes and deleted all my other plugins but I can´t still get it to work. It appears like a long list on my site and is clickable, but it won´t work with parent/child menu. Read all Faq and tried everything. Please help because I think this is one of the most useful plugins for wp.

    Thank You

    Chrille

    • Hi,

      The menu on your current site doesnt have any child menus

      • Hi Lee and thanks for the fast answer.

        If you could take a look at my site again, because in the main menu You can see there is child themes. The parents name is “SÖK LEVERANTÖRER” and the rest are children and “KG Knutsson” even has a grand child. But they seem not to appear like a family in the iPod menu.

        Best Chrille

        • Hi,

          Are you using the same source menu in the drill down widget? the menu online only has 4 links.

          The drill down plugin doesnt actually generate the menu HTML, this is done using the wordpress menu system so you need to check that to make sure it is working correctly

  • Lee, wonderful plugin. I’m looking forward to using it for a couple of applications. But first, I have a problem with implementation that I need to get solved.

    I have 21 items in my custom menu, but only the first 4.1 of them show on the drill down menu. I have the latest version of the plugin and the widget is placed appropriately to allow plenty of room to drop down the sidebar. Any suggestions would be greatly appreciated.

    • Hi,

      Is Wordpress limiting the number of menu items? If you have suhotin enabled on the server this could limit how many items are created. Do you have a link to the site?

  • Hi, AWESOME PLUGINS!!! you should sell on codecanyon! i will purchase them.

    Well i have problems using your plugin on a online store site.

    Here is the url: http://anglotek.cl/?page=store could you help me? i can give you access to the admin if you need, i dont understand what’s the problem.

    Thanks for your help

    My regards from Chile!

    • Hi,

      Do you have access to a page where the menu is installed? Currently its showing the under construction page

      • Hi lee! i just send this email to give you the access to my site to help me with your plugin

        the url is http://anglotek.cl/wp-login.php

        then you can see the site

        • Hi,

          The problem is caused by your theme files reloading jquery. Check the comments section and the Frequently Asked Questions. which has more info on why this is a problem and ideas on how to fix the theme files

  • I love your plugin and really want to use it. However it is not working with the templates I use. I have tried several templates from Theme Forest and as you can see on my website the menu subpages all appear below the main heading instead of hidden until selected. I assume there is a script conflict, but theme forest say I need to change the plugin script not the other way around. Can you help please?!

    • Hi Alex,

      Unfortunately its a theme problem (sorry to pass the buck again!). The theme is reloading jQuery again from its own source after the plugin has loaded – this is the wrong way to do it. It should use the Wordpress enqueue_scripts function to load it only once. Let me know if they still disagree! There isnt much that can be done on the plugin side to correct the problem

    • Maybe try giving them the following source code, which may help explain:

      <script type='text/javascript' src='http://www.appreciatewine.co.uk/wp-includes/js/jquery/jquery.js?ver=1.6.1'></script>
      <script type='text/javascript' src='http://www.appreciatewine.co.uk/wp-content/plugins/jquery-drill-down-ipod-menu/js/jquery.cookie.js?ver=3.2.1'></script>
      <script type='text/javascript' src='http://www.appreciatewine.co.uk/wp-content/plugins/jquery-drill-down-ipod-menu/js/jquery.dcdrilldown.1.2.js?ver=3.2.1'></script>
      <script type='text/javascript' src='http://www.appreciatewine.co.uk/wp-content/themes/Yen/js/jquery.js?ver=1.0'></script>
      

      The top line is jQuery being loaded from Wordpress itself based on a request from the drill down plugin. Next 2 lines are the 2 jQuery plugins being loaded for the drill down menu

      Last line is the theme loading its own version of jQuery from its own files (incorrect) – the 2 jquery plugin files before this are effectively overwritten. If using the enqueue_scripts function it would see that jQuery is already loaded

    • I saw your comments on Theme Forest. It can be fixed relatively easily via the theme files. If you dont get a satisfactory response from the theme author let me know and I can modify the files

  • Can you please take a look at my web page and tell me:
    1. Why links do not scroll to see all links;
    2. Drilldown looks fine in Firefox, bad in IE.

    What have I missed?
    thx, Jake

    • Hi,

      Upgrade to the latest version of the plugin – 1.2. This contains and IE bug fix

  • [...] jQuery Drill Down iPod Menu creates cavalcade down iPod character menus from any WordPress tradition menu regulating jQuery. [...]

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags