Updated 21st June 2011
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.
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 (9,786)
Installation
- Upload the plugin through `Plugins > Add New > Upload` interface or upload `jquery-drill-down-ipod-menu` folder to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- In the widgets section, select the ‘jQuery Drill Down iPod Menu’ widget and add to one of your widget areas
- 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:
- 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
- Back Link – the previous menu option is displayed as a back link above the menu
- 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 (9,786)
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.
Donate
We develop & support all of our plugins for free. If you use this plugin and find it useful please consider a donation as a token of your appreciation
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.
total
twitter
facebook
google +1
linkedin
stumbleupon
digg
delicious
pinterest
reddit
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:
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
Lee,
Thanks for the info, updated to ver 1.2 and IE now looks great. About my other question, how do I scroll to see all links. My site: http://www.safie.hq.af.mil/afrpa/jaketest/
thx, jake
[...] jQuery Drill Down iPod Menu creates cavalcade down iPod character menus from any WordPress tradition menu regulating jQuery. [...]
Hi Lee ^ ^ ‘
Well, here I am testing various menus to deploy the site on my blog, and see which one fits best in my blog.
Now I ask you: is it possible to deploy this menu Blogger (Blogspot)? I tried it here and look what it did:
http://wmastermenu.blogspot.com/
in the “Drill Down jQuery iPod Menu”
Thank you for your Lee o/
Wellington.
You have jquery code initialising both the slick plugin and the floater plugin but without the jquery plugin files so the page has a javascript error preventing the drill down menu initialising. remove the following:
<script type='text/javascript'> jQuery(document).ready(function($) { jQuery('#dc_jqfloatingmenu_widget-6-item').dcFloater({ event: 'click', width: 150, location: 'bottom', align: 'right', speedMenu: 400, speedFloat: 1800, offsetLocation: 10, offsetAlign: 10, autoClose: true, tabClose: true, tabText: 'Floating Menu 4', idWrapper: 'dc-floater-6' }); }); </script> <script type='text/javascript'> jQuery(document).ready(function($) { jQuery('#dc_jqslickmenu_widget-6-item').dcSlick({ location: 'bottom', align: 'right', speed: 'slow', offset: '300px', autoClose: true, tabText: 'Slick Menu 4', idWrapper: 'dc-slick-6' }); }); </script>Hi Lee ^ ^ ‘
once again thanks for your patience in helping me =D
now I have another question
Here the Bg and the rest of the images do not appear on the menu?? you have any ideas? out that the menu is 100% functional o/
once again grateful for the attention!
Your style sheet, demo.css, is using a dynamic selector (#dc_jqdrilldown_widget-%ID%-item), which requires php code to create the actual menu ID.
Change the CSS selectors:
FROM
TO
Hi Lee ^ ^ ‘
well, I made the changes in Demo.css but still the same problem the pictures do not show up =(
once again thanks for your attention!
Wellington o/
The selector is missing “#” – #dc_jqdrilldown_widget-6-item
everything went well ^ ^ ‘
Lee, you’re the ultimate guy o/
once again thanks for your patience in helping me xP
grateful.
No problem
[...] This plugin creates a widget, which allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. Drills down menus are ideal for managing large, complicated menus in a small, compact and fixed area. Features include – handles multiple levels, saved state using cookies and multiple menus on the same page. By Lee Chestnutt . Visit plugin site [...]
[...] Plugin Homepage » [...]
First thanks a lot I know Hebrew make it hard to help.
I will explain what I do and I hope it will help you help me. First I Build a menu 3 levels and then I put him I the jQuery Drill Down iPod Menu
Home page
————Menu 1
————Menu2
————………
————Menu x
In this menu I can see all but when I make one look like this:
Home page
Menu 1
Menu2
………
Menu x
I see only 9 or 10 menus
i can send you pic if you like.
tamir levy
Tamir – any chance you can send a screen shot of how the menu looks in the menu admin area? Then I can understand better how it should look on the page.
thanks
yes please advice mail and i will send
i add the pic to my home page you can see it there
http://linshom.org
first two menu1 and the display next menu2 and display
I disabled everything. Widget page takes ages to load and then doesn’t load properly.
To be fair, it was working okay last night except for the menu items missing. The only thing I experinebted with today was switching on the Save Menu State option. However, I can’t switch it off now – is there a field in options table which I can amend to switch it off and try again?
PLaying around with this on my local server. The plugin appears to cause a lot of problems when trying to display the widget screen in the control panel too.
What kind of problems?
We also run up to 8 copies on the demo page without any difficulty. Could be conflicting with other plugins
Just to let you know – the server appears to be down now… I’ll post again when my provider reboots
Any ideas?
Hi – havent had chance to take a proper look yet. Will check and let you know
Its now showing 9 items – don’t know what I did, but its still not the full menu.
Yes, try http://www.bhspares.co.uk/
Thanks!!
Hi
I am trying to get the JQuery Drill Down iPod Menu plugin working on my site. However, while the menu appears to be working, it is only showing the first six parent items of the menu – I have upwards of 12. I have tried reinstalling etc but to no avail. The menu is set up corectly, as it displays properly using other methods. Can you suggest anything. Thanks.
Hi OldH – Do you have a link I can take a look at?
i have the same problem. show only some of the menu but if i put all under home page i can see them all. need help please.
i tamir – where exactly in the menu do you see the problem – is there a specific menu-item ID? unfortunately its difficult to check since I dont understand the characters!
[...] jQuery Drill Down iPod Menu Plugin [...]
[...] jQuery Drill Down iPod Menu Widget allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. [...]
[...] jQuery Drill Down iPod Menu Widget allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. [...]
[...] jQuery Drill Down iPod Menu Widget allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. [...]
[...] jQuery Drill Down iPod Menu Widget allows you to create a drill down ipod style menu from any WordPress custom menu using jQuery. [...]
[...] is the original post: WordPress Plugin – jQuery Drill Down Menu Widget « Design Chemical … Share and [...]
[...] more here: WordPress Plugin – jQuery Drill Down iPod Menu Widget « Design … Share and [...]
[...] Here is the original post: WordPress Plugin – jQuery Drill Down iPod Menu Widget « Design … [...]
[...] an alternative to the vertical accordion menu check out our Drill Down iPod Style Menu Plugin. Share: Related posts:Wordpress Plugin – jQuery Drop Down Mega Menu [...]