Dropdown menu plugin
A couple of days ago, a friend of mine complained a bit about not being able to find a decent dropdown menu plugin. He did manage to find a solution, but then I had to tell him that you should really avoid editing the wordpress source code, and that all of this could be pluginized. He told me to go right ahead, so now I had to build a plugin with my big mouth. No problem. This plugin builds a css dropdown menu based on your page list. To get this thing to work do as follows:
- Unpack the contents of the zip to your plugin dir.
- Activate the plugin from your admin panel.
- In your theme's header.php, add the line
<?php gdd_dropdown_menu('Site Home'); ?>. The 'Site Home' string is optional, it defaults to 'Home'. - Admin your plugin through the 'Manage' menu (pretty self explainatory I hope)
That's it, it should work now. (it is beta, so it should work doesn't mean it actually does work, I've only tested it in Wordpress MU and Wordpress 2.0)
download version 0.3 (fix for the IE alignment issues, and the IE7 bug, still not compatible with WPMU)
download version 0.2 (Works with regular Wordpress only)
download version 0.1b (version without admin page, works in regular Wordpress and Wordpress MU)
Please note that the current version 0.2 is an in-between version, I'll start workin on a new version soon sometime maybe, wich probably won't be backwards compatible.
update: it has come to my attention that the dropdown menu doesn't always work well with ie7, so I've made another download for version 0.2, wich has a slightly altered csshover.htc file and a minor modification to the css file. I haven't tested this, but it's worth a try if you're having trouble with getting the plugin to work in ie7.
April 5th, 2007 at 6:05 pm
Mag ik hier wederom een w00t deponeren?
Heb je trouwens nog iets met CSS in deze plugin gedaan? Of moet dat apart?
*zet 'm bovenaan in lijstje van uit te proberen plugins*
April 6th, 2007 at 9:00 am
CSS zit in de plugin, deze werkt dus redelijk OOB. Ik heb nog wel een verlanglijstje voor wat er nog meer in mag, maar dat komt later.
April 6th, 2007 at 10:18 am
"He told me to go right ahead" Nee, er staat niet dat je rechtvooruit kon gaan. Er staat dat je mag uitleven!
"Het told me to life myself out" zou dus beter zijn.
*keeps Zoute (and his plugin) in teh holes*
*or smiezen* FWIW
July 13th, 2007 at 8:25 pm
thanx! going to use it on my new site. works perfect
November 4th, 2007 at 12:00 pm
I used Your Plugin in my website.The IE bug also resolved over there.Thanks for your Plugin...
November 17th, 2007 at 12:47 am
van het moment ik
November 19th, 2007 at 4:55 pm
Good morning! I like the plugin, thank you for developing it. However, I'm having a problem with the CSS in IE. I've downloaded and installed the patch for IE7, but unfortunately, it doesn't seem to be working in IE.
I've got the drop down part working, as you can see from my site, but the placement is not working. The CSS shows that it should be positioned left, which it shows up as in Firefox. However, in IE, it is all the way over to the right. Additionally, before I changed the padding, the navigation links were off the right edge of the page.
Is there a quick fix for this? As I said, other than the placement on the navigation bar, the plugin works perfectly.
Thanks!
Cathy
November 21st, 2007 at 9:02 pm
Hi Cathy, you could edit the plugin and get rid of the table/tr/td tags, it might do the trick.
November 21st, 2007 at 9:40 pm
Thank you very much for providing a solution I've been wanting for a very long time!
November 27th, 2007 at 2:02 am
Hello,
I have cleaned up the CSS on this very nice plugin. If you'd like me to send the revised code, I will be happy to do that. SImply drop me an email.
Regards,
...mark
December 3rd, 2007 at 6:22 pm
Hello,
I have installed the dropdown menus in wordpress, and it works great. My only issue is that the menus only display when I hover. I would like the menu to display always, and just the sub navigation to display when I hover.
How can I do this?
Thanks In advance,
Therese
December 3rd, 2007 at 6:33 pm
I figured out my issue, I could not see the nav bar without the hover because the text was white on a white background. Silly me!
I love this dropdown menu!
Therese
December 3rd, 2007 at 9:29 pm
Thanks for all the comments while I was away being busy.
@Mark: I'm really not currently developing this plugin any further, if you'd like to do so, be my guest. I'm just too busy with other projects.
December 12th, 2007 at 11:55 am
Hey I just wanted to say that I have used your plugin and that it is great.
I had to adjust the css slightly but as far as I am aware it is working perfectly now.
Thanks for such a great plugin
January 8th, 2008 at 12:19 am
Simon, I tried the fix you suggested, but it broke the blog. If I recall, I got a blank screen. Perhaps I didn't edit it correctly, but I believe I took out the proper parts.
I've left the navigation bar alone since November because I didn't want to add any other pages. However, now I would like to, and I realize I need to fix this problem.
Knowing my luck, the problem is unique to my blog and conventional fixes won't solve it. However, just in case, I thought I would ask if you have any other suggestions?
Thanks!
Cathy
January 8th, 2008 at 9:10 pm
Cathy,
Actually, the problem you're having isn't unique to your blog, I've seen it on multiple occasions. So I've made one more update on the plugin, downloadable here. Please test this to see if it works, it did on this site.
January 8th, 2008 at 10:45 pm
Bummer! I tried version 0.3. It worked on Firefox, but the menu disappeared completely in Explorer.
January 9th, 2008 at 5:30 pm
Well, you could edit the main plugin file and delete the
& #160;(without the space between the & and #) bit near the end. But this really is the same version as the one running on this site, so it should work. (unless the menu on this site doesn't work on your machine either)January 16th, 2008 at 3:46 pm
I would like to only list the child pages on the home menu bar. currently I have:
but when i put it in the custom menu file, nothing appears. Is it possible to only list children pages of a single parent?
January 17th, 2008 at 1:06 am
wow... this is exactly what i have been looking for. Still need to adjust the css (it's all off because i'm applying this to a site design after the fact), and to be fair I haven't browser tested yet, but it looks like the basics are there. re: Cathy's problem, I actually had a similar issue with another site not using your plugin and what fixed it was adjusting the css position and z-index attributes. might be worth a try anyway. This could explain the site-specific/not generic nature of the problem.
January 18th, 2008 at 2:03 pm
Rebecca: Well, you could edit the core files of the plugin, or don't use the gdd_dropdown_menu() command, but instead use some code like this:
<div id="dropdownmenu"> <ul><li class="page_item"><a href="/" title="home">Home</a></li> <?php wp_list_pages('sort_column=menu_order&title_li='); ?> <?php wp_register('<li class="admintab">','</li>'); ?> </ul> </div>January 29th, 2008 at 12:17 pm
Hi,
I'd place the admin menu for this under presentation. If there's a new version
February 18th, 2008 at 1:21 am
This is a fantastic plugin!
One problem: I am a PHP and CSS amateur and am having trouble figuring out the dropdown_style.css file completely.
More specifically, I am having trouble figuring out placement of the actaul dropdown windows for each page item (they are all on the far left, I would like them to be under each item).
Also, I am having a little trouble with the padding around the page items in the main menu (the ones that have dropdown menus change size slightly) and also with the colors.
Anybody have a CSS file that has a describing notes in it that could help me out?
Thanks in advance.
discordian.princess@shaw.ca
February 28th, 2008 at 10:08 pm
I have published my revised css modified version at:
http://wordpresshelp.org
On the Downloads page. Enjoy!
...mark
March 12th, 2008 at 1:43 pm
I love the menu sytem but they seem not to work in IE6 and IE7?? can you help me??
March 12th, 2008 at 4:11 pm
rmaspero: I really don't have a clue why this doesn't work on your site, sorry. Maybe it doesn't work well with another plugin, but you're pretty much on your own with this problem.
March 15th, 2008 at 5:37 am
I love the plug in but I just can't seem to get it to work on my site. I have been up all night trying to figure it out but can seem to. I have been putting the code in my header.php file but the pages duplicate and they are all jambled on top of each other. Don't know what to do. Any suggestion would be great thanks.
March 15th, 2008 at 11:08 pm
Travis, looks like you're first calling the wordpress function wp_list_pages(), followed by the gdd_dropdown_menu() part, so your getting two menu's on top of each other. Try removing the wp_list_pages part.
March 18th, 2008 at 5:19 am
I deleted the wp_list_pages but I am still getting having an issue with the site admin and the alignment. Any suggestions would be greatly appreciated. thanks
Travis
March 28th, 2008 at 6:08 pm
I love dropdown plugin. Best one on the web. I am having an issue with getting the dropdown css to validate. I get this error when I run the w3c css validate tool on the site sundaysalon.com:
Property behavior doesn't exist : url("http://www.sundaysalon.com/wp-content/plugins/drop-down-menu/csshover.htc")
Not sure how to fix it so it validates. It's the only thing keeping my css from validating. Any help would be appreciated.
March 28th, 2008 at 7:50 pm
On the question of the menus shifting in IE, I've found this hack to be moderately successful.
The first CSS group only IE7 sees, the second set only IE6 and below sees and the last is for Firefox and other browsers. Adjust the margin to fit your needs.
-----------------------
*:first-child+html
#dropdownmenu li ul {
width: 150px;
height: auto;
top: 100%;
margin:0 0 0 -70px;
padding:0px;
}
* html
#dropdownmenu li ul {
width: 150px;
height: auto;
top: 100%;
margin:0 0 0 -70px;
padding:0px;
}
#dropdownmenu li ul {
width: 150px;
height: auto;
top: 100%;
margin:0px;
padding:0px;
}
June 7th, 2008 at 7:15 pm
Hi~ How do I hide/exclude a page's ID (with dropdown menu)
June 9th, 2008 at 7:10 pm
Peter, inside the dropdown_menu.php file is a line wich goes
wp_list_pages('sort_column=menu_order&title_li=');, this is a native WordPress function, you can edit this to exclude certain pages, see here.June 24th, 2008 at 1:48 am
Hi Simon,
I've used your fantastic plugin on a few sites now, but I have one client with a question which I haven't been able to implement.
The client would like the links to be active across the whole "hover" area, instead of just the actual text part of the link.
I have tried editing the CSS to achieve this, but have been unsuccessful after quite a number of hours.
Can you, or anyone else reading, find a suitable solution to this?
Many thanks in advance,
Mark.
June 25th, 2008 at 7:33 pm
Mark, I don't really see how this can be done using this plugin. This is because the hover area actually is an area defined by li-tags, in this area the actual link is nested, like this:
To achieve what you want I would probably replave the link tekst with an image, so you can define the exact size of the link area.
Hope this makes sence to you.
June 25th, 2008 at 10:13 pm
Hi Simon,
Thanks for your reply. I found another drop-down plugin which provides this function, so I will implement that one instead.
http://www.zackdesign.biz/wp-plugins/42
Using images wouldn't really work in this case because I need to keep the menu dynamic.
Kind regards,
Mark.
July 3rd, 2008 at 3:33 am
Thanks for the plugin! It works extremely well.
For those who install wordpress in a directory on their server but have the blog served from a different directory (such as from the root directory as described here: http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory )
I believe there is a bug that you need to fix. Update your dropdown_menu.php file as follows.
OLD:
function gdd_dropdown_menu($home='Home') {
$gdd_wp_url = get_bloginfo('wpurl') . "/";
NEW:
function gdd_dropdown_menu($home='Home') {
$gdd_wp_url = get_bloginfo('home') . "/";
Thanks,
Randy
August 14th, 2008 at 11:26 pm
Ik ben beginneling met wordpress, probeer een dropdown menu er in te krijgen, maar krijg niet meer dan een lijst zie mijn site; http://www.huisartsenhulp.nl/, waarschijnlijk doe ik iets fout, misschien kan iemand snel aangeven waar het mis gaat.
August 15th, 2008 at 4:26 pm
Hij doet het hier gewoon Midas, alleen de plaatsing is niet helemaal goed.
November 14th, 2008 at 4:38 pm
Hi there,
I found your plugin...and I have to tell you that it is excellent and I want to use it. However, i installed it without any great problems, and it is working fine with firefox 3.
Now the menu does not display at all with IE6 (I don't know for IE7) but IE6 is definitely not working. With Opera the menu is working great!!
Is there maybe a problem with the csshover.htc file? Can you help me to fix this issue. I know php and html, but I am not used with the troubled of IE6.
thanks for your great work
November 15th, 2008 at 7:19 pm
Hi thierry, well, yould try the csshover.htc from this archive, it's a longshot, but it might work.
January 21st, 2009 at 11:35 am
thanks a lot for the plugin. see it in action over here http://www.art-motorsports.com/wordpress/, with a bit of modification. the site's not ready yet.
March 6th, 2009 at 10:59 pm
Hi, great plugin. Love it especially for working with WP 2.7 (se here: http://www.utrikesperspektiv.se/). Just one question, though: is there a way of making parent tabs unclickable? That is, if I have under categories under a menu item, can I make it impossible for the reader to click that item itself?
Thx!
March 8th, 2009 at 11:25 am
Hello Dennis, this can be done by using a custom menu file instead of the page list to build the menu . This custom menu file is localized at wp-content/plugins/drop-down-menu/custom_menu.php and can be changed at will, all you need is a little knowledge of html.
March 11th, 2009 at 1:52 pm
Excellent plugin! By far the best one I've come across yet.
I do have one question though, I can't seem to move the menu around on my page. For instance I need to move it up so its not riding the border of my header. Any ideas?
March 11th, 2009 at 9:39 pm
Hello Scott, in the plugin folder find the file dropdown_style.css, in that file find the code
#dropdownmenu ul { width: 90%; list-style-type: none; padding: 0px 0px 0px 0px; margin: 0px 0px 2px 0px; z-index: 500; position: absolute; bottom: 0; left: 20px; }The placement is done with those bottom and left properties.
March 12th, 2009 at 12:23 am
Thx for the previous answer. I have another question, though: I've been playing around with the "border-radius" property (makes edges round in Firefox and Safari). I've succeeded with most of it, but one final touch would be to make the dropdown subcategories round at the lower edge. From where I'm standing this code should work (but then again, I'm just a n00b ;P):
`#dropdownmenu li {
display: inline;
float: center;
position: relative;
text-align: left;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 16px;
padding-left: 8px;
margin: 0px 0px 0px 0px;
height: auto;
font-size: 20px;
font-weight: bold;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomright: 3px;
-khtml-border-radius-bottomleft: 3px;
-khtml-border-radius-bottomright: 3px;
-webkit-border-radius-bottomleft: 3px;
-webkit-border-radius-bottomright: 3px;
border-radius: 3px;
}
#dropdownmenu li ul li {
text-align: left;
width: 220px;
height: auto;
min-height: auto;
display: block;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-khtml-border-radius-bottomleft: 0px;
-khtml-border-radius-bottomright: 0px;
-webkit-border-radius-bottomleft: 0px;
-webkit-border-radius-bottomright: 0px;
border-radius: 0px;
}
`
This, however, does nothing, the borders are as square as ever. If I only put the border-radius code in the "#dropdownmenu li" id, each element in the sub-category becomes rounded...
Ideas?
Thx for your help!
March 12th, 2009 at 12:30 am
I'm assuming I just uncomment that section correct? I've tried that and also tried making outrages location assignments like left 500px and bottom 200px and it does not seem to move. Any suggestions?
March 12th, 2009 at 10:01 am
@Dennis: That's way out of my knowledge of css, sorry but I can't help you with that. It does seem to me however you've got the styles for those two items mixed up, I'd think the li section should have radius 0, and the li ul li should have radius 3. But again, I really don't know anything about these css properties.
@Scott: That section is not commented, at least not in the original files. I've changed the values here on this site, and it worked. You could also change 'bottom' into 'top', making the line
top: 0;. And be sure you refresh the page, it's happened to me before that I didn't see changes I made to the css, only to find out later that the css file had been cached by my browser.March 12th, 2009 at 3:29 pm
Thanks Simon! I think I got now. Thanks again for the great plugin.
March 23rd, 2009 at 2:21 am
Hi, plugin is just what Im looking for. Have installed on a site (wp 2.7.1)im working on. Installed, activated, but when I try to go to edit custom menu file, Im getting urls does not exist- link is trying to go to:
http://mydomain.com/wp-admin/templates.php?file=wp-content/plugins/drop-down-menu/custom_menu.php
File not found.
If I modify the urls to:
mydomain.com/wp-content/plugins/drop-down-menu/custom_menu.php
I see a web page that shows, item1, item2 etc.
Have I got something wrong here?
I cant work this out.
Unfortunately, cant post a urls as the site im building is in sandbox - no dns over as yet.
I may be being dumb here, would appriciate any advice on getting this working.
Thanks
March 23rd, 2009 at 4:01 pm
Hi Tia, the plugin probably isn't all that compatible with 2.7, and this is causing your problem. I'd suggest that if you want to use a custom menu, you're better off editing the custom_menu.php file in an external texteditor anyway, this file is just plain html and should be pretty self-explainatory.
April 2nd, 2009 at 4:10 am
I love this plugin,
however, how do I remove the original 'home' link? I have two: a default 'home' and then the 'home' page that i have set as my parent main page
April 2nd, 2009 at 4:19 am
fixed the above problem (changed the 'home' to '' in the header section).
how do i adjust the size of the font?
April 3rd, 2009 at 12:26 pm
Will, just add a font-size: property to the #dropdownmenu entry in the file dropdown_style.css and you're fine.
April 3rd, 2009 at 5:23 pm
thanks simon. I figured that out just before you posted.
last question, why would some people not see the menu? I've tried on a few different machines and it shows up on all. However, some partners cannot see the dropdown menu at all. What possible difference in browsers would lead to this?
April 3rd, 2009 at 9:46 pm
The only problem I know of is with internet explorer, and I thought I had that fixed. Wich browsers are giving the problem?
April 6th, 2009 at 9:55 pm
it looks like ie6.
here is my test site page - http://preview.tinyurl.com/co3a4s
April 7th, 2009 at 9:53 am
Will, could you try to replace your csshover.htc file with the one found here? This is an older version of the file, and the one I'm using on this site. It could give some problems with ie7 though, so backup tho old file before you do so.
April 7th, 2009 at 10:08 am
You could also try to download the plugin again, I've updated it with yet another csshover.htc which might do the trick.
April 7th, 2009 at 9:14 pm
thanks simon.
neither .htc file worked. half of the ie6 clients see a menu out of position at the bottom of the screen and half don't see it at all.
would the half that don't see it be a browser-specific problem (such as their employer turning off java, etc.?)
how do i position it in ie6 differently to make it match the firefox output.
thanks
April 7th, 2009 at 9:35 pm
2nd part of the last post - why on earth would we have two different results with the same plugin on the same browser (ie6, I tested visiting this page on ie6)? did you manage to use the tinyurl link to see the page?
thanks so much for your help.
April 8th, 2009 at 3:38 pm
I did see your page Will, and it looks fine overhere (on a mac). I really can't tell how these changes between the same browser got there, but to be really honest; I wouldn't be bothered if my site doesn't display corectly in ie6. It really is an older browser.
However, you do have a point with the java, that is if you mean javascript, because the .htc files are javascript I think. And it won't work in ie without this file.
April 8th, 2009 at 4:59 pm
Thanks Simon, I really appreciate the help. I think ie6 is only some 17% usage now...
I tried using conditional comments in the drop down menu php file to use a different drop down css file for ie6 but it kept changing FF as well. I feel like i'm SO close to figuring it out and I keep hitting dead ends haha. Oh well, I better drop it now - thanks again.
April 8th, 2009 at 9:01 pm
Maybe only use a different css file if the user disabled javascript?
April 23rd, 2009 at 12:59 am
I need help after i installed it, and added the code to d template page i cant see nufin on, am using wordpress 2.7
April 23rd, 2009 at 8:47 am
Ayo, do you have a link to go with that?
May 31st, 2009 at 11:44 am
Hi! It's a wonderful plugin, thank you very much, but I have a problem when publishing my website from localhost to remote: it all worked perfectly when I was developping the site on my localhost, but now that I have placed it online on a subdomain (to keep it hidden until it's finished...) the plugin doesn't work, as I just see the basic wp-list-pages displaying in a text format... All the rest works perfectly, only this plugin is giving me problems. Please, any suggestions? Thank you very much
May 31st, 2009 at 1:23 pm
Ok, solved! I cancelled the .htaccess from the upload, and now the menu displays correctly...
June 16th, 2009 at 1:30 am
Thank you for the plugin, Simon - it's excellent.
One tiny quibble, however. How do you get rid of the link titles in the nav menu?
From functions.php, I added &exclude=256,257,258 there below and now problem solved for the leften-most link to the blog homepage.
`
`
However..., this trick doesn't work for ordinary pages.
` `
Can you please offer some advice for solving this?
Thanks.
June 16th, 2009 at 1:15 pm
Hi there AK, the easiest way to do this (I think) is to use the custom menu file to build the menu instead of the list pages. This gives you full control over how your menu is built. An example custom menu file is include in the zipfile for the plugin.