WordPress Dropdown Menu Plugin
Published January 14th, 2008 under Plugins
Note: This plugin has been superceded by the ‘PixoPoint Menu Plugin‘.
This plugin generates the code necessary to create a Son of Suckerfish WordPress dropdown menu.
Download
The plugin is available for download here … Suckerfish WordPress Plugin
Installation
Add the following code wherever you want the dropdown to appear in your theme (usually header.php) and activate the plugin in your admin panel.
This code adds a button for your home page and dropdowns for your Pages, Archives, Categories and Blogroll.
<?php if (function_exists('suckerfish')) {suckerfish();} ?>
Customisation
You can modify the look of your dropdown by using our new Online Suckerfish Dropdown CSS Generator. The generator has been designed with this plugin in mind, so just copy and paste the CSS code from the generator to the plugins options page.
Credits
Thanks to Patrick Griffiths and Dan Webb for their article which we used as a model for the CSS used in this plugin. And thanks to Miriam Schwab for writing the blog post which motivated us to create it.
Support
For support, please visit the dropdown menus board in our support forum. Please note that many new features are available in the ‘Multi-level Navigation Plugin‘ so you should check that out before asking any questions about this plugin.
Ryan says:
Kevin – You are applying some styles via the #menu DIV tag which is surrounding it. Try removing the styles or the DIV and the menu will be able to drop down.
Then you have another problem as although the menu is then able to drop down, it’s dropping down behind the main content box. Try removing the position:relative from the following in your CSS. Hopefully removing it doesn’t mess your layout up. But it should fix the inability of the menu to hover above the main content.
.CON {background: #fff url(images/BGC.gif) repeat-y center;
width: 1000px;
float: left;
position: relative;
padding: 0px}
Also, I’ve taken a look at your style.css file and I see that you’ve added the suckerfish CSS code to it. That will be quite an awkward way to modify the style of the dropdown as those styles are replaced by the built-in style sheet which comes with the plugin. If you want to modify the CSS of the dropdown, it’s easiest to modify the suckerfish.css file for this reason.
Plus you have two </body> tags in your HTML, this doesn’t seem to be causing any problems, but would be good idea to fix anyway in case there are some unknown problems associated with doing that. Plus your code won’t validate.
March 3, 2008 at 10:09 pm # //
Ryan says:
Brit – Sorry, I forgot to reply to you second question!
The delay time can not be changed. It is instant and I don’t now how to change that. It could probably be controlled by Javascript, but I know next to nothing about Javascript so can’t help sorry.
I suggest posting a question at http://sitepoint.com/forums/ in their Javascript section. If you do this and find a solution I’d love to hear about it as it is something I’d like to add as an option in future versions of the plugin.
March 3, 2008 at 10:17 pm # //
Ryan says:
Mike – I saw some incoming WordPress links from myslavelake.com appear in my stats program so took a look. Is this your site perhaps? The link you left in your comment was to slavelake.com which does not look like it was built with WordPress at all.
If that is your site, then what problem are you having with your sidebar exactly? I couldn’t see any problems when I viewed it with Firefox2.0.
March 4, 2008 at 1:52 am # //
Ryan says:
Mike – The menu on myslavelake.com looks very nice. I like the addition of transparent menus. I was meaning to get round to figuring out how to do those and your example (I’m assuming that is your site) has been very useful in this regard. I’ve got it working in the last few minutes on my test version of the plugin and will be looking to add that functionality as an option in the next version.
March 4, 2008 at 2:06 am # //
Andy says:
“Andy – no, I haven’t figured out a way to do that reliably yet. That is on my list of things to do though.”
If there were a way to set the style of the parent li then you could add a style to cover an li with a child menu. Unfortunately the only way I can think of doing it would be with JS, something I’m trying to avoid. If only CSS allowed us to target the parent……. li ul<li or something….even li+ul would do it if it worked, but the adjacent selector doesn’t seem to stick in this instance.
March 4, 2008 at 4:45 am # //
Kevin Russell says:
Thanks so much Ryan!
As you can tell, I know enough to be dangerous with PHP and CSS – however I’ve actually added form fields that then have to process information to things. CSS was throwing me for a loop here though.
Thanks for spotting all that! I removed the extra body tag (that was me adding that since I saw it missing – not realizing Wordpress automatically adds it).
Also, was finally able to get the menus working! You’re right, I did have to place it before any of the Menu divisions – however I DID have to keep my menu division in because it messed up the layout when I took it out. However, for a workaround (since it left a blank spot), I just made the height 0px in the style sheet for it.
I’m sure there is a better way to fix it but I’m still learning here.
And – you got me on the right track on the position: relative removal. Not only did I have to remove it there, but in about 3-4 other spots – including in the Post Header and Post sections of the CSS. Once I did all that, it finally displays OVER everything instead of under – like it’s supposed to.
Lastly, thanks for the info on your custom CSS (ryans_suckerfish.css). I had used your beta initially – but it wasn’t wanting to let me fix the test (assumed it was overriding with values from the Admin plugin) – so I went back to the original version. Ironically, I had been able to override the values in my main style.css in your beta – but in your original version I reverted to, it apparently gets the info from your ryans..css file instead. Thanks for pointing that out though – because it probably is going to save me a lots of time wondering why some styles might have worked – and some didn’t.
Thanks again Ryan!
Kevin
March 4, 2008 at 8:17 am # //
Ryan says:
Andy – My knowledge of Javascript is abysmal, so if can find a way to do this with Javascript I’m all ears. It’s not something I would include by default, but it may be an option that some users would like. As long as it degraded nicely without javascript it could work quite nicely.
If you could apply a certain class to the parents, that would be optimal as I can add a style in the CSS which generates the arrow or whatever method people choose to display that the menu item has child items.
March 4, 2008 at 9:34 am # //
Istvan says:
As I posted some months ago I was testing your plugin and now is live here: http://www.videocalcio.net
Thanks for this plugin!
P.S.: I would like to suggest you for your next releases the possibility to add a sort of separator between categories/sub-categories.
March 4, 2008 at 10:48 am # //
Chris says:
Hello,
I was wondering if it was possible to use image buttons rather than the standard text the menu is set up with?
Thanks,
Chris
March 5, 2008 at 7:09 am # //
Ryan says:
Chris – yes that is possible. But it would require doing it by hand as there isn’t anyway to automate this. Or at least not without a huge amount of work. So this will not be included in the plugin.
An easier and usually more preferred route, is to use graphics as a background to the actual menu text. This way your menu is indexable by bots and will resize appropriately on altering your text size.
An example of this can be seen on my new WordPress theme Aqua Vaccinium.
March 5, 2008 at 1:18 pm # //
Pinto says:
Hi’
nice plugin, i have start to translate it into Hebrew works perfect.
one problem though it’s look bad really bad in explorer
i left it so you can see it.
scroll left you will see the menu why? how it can be fix?
in fire fox i see it perfect.
Thank,
Pinto.
March 6, 2008 at 9:35 pm # //
Ryan says:
Pinto – Is it possible that the right to left text is messing it up? I’ve never tried/thought of doing that before.
I was about to have a go at fixing it for you, but I see you have removed it. If you would like help getting it to work I’ll need a link to an example of your problem occurring.
March 7, 2008 at 1:57 am # //
Daniel says:
Hi Ryan
I need to ask you a question, I would like to know IF it is possible to make the dropdown menues from “scratch” What I mean is that I want to have different names on the dropdowns than the Wordpress default, Pages, Catagories, Archive etc etc.
And below those I want to have my own submenus. Is this possible at all? I have been trying to understand how this works for some weeks now but I have to ask now.
I would need approx 5 different menues with my own selected “titles” with own selected sub menu items.
Hope to hear from you soon
Regards,
Daniel
March 7, 2008 at 11:48 am # //
Ryan says:
Daniel – Yep, it’s definitely possible. In fact it’s not particularly difficult either. Below is an example of the code used to generate a menu with Tomato, Capsicum and Cucumber on the top level and Red, Green and Black options under the Tomato dropdown. You can add as many levels of navigation as you want, just make sure you follow the syntax for placing unordered lists (UL) inside the list item (LI) you want the dropdown/flyout to appear inside.
<ul id="suckerfishnav"><li><a href="">Tomato</a>
<ul>
<li><a href="">Red</a></li>
<li><a href="">Green</a></li>
<li><a href="">Black</a></li>
</ul>
</li>
<li><a href="">Capsicum</a></li>
<li><a href="">Cucumber</a></li>
</ul>
If you need any more help, just leave another comment and I’ll see what I can do.
March 7, 2008 at 12:06 pm # //
Eric says:
Fantastic plugin and great assistance here.
I have a page-only WP site, functioning as a CMS. Is there a way to make an item on the menu “non-linked”?
In other words, I’m trying to make sub-pages drop down under a main topic, but there would be no page defined for that main topic.
For instance, I’d have the word “Stuff” in the navigation bar, but clicking the word “Stuff” would not go anywhere. It would just list the sub pages under “Stuff”.
I hope this makes sense…. Thanks again.
March 8, 2008 at 12:36 pm # //
Daniel says:
Hi Ryan
Thanks for taking your time to write back. Your reply have helped me allot, It took a second to understand where to put the link to the page from that code but now Im “on my way there” I wait for your coming release!
Have a nice weekend
My project page is here
http://www.norstromfiske.se
Im currently learning how to publish to later use this together with a friend.
Regards
Daniel
March 8, 2008 at 5:07 pm # //
Ryan says:
Daniel – I like the look of your site so far. Perhaps you should try my new beta plugin though so that you can modify it easily to match your site.
The beta plugin is available here … http://ryanhellyer.net/2008/02/20/suckerfish-plugin-11-beta/
And you can generate the CSS for the dropdown here … http://ryanhellyer.net/dropdowns/
March 8, 2008 at 5:07 pm # //
Ryan says:
Thanks Eric.
You can’t make one of the WordPress generated menu items unlinked, but you can achieve the same effect by building the menu yourself from scratch like I showed Daniel below. Then instead of adding a link to the HREF, just leave it blank.
March 8, 2008 at 5:13 pm # //
Eric says:
Ryan: In (two) words: You Rock!
Works perfectly using the code you offered for Daniel.
Thanks a ton.
Eric
March 9, 2008 at 3:43 am # //
Ryan says:
Eric – glad to hear it worked for you
March 9, 2008 at 10:29 am # //
Shane says:
Gday Ryan,
Thanks very much for the plugin! After a bit of tweaking, it is working very nicely on my site.
If you’d like to add it to your list of examples, please feel free to do so!
http://www.advs.net.au/
Cheers,
Shane.
March 9, 2008 at 5:04 pm # //
Ryan says:
Thanks for the link Shane. I’ll add it right now.
I notice that you still have some of the original colouring from the default styling showing through in the dropdown. You may find the new dropdown generator useful if you want to iron some of those bugs out.
March 9, 2008 at 5:56 pm # //
Shane says:
Thanks Ryan.
For some reason, the sub menu is not aligning correctly in IE.
Any Ideas?
March 9, 2008 at 6:21 pm # //
Daniel says:
Hi Ryan
Thanks, I uploaded the new version and got it to work, but after i used the CSS page of yours it somehow changed my whole layout and even if i disable the plugin and tried your old one it is still gray all over and the font size is not as it should. Also i have noticed that in Firefox the meny looks like it should but in IE the menue is getting cut after the 3rd menu item. I dont understand why this happens, this happens even if i change theme.
the meny i have put together looks like this incl the “top part”
<?php suckerfish(); ?>
<ul id=”suckerfishnav”>
<script language=”JavaScript” src=”suckerfish_keyboard.js”></script>
<!–[if lte IE 6]>
<script language=”JavaScript” src=”suckerfish_ie.js”></script>
<![endif]–>
<li><a href=?page_id=18 “”>Välkommen</a>
<ul>
<li><a href=?page_id=27 “”>Heikki</a></li>
<li><a href=?page_id=28 “”>Fiskeskola</a></li>
</ul>
</li>
<li><a href=?page_id=2 “”>Var är gubben</a>
<ul>
<li><a href=?page_id=29 “”>Rapporter/Dagstips</a></li>
<li><a href=?page_id=30 “”>Filkmlipp</a></li>
<li><a href=?page_id=31 “”>Ljugarsidan</a></li>
</ul>
</li>
<li><a href=?page_id=32 “”>Kontakta mig</a>
<ul>
<li><a href=?page_id=33 “”>Just nu kontakt</a></li>
<li><a href=?page_id=34 “”>Prislista</a></li>
<li><a href=?page_id=35 “”>Bokning stugor</a></li>
<li><a href=?page_id=36 “”>Bokning Guidning</a></li>
<li><a href=?page_id=37 “”>Länkar</a></li>
</ul>
</li>
<li><a href=?page_id=38 “”>Bilder</a>
<ul>
<li><a href=?page_id=43 “”>Landskap och djur</a></li>
<li><a href=?page_id=45 “”>Nostalgi</a></li>
<li><a href=?page_id=39 “”>Vinter 08</a></li>
<li><a href=?page_id=44 “”>Natur/Fiske 08</a></li>
<li><a href=?page_id=45 “”>Arkiv 07</a></li>
<li><a href=?page_id=6 “”>Video</a></li>
<li><a href=?page_id=4 “”>Daniels bilder</a></li>
</ul>
</li>
I cant see any errors in the code I have put together and neither understand why it breaks, but I think that the colour and layout of the page have something to do with the break of the menu.
Sorry for my bad english in trying to explain my problem.
To clearafy the background shall be white as the default is and the text shall be as default as well.
Look forward for your comments.
March 9, 2008 at 7:54 pm # //
Ryan says:
Shane. The following looks very odd:
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul {left:0px;}That is normally as -999em or similar.
The easiest way to fix these problems is to use the CSS generator page though. It should be able to weed out most of the bugs automatically and save the hassle of modifying it by hand.
March 9, 2008 at 8:00 pm # //
Ryan says:
Daniel – there are lots of problems in the code you have there. I need to go have dinner right now, but I’ll be back in an hour or so to help.
March 9, 2008 at 8:01 pm # //
Ryan says:
Hi Daniel.
“even if i disable the plugin and tried your old one it is still gray all over and the font size is not as it should.”
I don’t think this is caused by the plugin.
In the code you provided, you are using a whole bunch of code which you don’t need at all.
The plugin automatically adds the javascript so there is no need to add those to your HTML, I’m assuming you got those from the Dropdown Generator page, but I only posted them there for those who are NOT using the plugin.
If you are wanting to create your own custom designed menu then literally all you need is the unordered list which you have correct in your above HTML.
If you still find the menu isn’t look correct then let me know and I’ll see what I can do.
This has shown up an interesting problem I hadn’t thought of before. If non English language bloggers want to use the plugin, the titles of each dropdown (pages, categories, archives etc.) will be in English. Whereas I should probably be using some sort of WordPress function which will change depending on your language settings. I’ll try to fix that in a future version of the plugin.
March 9, 2008 at 9:02 pm # //
Shane says:
Ryan,
I have used the generator and it aligns ok in firefox, however not in IE.
Any ideas why???
March 10, 2008 at 12:00 am # //
Ryan says:
Shane – I’m assuming there’s probably something in your themes style sheet which causing problems with the menu. I’m quite busy at the moment, but if I have time tonight I’ll take a look and see if I can find where the bug is.
Just to confirm: It did look correct in the generator?
March 10, 2008 at 11:04 am # //
Janet says:
Interesting! I’m really helped. It’s really smart idea.
March 10, 2008 at 8:51 pm # //
Roseba says:
I’m currently building a website using the menu command for your plugin: php suckerfish(2).
Unfortunately, the page referencing that, and the other options for the plugin…. well I can’t find it anymore. Either my search is not yielding the results I wanted, or you updated your page.
Anyway, what I’m trying to do, is to find out how I can continue using this option, only I want to exclude certain pages from the top navigation. (I’m not sure if I have to get a different plugin for that all together.
Also, the link above for Online CSS generator is not working. It goes to http://dropdowns/
March 10, 2008 at 11:36 pm # //
Ryan says:
Roseba – thanks for the heads up on the dead link. I’ve fixed it now.
The latest version of the plugin does not require to use suckerfish2() as you can control that functionality (and a whole lot more) via the admin panel with it. Hence I’ve removed it from this page. The current plugin only uses suckerfish(), however I’ve included support for the old functions to prevent users themes from breaking on upgrading, but some of the new features won’t be available without moving to suckerfish().
The latest version of the plugin doesn’t allow you to exclude pages from the admin panel anyway though so you will need to replace the < ?php suckerfish2(); ?> function in your theme anyway if you want to do that. The following code will remove pages with ID’s 5 and 3 from the dropdown (edit/add page ID numbers to suit):
<ul id="suckerfishnav"><li><a href="<?php bloginfo('url') ?>/">Home</a></li>
<?php wp_list_pages('title_li=exclude=5,3') ?>
</ul>
The above code will work with both version 1.0.5 (your current version – probably) and 1.6.1 (the latest). If you have any troubles then post back and I’ll see what I can do to help
I’d like to include support for excluding specific pages, categories etc. via the admin panel in the future but I’m still trying to figure out the best way to go about doing that. In the mean time, feel free to bug me for custom codes or build the menu up the old fashioned way with HTML as per my advice to Daniel a few comments back.
March 11, 2008 at 12:51 am # //
Brit says:
I love this newer version, thank you for updating!
I have a question however. Is this dropdown menu SEO friendly? Is it css based or javascript based? I heard css dropdown menus are ok but javascript menus do not get indexed by search engines.
Thanks
March 11, 2008 at 9:24 pm # //
Ryan says:
Brit – The dropdown menu is very SEO friendly. The Son of Suckerfish method which this plugin uses is pretty much the king of SEO friendly dropdown navigation.
From a search engines perspective, these dropdown menus aren’t terribly dissimilar from the average WordPress sidebar, albeit many sidebars feature heading tags which may offer a little (negligible?) SEO benefits.
The plugin does use Javascript, but that has no effect on the SEO properties of the menu, as it is only used to trigger the dropdowns in very old browsers like IE6. I also put the Javascript into IE conditional comments so that only those old browsers even need to bother downloading the teeny bit of Javascript that they need.
I’ve been looking at ways to add more Javascript features to the dropdown this evening, including fancy graphical effects like fading, delays etc. But none of these new features (which would be optional) would have any effect on the SEO friendliness of the menu either as they are simply additions to the existing unordered list which contains the menu options.
March 11, 2008 at 10:17 pm # //
Brit says:
Thanks for clarifying this, glad to hear!
Again thank you for making this so easy for us.I really appreciate it and i suggest this plugin to everyone,it rocks!
March 12, 2008 at 8:22 am # //
Andy Turner says:
Hi Ryan, just to let you know that I’m using your great dropdown menu on our community site at:
http://shoalhavenheads.net.au
and if you’d like to put a link up to us it would sure help the traffic!
I havn’t upgraded to the new version yet – I’m not sure what version I have, downloaded it in Feb this year – any problem with retaining the version I use or is there any security problems?
I’m a kiwi now living in Aus (from Auckland). Bet you are enjoying living in Dunedin, a great part of the world!
All the best and thanks for the dropdown menu,
Andy Turner
March 12, 2008 at 3:09 pm # //
Ryan says:
Andy Turner – There is no security risk with using the old version, the new just has a whole heap of extra bits. You can just overwrite your existing plugin with the new one though and it should function just the same except you will have a whole bunch more options in the admin panel. Although you would need to transfer the CSS data from the original version over to the new one – it’s entered in via the admin panel.
You are now the second Kiwi I know of who is using my plugin
I will add your link to my list of live examples shortly.
March 12, 2008 at 3:11 pm # //
Ryan says:
For anyone who is interested, my development blog features some new animated effects which I’m planning to include as an option in the plugin during the next release … Development Blog
March 12, 2008 at 10:34 pm # //
Nicole says:
Hello Ryan,
I am using version 1.6.1 of your plugin and have a small problem that I hope you can assist me with. I also apologize if this has been answered before but searched and did not see it.
I currently have a specific page titled ‘Home’ which is set to be my main front page. I am having trouble figuring out how to set up the menu so that ‘Home’ appears as the first link and though its a bit confusing I’ll try to explain.
When I go into your plugin options and set menu item #1 to pages it does include the ‘Home’ page in the list of page links but since it lists pages alphabetically it lists the ‘Home’ page second after the page named ‘FAQ’ (for example FAQ | Home | Services ). If I set it up so menu item #1 to ‘Home’ and menu item #2 to pages then I get two listings of the ‘Home’ page link (for example ( Home | FAQ | Home | Services ). What I am trying to set up is just so I can get: Home | Page link | Page link | Etc. Thank you in advance for any help and of course for the awesome plugin!
March 13, 2008 at 12:00 pm # //
Ryan says:
Nicole – thanks, that is a bug I hadn’t heard about before.
I’ll fix that in a future release. In the mean time, replace <?php suckerfish(); ?> with the following code:
<?php echo '
<ul id="suckerfishnav">
<li><a href="http://domain.com/home/">Home</a></li>
' , wp_list_pages('title_li=&exclude=5') , '
</ul>';
?>
The domain.com/home/ will need to be changed to whatever your Home URL is and the number of 5 will need to change to whatever the WordPress ID number of your home page is.
March 13, 2008 at 12:45 pm # //
Ryan says:
Nicole – I had a sudden thought! All you need to do is to not use the home page option at all, and just manipulate the order of the pages via WordPress’s built in page order tool.
If you edit a page, the page order tool is on the right handside, near the bottom.
March 13, 2008 at 7:10 pm # //
Ryan says:
A new beta version is available which features the animated dropdowns I mentioned a few comments ago … Dropdown plugin beta
March 13, 2008 at 9:17 pm # //
Nicole says:
Thank you so much Ryan for the quick replies. I will try your suggestion(s) and see if I can get it to work. I will also check out the new beta you released, its very exciting!
March 14, 2008 at 4:27 am # //
Karynn says:
I thought I used this plugin in the past and there were several configuration options for what was included in the navigation menu. i.e. some included pages and categories, some only showed pages, others had a link to blog, etc… but I don’t see any options in yours at all — YET the live examples are indeed showing more than just the default shows. Are they all doing hacks like your response to Nicole?? Or am I confusing your plugin with a different one?
March 14, 2008 at 8:17 am # //
westy says:
Outstanding work – in many ways!
But… all the .css styling goes away when I change my permalink structure to anything but the default. Any thoughts? I tried calling in the attributes via a separate menus.css file – but that did not have any effect.
March 14, 2008 at 10:52 am # //
westy says:
I am sorry – it now works by using your awesome .css generator; but I had to call it in via it’s own .css file, not from the suckerfish options panel.
Please keep up the outstanding work!
March 14, 2008 at 10:55 am # //
Ryan says:
Karynn – you definitely have the correct plugin. However I assume you are using an older version of the plugin which does not have the options in the admin panel to control what is on the page.
You can either upgrade to the new plugin, or keep using the old one. The content of the dropdowns can be partially controlled by altering the function used in your theme.
The old options are:
suckerfish();– same as currentsuckerfish1();suckerfish2();suckerfish3();suckerfish4();suckerfish5();March 14, 2008 at 11:53 am # //
Ryan says:
Westy – I don’t understand that at all. The plugin shouldn’t be bothered at all by changing the permalink structure.
I’ll test it to see, but I’m 99.99999% certain I won’t be able to replicate that problem.
March 14, 2008 at 11:55 am # //
Ryan says:
Westy – Confirmed. I changed the permalink structure on the demo page and it is still functioning as per normal apart from the permalinks changing.
I suspect something else has gone wrong, unrelated to your permalinks. If you can prove me wrong please do though!
March 14, 2008 at 11:57 am # //
DanielRiem says:
hey ryan. thanks for the plugin. its been a great addition to the site. quick question. i have a flash video at the top of my site. but the drop down menu always hides behind it. any way to fix that?
thanks dude.
http://www.storiesof.us
March 15, 2008 at 4:06 am # //