WordPress plugin easily creates drop-down navigation

By • January 13, 2008 • 21 Comments

This 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»

Author:

Ryan

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.
Ryan

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.
Pingback: Suckerfish WordPress Plugin | Ryan Hellyer()
Ryan

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!
Miriam Schwab

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?
Ryan

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.
Ryan

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.
Miriam Schwab

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.
Ryan

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.
Ryan

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!
Miriam Schwab

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.
Ryan

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 🙂
Jamie

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?
Ryan

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.
Pingback: Links/Articles Tagged Between March 18th and March 22nd()
Dick

All your links yield 404 errors
- Miriam Schwab
  
  @Dick What do you mean? Which links?
David

Ryan you must be a total retard to jump on a resource site and start bashing someone’s work in order to promote your own. Especially knocking a guy that has jquery effects in his menu which you mock saying “it doesn’t work without Javascript!” Yeah good point. All JQuery is junk because it doesn’t work without JS enabled… You make yourself look so foolish right from your first message.

Thanks for posting this Jamie. Thanks for contributing to the community instead of just making yourself look like a jackass.
Ryan

Lol, that was almost two years ago and I did apologise. I’ve even mentioned these blog comments in numerous presentations since then as a demonstration of how NOT to deal with crappy plugin code.
I wasn’t promoting anything of my own, I’d never done any paid work or created any plugins before this blog post. This blog post is WHY I got into the web development industry. I didn’t like this plugin at all (kinda obvious from my comment about it) and so decided to make something better. Things spawned from there. I certainly wasn’t “promoting” anything since I had nothing to promote :p
BTW, I have no problem with jQuery, just that the menu itself didn’t work at all without javascript on, which is clearly a stupid way to build a menu. My own plugin(s) now use jQuery too.
Hi

James nice work. I’m implementing it and am rather happy. However I have one question….how do I keep the parent to retain the highlight when hovering over a child?
Thanks.
Ryan

@Hi – you need to style the list item rather than the link. Since the dropdown is nested inside the list item, it will retain the styling even whilst hovering over the dropdown. Since the link does not have the dropdown nested inside it, when you move on to the dropdown, any link specific styling will be lost.

WordPress plugin easily creates drop-down navigation

Author:

Read previous post:

Apply different themes to different categories with WordPress Themed Categories Plugin