Dropdown Menu widget adds a beautiful, CSS only dropdown menu, listing pages OR categories of your blog. It allows you to chose vertical or horizontal. It supports multiple instances. You can select a theme for your widget from the Dropdown Menu Settings page. If you don’t like ready-made templates you can create your own theme for the menus using CSS. Hope you like it. Want your own dropdown theme? Request theme
You can download the plugin here.
Installation
- Upload the plugin to your
/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- Go to Appearance -> Widgets to add this widget to one of your sidebars
- You can also use
<?php shailan_dropdown_menu(); ?>in your template to display the menu. - Don’t forget to change menu settings from Settings -> Dropdown Menu panel.
Frequently Asked Questions
I added this widget but it looks all weird!
This widget is intented for wide header widget areas, not regular sidebars. You can add a sidebar to your theme or you can get a all-widget theme from
Can i create my own theme?
Since this plugin works on CSS, if you are capable of writing CSS, you can customize the theme as you like it.
I don’t know CSS, how can i customize it?
Plugin comes with various themes already installed. If you want something different, then you can request a new theme.
I found a bug! Where do i submit it?
You can submit errors and bugs using the online form.
Todo
- Add option for custom menus
- Add some more themes.. Request a theme
- Request a feature
Download
You can download the latest version of the dropdown widget here.
Donate
If you like this plugin you can donate using the button below:
Loading ...
man, I don know but this widget crashed my site as soon as I activated it everything was sent tumbling b4 crash
Can you send me your wordpress url so that i can see what the problem is. Plugin works on wordpress installations higher than 2.8. That may be the problem.
Nice plugin. Working fine in my site.
Thank You
Hi, is there any way to add a custom link to the menu. E.g I want a link to HOME page with text HOME in the current menu.
For now it doesn’t support custom added links. Later versions of the widget includes “Home” link for the Pages type menus. Did that help?
Where should I change the z-index? The drop down is going behind my container.
You can change it in the
shailan-dropdown.css. I have a similar issue right now. I will fix it and update the plugin soon.I must have tried more than a dozen z-index locations and tests? nothing? drop-down is hiding behind my #content from theme css. Which takes priority? float or z-index? So far you’ve come the closest to what I want without having to manually embed it in the code, which I’m trying to avoid. Thx, for getting this far.
Found my problem! It was caused by an overflow set to hidden on original theme. Once I turned the Overflow to visible it worked! The whole time I thought it was z-index or float it was really sidebar overflow.
Hope this helps your new plugin update?
Oh that’s great you solved it. I will add this to troubleshoot items. My trouble still continues though. My two menus on top overlap each other. I gotta solve this :/
Hi I am now facing a new problem. The extreme right menu category has a sub category with another sub category. That menu opens to the right side away from the visibility of the browser. Plz spare some time and check my homepage to see the problem.
Television menu on the right with sub menu Sony.
Hi Shailan, I have just installed your Dropdown Menu plugin but have difficulties tuning it. In particular, how can I make the categories horisontal, instead of verical? It seams that there is no option to do so…
Hi great plugin, it works great on my site but I am having trouble using it with the Facebox plugin. Which file would I need to edit, and where, so that I can add the ‘ rel=”facebox” ‘ code so that the links in the menu will open up the ‘Facebox’ popup instead of a regular page.
Thanks
This can be done by editing shailan-page-walker.php. Open the file and find
<a href="' . get_page_link($page->ID) . '" >(line:81). Add your rel code in just before closing “>”. Like this:<a href="' . get_page_link($page->ID) . '" rel="facebox" >. This will make any page menu have the rel code you entered.Hi Shailan,
Many thanks for a great plugin.
I’d really like a feature to enable pages to be excluded from the nav menu based on some criteria, such as a custom field – eg only pages with nav_menu = 1 would be on the menu. That way, the site designer can be sure only pages explicity setup to be on the menu would actually appear there. Is this a feature you’d be interested to add – I could help with the code if required?
-Best wishes, Roger.
My suggestion is almost the same as Roger’s on January 11. I want the drop down to show one or two pages out of a total of more than 50 … so maybe an “include” pages option in addition to, or instead of, the “exclude” option would work. It’s a very good plugin and works well, even if it’s necessary to list all of the pages to exclude. Thanks for the plugin.
Very nice plugin! I wonder if it is possible to arrange the pages in an alphabetic order? that would be great. as you can see now on my website http://www.pathofysiologie.nl/ the first menu starts with an O and the second with an A. can I change that order?
Nearest I’ve got yet to a ‘plug-n-play’ replacement for the default WP menu.
I’m having trouble positioning it to replace the former theme menu (Snowblind by Bavotasan http://themes.bavotasan.com/our-themes/basic-themes/snowblind but that’s probably my ineptness with CSS ( I HATE css with a vengeance)
One weird behaviour is in the WP admin interface for the plugin, though. The theme chooser doesn’t work and won’t drop down….unless I select the theme chooser (it gets outlined in blue but won’t actually drop down) and then select and copy a piece of text on the page (any text)…then the drop down options suddenly appear! As I say, this is in the plugin admin. Well weird!
Must have been something temporary because I can select the themes now! I’ve also managed (kind of!) to position the menu roughly where I want it, more by luck and a prayer than any css knowledge!
What I want to know is, can I limit the level depth of the menu? I only want to show one level of drop down (the first group of sub-pages), even though I have three levels of links.
Can this be altered somewhere in the plugin file?
thanks
Hugh
Hi Shilan,
Your drop-down menu is very nice and it works fine on my page, but I have aproblem to make it work on Internet Explorer 6. Is there a solution?
Thank you for your answer, Ethel
Hi,
I am using the dropdown menu on http://www.wllfa.com. It’s a great plugin but I am having the same issue as Ethel — my client I am designing the website for uses IE 6 and the dropdowns have problems (see the screenshot below). They can’t install IE 7 or 8 on their work computer since they are not admins. Are there any fixes for older browsers?
Screenshot of the issue: http://img6.imageshack.us/img6/5770/screenshotbg.gif
i cant get it work on IE6. my dropdowns wont show up. :(
I am having the problem with the overlapping containers…I did not see a fix…great freaking plugin by the way! I would love it if I could use it in my site.
thanks
r
I changed the overflow visible in the style.css but nothing changed…is there somewhere else that it needs to be changed… I looked through the docs for the widget itself but could not find where there was anything about overflow…please help!
Thanks
R
Thanks for a great plug-in…
Is it possible to disable the top-level parent link?
That page on my site is blank, only the nested pages have content.
Even if I could change the link to ‘#’ that would do it.
Thanks, Rob.
I’ve found this plug-in which solves the problem, it allows you to change the link of a page to anything you like, including ‘#’
http://wordpress.org/extend/plugins/page-links-to/
Hi,
I just recently installed this and was wondering if it was possible to change the order the posts line up in? As in – would I be able to do it alphabetically? Or a custom order?
Thanks,
Dan
The reason this isn’t working right on IE6, 7, OR 8 Is because the author made no attempt to make it work. It is impossible to make this work in it’s current state without editing the entire hover states of the CSS, as well as the HTML markup to be compatible with CSS hover action.
The > operator has no support in IE until IE9. However, this project http://code.google.com/p/ie7-js/ .. If you put that into your site it will allow it to work, since it gives IE6, 7, and 8 full support of the > operator (which is key in this case for the menu to work)
To the author: My suggestion would be to put a note about that on the main page, or to change the menu so its compatible. I don’t think offering wordpress themes that deliberately ignore IE is a good idea without some sort of note saying it won’t work. Or at the very least say that it won’t work in IE.
The dropdown ability of the menu depends on li:hover which is not currently supported by older versions of IE. > is just another fix. For now this plugin only works for smart browsers.
Thanks for your additions.
Fix will be added soon.
li:hover is supported easily with the IE9.js as well as others that don’t lag.. IE still reads li:hover but does nothing.
> tells CSS to use the element after the one specified, IE reads this entire entry as UNDEFINED and can’t do anything with it, which requires IE9.js specifically to allow this to work (or lengthy scripts that have similar functions). Currently IE5.5 through 7 have no way to mimic that behavior in CSS, and loading IE9.js adds several seconds of “frozen” load time to a page.
The only way to make it work natively in IE is to change your HTML markup to use hidden child elements inside of neighboring elements. Unfortunately it’s technically not valid HTML to put block elements inside inline -.-;; well, with the li:hover js fix it’s fine – my opinion is to include that js fix in and then change the HTML markup, put the hover menu ul’s inside the parent li