WordPress plugin easily creates drop-down navigation
January 13, 2008 – 11:40 am | by Miriam SchwabThis is really handy: the Drop Down Menu WordPress plugin creates a drop-down navigation scheme where sub-pages appear under their parent pages in the menu. All you have to do is upload, activate, and add one snippet of code to your template files. The menu can be styled in the styles.css file in the plugin’s folder.
See the demo here.
Wordpress plugin for creating a drop down navigation menu using JQuery»
15 Responses to “WordPress plugin easily creates drop-down navigation”
By Ryan on Jan 14, 2008 | Reply
That looks like a pile of junk. It doesn’t even work with Javascript turned off.
Dropdown’s are much better created with a change to your style sheet and a link to a SuckerFish dropdown javascript to kick it down in older versions of IE.
By Ryan on Jan 14, 2008 | Reply
It looks hideous, but here’s a demo of what I’m talking about … http://ryanhellyer.net/test/wordpress1/
This was created by adding the following to the themes header.php file between the <head> tags.
<!– RYANS SUCKERFISH ADDITION –>
<style type="text/css">
#nav, #nav ul {padding:0;margin:0;list-style:none;line-height:1;}
#nav a {display:block;width:10em;}
#nav li {float: left;width:10em;}
#nav li ul {position:absolute;background:orange;width:10em;left:-999em;}
#nav li ul ul {margin:-1em 0 0 10em;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
</style>
<script type="text/javascript">
<!–//–><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//–><!]]>
</script>
<!– END OF RYANS SUCKERFISH ADDITION –>
and the following wherever in the theme that you want the dropdown to appear
<!– RYANS SUCKERFISH ADDITION –>
<ul id="nav">
<?php
wp_list_pages(’title_li=&depth=3′); ?>
</ul>
<!– END OF RYANS SUCKERFISH ADDITION –>
I borrowed the dropdown code from HTML Dog, but there are heaps of examples of these things available and they’re not too difficult to build from scratch if you know a little about CSS.
I don’t have the foggiest idea how to build a plugin, but I can’t imagine it should be too difficult to dump the stuff which I’ve manually added to the head in via the wp_head function. Then you just need to add the second bit of the code into your theme to display it.
I haven’t tested this beyond Firefox as I’m trusting the code I got from HTML Dog to work fine. But in principle it should work cross browser back to IE5. Although IE5, 5.5 and 6 will require the javascript which I put into the head to trigger it. All modern browsers will behave fine without the javascript.
If anyone’s going to use this on their own site, you should make sure you put the CSS and javascript into separate files and in particular make sure the javascript is inside IE conditional comments as it’ll save you a little bit on each page download. Since this is just a quick demo I didn’t bother though.
By Ryan on Jan 14, 2008 | Reply
I’ve now turned my dropdown into a plugin … Ryan’s Suckerfish Dropdown Plugin
BTW, making plugins is a lot easier than I thought. It only took a few minutes to figure it out. I used the hello dolly plugin as a base and just hacked out the bits I didn’t need, changed a function and bam … it was done!
By Miriam Schwab on Jan 16, 2008 | Reply
Ryan, my employee tried your plugin and it didn’t work! I still haven’t tried it out for myself to see, but do you have a working example of it that you can show?
By Ryan on Jan 16, 2008 | Reply
Hmm, that’s odd. Did they definitely have sub-pages setup in their pages navigation? Like I said, it’s pretty crude, but it’s so crude that I didn’t think it would be possible for it not to work. I tried it on my test site and after getting errors the first 5 times, I eventually weeded out the bugs and it worked fine and is still working now.
You also need to add the following to display the menu:
<ul id=”nav”>
<?php wp_list_pages(’title_li=&depth=3?); ?>
</ul>
I plan to have another look at it this weekend and I’ll improve on it and turn it into something usable as it’s too hideous looking to be of use at the moment.
BTW, for some reason my second post above is not displaying. An excerpt of it was showing up in the sidebar originally, but the comment has never showed here in the actual blog post.
By Ryan on Jan 17, 2008 | Reply
Hopefully this comment doesn’t disappear like my last two!
I can’t find anything wrong with the plugin, it is functioning fine for me. However I have updated the look of it so it isn’t quite so ugly and have modified my blog post so hopefully the instructions will be very simple to follow. Unfortunately it’s now not working in IE6
So I’ll need to fix that before anyone can use it in a live environment (should be fixed on the weekend some time - I’ll post back when it’s fixed).
Ryan’s Suckerfish dropdown WordPress Plugin
I can’t find any examples of other plugins that can do this anywhere. This seems odd to me since I thought lots of people would be interested in this functionality, but I guess not.
I’ll look into adding categories, archives etc. to the dropdown on the weekend. I’m pretty sure I know how to link to external files with my plugin now too so I should be able to get the CSS and Javascript out of the HTML now too which will help reduce page download sizes a little.
By Miriam Schwab on Jan 17, 2008 | Reply
Ryan - your comment is visible! I’m sorry about this comment annoyingness. As soon as I have some time, I’m going to try to figure out what’s going on with that.
Re the plugin - I’m going to test it out myself to see how it works. I’ll let you know once I’ve gotten to it.
By Ryan on Jan 19, 2008 | Reply
The plugin is now looking much better. I’ve heavily modified my original post as it was a bit waffley before. Hopefully someone will find this useful
It should work fine in all modern browsers (fingers crossed) and I’ve moved the Javascript and CSS to external files. The Javascript is now stored in IE conditional comments too, so modern browsers wont even need to download it.
ryanhellyer.net/2008/01/14/suckerfish-wordpress-plugin/
I think I may know what your employees problem was. WordPress messed up the code syntax in my blog post. But that is (hopefully) fixed now.
By Ryan on Jan 19, 2008 | Reply
This worked out quite nicely for me!
I just got offered a nice pile of money to build someone a custom dropdown menu a few minutes ago
Actually it’s a flyout menu, so the same thing but flopped on it’s side.
I might make a flyout plugin for WordPress next week. Watch this space!
By Miriam Schwab on Jan 19, 2008 | Reply
Ryan - that is really impressive. Javascript in conditional comments? You’ve thought of everything. We’ll check this out again.
That is so great about someone offering you money to do web work! If you can, please send a link once it’s done so we can see it. This is a great way to supplement your career as a starving student.
By Ryan on Jan 22, 2008 | Reply
I’ve done some improvements to my plugin, including making it easier for beginners to use. It’s also been submitted to the Official WordPress plugins site, so hopefully it will get used by a bunch more people shortly
Psychicgreek.com is using it in a live environment
By Jamie on Jan 31, 2008 | Reply
New version of the Drop Down Menu WordPress plugin available.
This ‘pile of junk’ plugin as Ryan describes it as does the following
-auto highlights the current page you are on.
-slick slide down and date jquery effects
Version 0.02 now now works without javascript. Thanks for the feedback!
Also version 0.02 allow you to rearrange the order of the pages, to put a link to your blog into the menu and have the parent pages click able or not according to your needs.
So in other words. My plugin has more features than your first one. Yet you describe my plugin as a pile of junk?
Also why bother having javascript in your plugin at all. You just replace the css hover with a javascript mouse over. Why bother include javascript at all?
By Ryan on Feb 1, 2008 | Reply
Perhaps I shouldn’t be so abrupt when critiquing plugins on here. I wasn’t trying to offend.
The reason I use Javascript in a conditional comment is because IE6 will not function without it. If you turn off Javascripting and view your demo page in IE6 or lower, the dropdowns do not work anymore. They also look a bit odd - probably due to a CSS problem.
Your plugin does indeed have different features than mine. Which is better is a matter of opinion as they are quite different.
I don’t intend to add highlights for the active page or any fancy graphical effects. I’d rather keep things simple by using a standard Suckerfish dropdown.