PixoPoint

str3ss on: January 16th, 2008 at 1:52 am

Hey Ryan ::

This look interesting!

Like the idea of SuckerFish + WordPress, good stuff!

I took a look at your demo in Safari 3 (Win/Mac) and the nav positioning is off about 20px to the left.

Can’t wait to try this on some of my WP installs. This is a fantastic idea, thanks for doing the dev!

Driving my Inner Geek Insane | Psychicgeek on: January 21st, 2008 at 10:22 pm

[...] down dyamically populated navigation bar, courtesy of a WordPress Plugin which you can read about here This page only shows the simple code for your pages, but I wanted to have my archives and [...]

Ryan on: January 22nd, 2008 at 1:41 am

Glad to hear you like the plugin I’ll provide an example of how to add a home page button on the demo page tonight.

EDIT: New version has this functionality built in via the function suckerfish().

witchypoo on: January 22nd, 2008 at 1:54 pm

Because the navbar uses the entire width of the layout, and Categories is the last item on it, the sub sub menus fly out to the right, so are unreadable. I think I can fix that in the css, but you may want to consider it as you have for including a home link. Again, I fixed that myself, but some folks are scared to mess with CSS.
I like the one line of code, I might just swap it out with the code I put in yesterday, should I de-activate the plugin first?

Ryan on: January 22nd, 2008 at 8:53 pm

witchypoo - I hadn’t thought of the sub menus blowing out the side of the screen like that. The easiest solution to get around that is to decrease the font size in the CSS a notch or two. To use the simplified template code, you need to download the new version of the plugin and replace you existing files with it. You don’t need to deactivate and reactivate it, the changes will be automatic. Your old code will still work with the new plugin too, so if you change your template code after installing the new plugin you won’t have any downtime. But if you use the new code now your WordPress install will probably report an error I assume (I haven’t tried it).

BG - Where you put the code is entirely up to you. It depends on where exactly in your blog you want it to appear. Usually you would place it towards the end of the file. If you would like specific help with your theme, drop me a line via my contact page and I’ll help you from there.

Ryan on: January 22nd, 2008 at 11:17 pm

Edit: I tested this tonight and found you need to clear your floats or the search box will blow out the side of the page. I’ve edited the code below accordingly.

The Kubrick theme is slightly annoying this regard as it doesn’t have a fixed width box to plonk your content in, or at least it does, but that box includes the graphical borders which you won’t want your menu obscuring. But you can get around this by using a DIV tag with margins to pull the edges of the menu in as follows:

Below this section of code in your header.php file:
<div id="page">
<div id="header">
<div id="headerimg">
<h1><a href="http://ryanhellyer.net/test/wordpress1/">Ryan’s test blog</a></h1>
<div class="description">This is Ryan’s blog for testing out WordPress stuff</div>
</div>
</div>
<hr />

Place the following code:
<div style="margin:0 25px;">
<?php suckerfish(); ?>
</div>
<div style="clear:both;"></div>

That should place the menu nicely underneath the main header for you. I haven’t test it though, so if it doesn’t look correct then let me know.

Istvan on: January 24th, 2008 at 3:15 am

Nice plugin, I will surely try it…is possible to display only categories with sub-categories as drop down?

Thanks

Ryan on: January 24th, 2008 at 7:30 pm

Istvan, to add a list of categories with your sub-categories in a dropdown, use the following code:

<ul id="suckerfishnav">
<?php wp_list_categories('title_li='); ?>
</ul>

There’s now a demo of this on the demo page

Theo on: January 25th, 2008 at 10:58 am

Ryan,
I love this plugin - it solves a HUGE problem for me. I’m using the indomagz theme. The old nav bar had this code:

<a href=”">Home

I replaced the code to read this:

But when I do that, the rest of the content on the page disappears! Do you have any idea why this might be happening?

Ryan on: January 25th, 2008 at 11:19 am

Hi Theo,
WordPress has removed most of your code from your comment unfortunately so I can’t answer your question.

I’ll download the indomagz theme in a few hours and have a look and see if I can sort a solution for you.

Ryan on: January 25th, 2008 at 12:15 pm

Clarissa - have you hacked the WordPress core by any chance? I see that you have a bunch of doubly closed link tags which may be causing problems. If you are trying to change the look of the dropdown, try altering the CSS file supplied with the plugin (you can write over the existing one).

Which dropdown isn’t functioning correctly? And what code did you use to display it? - note: it’s tricky to display HTML and/or PHP here in the comments without the code disappearing so feel free to provide a link to it instead.

Jonathan Babcock on: January 25th, 2008 at 7:00 pm

Ryan,

I absolutely love the plugin. I have found one minor, though, that I hope you can help with.

First of all, on my site, the suckerfish dropdown doesn’t drop below the original nav bar item. It covers it up, taking away the ability to access the parent page. I’ve tweaked all I can think to tweak in the CSS, but just can’t work it out.

I’ll be grateful for any help you can provide on this.

I’ll leave the menus as-is on my site in case you get a chance to take a look.

Ryan on: January 25th, 2008 at 8:36 pm

Jonathan - I’m stumped. When I try to fix one thing in your menu, something else goes wrong I’ll leave it and come back to it later. Hopefully settling my brain will help bring the solution to the surface

Jonathan Babcock on: January 26th, 2008 at 2:29 pm

Ryan,

Thanks for taking a look, and thanks for the compliment on the colors. It does look great and fits right in with the rest of the theme.

RE: the dropdown issue, I’m hoping it isn’t a core theme issue. I don’t like fiddling around too much in the theme’s framework. I also wondered if it might not be something to do with my theme’s CSS, but if it is, it isn’t obvious. I’ve tweaked everything I thought might do the trick.

Anyway, I’m grateful for any time you can spare to look into it.

Ryan on: January 26th, 2008 at 8:34 pm

Jonathan - I’ve knocked together a very crude mockup of your menu jerry rigged into your theme. I removed a bunch of scripts and other stuff which was taking too long to load while I was testing, but otherwise it’s essentially a replica of your home page.

Mockup »
CSS file »

I changed the #nav and .stopper in your theme to #znav and .zstopper and added some styling to them to fit the menu into the correct position. Another option is to replace those styles with the ones I’ve used for #znav and .zstopper.

Let me know if you have any more problems or if there are any issues with the demo above.

Jonathan Babcock on: January 27th, 2008 at 5:03 pm

Thank you so much for you help and your responsiveness! I added the new styles you provided and the menu is “dropping down” correctly.

It is rendering perfectly in IE, but the vertical alignment seems to be a little off in firefox.

I will goof with it some more, though. I know it’s only a matter a tweak or two to getting it perfect.

Anyway, I really appreciate you taking the time to help me get this working correctly.

As far as the look of the nav bar on my site goes, credit Michael Pollock who designed the theme. I just goofed with the colors of your great plug in to get it to blend in nicely.

Again - great plugin. Looks great, easy to use, and your support has been second to none.

Ryan on: January 27th, 2008 at 6:29 pm

Jonathan - no problem, I’m happy to help
I’m assuming you must be working on it at the moment as it’s more than “a little” out in Firefox at the moment! I also noticed the flyouts are way off in IE7.

As for the plugin being easy to use, that should be improving further in the future too. I’m working on a system to allow you to edit the look of it directly from the admin panel rather than goofing around with CSS files. I’m not sure when it will be ready though.

Cj B on: January 30th, 2008 at 9:02 am

Just a quick followup. You should be using “wpurl” on line 40 and 41.

Ryan on: January 30th, 2008 at 7:07 pm

Version 1.0.5 is now uploaded. The only change is to fix the bug Cj B pointed out above. The corrections did not apply to lines 40 or 41 though, but much further up in the code.

If the plugin was working fine for you before, then there is no need to upgrade. The bug fix only applies to situations in which your blog address is different from your WordPress address.

Ryan on: January 30th, 2008 at 9:55 pm

Albert - thanks.

I haven’t thought about whether it is possible to highlight the active page. It is probably possible if you only want “WordPress Pages” in your dropdown navigation. But I’m not sure about other things like Categories, Archives etc. I’ll have a look into it though and see what I can come up with.

One of the reasons I hadn’t considered this before though, is that you can’t see what the active page is unless it is a page on the top level of your menu or if you open the dropdown. Most dropdowns don’t bother with highlighting the active page for this reason.

Albert on: January 31st, 2008 at 8:41 pm

Good point, Ryan. I was indeed referring only to Pages. But now that i think of it, there might be a problem with “child” pages.

Ryan on: February 2nd, 2008 at 12:45 am

I’ve found some complications with displaying blog rolls in their categories. I can display the categories in flyouts as requested, but any links which aren’t categorized are not displayed at all
Joell - if you would like a copy of the plugin which works with categories, but features the bug which causes the links not in categories to be invisible, then leave me a message via my contact form and I’ll put something together and email it to you.

Ryan on: February 3rd, 2008 at 6:11 pm

Hi Rizal,
I’m glad to hear you like the plugin … although it’s a pity it is not working for you yet.

I downloaded the “Blog Oh Blog” theme, and it seems that header.php is most likely not the file you want to put your menu in. The menu which comes with the theme is stored in a file called menu.php

If you remove all of the code from that file and replace it with the following, it should work … I think, I haven’t tried it myself.

<div id="nav">
<?php suckerfish(); ?>
</div>


This should not give you any parse errors. But it may look a little wonky and if so let me know and I will investigate further.

WordPress Suckerfish Menu | Dustin Edwards on: February 5th, 2008 at 6:28 am

[...] can be found at Invoke Media and RockinThemes.  Update 1:  Ryan Hellyer has created a Suckerfish WordPress Plugin and may also be able to answer any questions for people stuck on a technical [...]

witchypoo on: February 8th, 2008 at 6:27 pm

Hi Ryan. Love your plugin. We have another live site for you, and it looks purdy too.
http://www.dutchblitz.net/
I have a question though. This site has archives since 2006. Is there a way to code the archives so that there is a submenu (flyout) for the months of each individual year? I know how to do this in CSS unordered lists, but php? Not so much.
And she has a fair amount of archives.

Ryan on: February 8th, 2008 at 7:15 pm

http://www.dutchblitz.net/ has now been added to the list of live examples.

witchypoo on: February 8th, 2008 at 8:26 pm

Well, actually, I miscommunicated. Each year should be a submenu item, with the months for that year as the flyouts.

Ryan on: February 9th, 2008 at 7:44 pm

The plugin is now available in the official WordPress Plugins Repository.

Please keep leaving any questions/comments about the plugin here though.

Creeva’s World 2.0 » links for 2008-02-11 on: February 10th, 2008 at 1:33 pm

[...] Suckerfish WordPress Plugin | Ryan Hellyer [...]

Iva on: February 11th, 2008 at 4:32 am

Amazing plugin which saves a huge amount of time. Thank you:)

P.S. I also wanted to tell you that you forgot the apostrophe in the plugin’s name on WordPress extend page.

Pop ups that aren't actually pop ups! - Web Development Forum on: February 12th, 2008 at 10:27 pm

[...] a WordPress plugin for creating dropdown menus which may be useful as a demonstration for you … Plugin page | Demo page If you have a look at the code on the demo page, you will see that the CSS file [...]

Istvan on: February 13th, 2008 at 1:34 am

I have another question…is possible to have the drop down menu not in fixed width but relative to the word?

For example: “About me” will be on one row
“my interestes, books..” will be two row

Obviously I can increase its width but the first one will have a lot of empty space at the left side of the word…

Thanks

Chris on: February 14th, 2008 at 5:09 am

Hi, Great menu. I was wondering if its possible to add some bullets or image bullets preferably to the dropdown links? I tried adding some list styles to the CSS file but it doesn’t seem to stick.

Thanks!

ONLINE | Lebensmittelfotos.com on: February 14th, 2008 at 7:43 am

[...] dem Menüpunkt Wichtiges. Das obige Dropdown-Menü wurde übrigens unter Zuhilfenahme des Plugins “Suckerfish” realisiert. Anders wären die diversen Fotogallerien, vor allem die noch kommenden, nicht [...]

Ryan on: February 14th, 2008 at 9:10 am

Hi everyone,
I’m a little busy right now, but I’ll try to sort out the things you have asked for.

3M - what you have asked for isn’t very difficult so I’ll definitely get on to that. If I don’t post back here with a solution tomorrow then send me a message via my contact form to remind me.

3m on: February 14th, 2008 at 10:41 am

Whatever is happening is only occurring with firefox. In internet explorer it is okay. When I click on a single post entry, all I get is white space.

This may have something to do with it: It must be in my layers. I have a ‘falling hearts’ effect that is going on the top of my left sidebar, behind my middle column, and somewhere in the middle of my third column. If I can fix the layers, the evidence being that the hearts fall on top of all three columns, the plugin will probably work for firefox. I could try it with another theme. It’s probably in the theme code, though I’ve been having problems with firefox stuff lately (usually it’s IE).

Arrgh!

3m on: February 14th, 2008 at 12:15 pm

Yes, if you go to my site, the hearts are falling, but they go in front of the text in my left sidebar, and when they reach my main column, they disappear behind the container instead of going in front of the text. In the right column, you can see they’re in between the background and the text. I think it has something to do with my layers. Again, this is just in firefox, not in IE.

I had to disable the drop downs temporarily because when I click on a single post, I didn’t get it OR the sidebars. Just the white container.

Ryan on: February 14th, 2008 at 1:19 pm

3m - I had a quick look now, and I suspect your .postspace2 or #content in your CSS has a Z-index higher than those hearts. If you try changing your Z-index for those, you should be able to fix the hearts problem (I think). Hopefully it doesn’t break something else in the process though!

bug on: February 15th, 2008 at 11:18 am

Hey…great plugin..Really useful
One question: How would one go about adding a 500ms delay to the mouseout? I’m pretty brain dead when it comes to JS and I haven’t had much luck getting it to work.

Ryan on: February 15th, 2008 at 2:03 pm

3m - here’s some code to display Pages, Categories, Blogroll and Archives …

<ul id="suckerfishnav">
<li><a href="#">Pages</a>
<ul><?php wp_list_pages('title_li='); ?></ul>
</li>
<li><a href="#">Categories</a>
<ul><?php wp_list_categories('title_li='); ?></ul>
</li>
<li><a href="#">Blogroll</a>
<ul><?php wp_list_bookmarks('title_li=&categorize=0'); ?></ul>
</li>
<li><a href="#">Archives</a>
<ul><?php wp_get_archives(); ?></ul>
</li>
</ul>


Ryan on: February 15th, 2008 at 2:34 pm

Istvan - sorry, but I don’t understand your question.

Ryan on: February 15th, 2008 at 11:08 pm

Chris - I had a brief go at getting list styles to work but had a few issues. An easier way to achieve this affect I found was to apply the :before pseudo class to the links like so:

#suckerfishnav li li a:before {content: url(bullet.gif)}
The code is edited in the CSS file which came with the plugin

This solution won’t work in IE though.

3m on: February 16th, 2008 at 2:43 am

Thanks for the code, Ryan! I probably won’t do it immediately because I’ll have to break down my blogroll into smaller categories for all of them to fit. That’s what I did with my a-z authors and titles. I just split them in half and that seems to work well.

Thanks again for a wonderful plug-in!

Ryan on: February 16th, 2008 at 8:41 am

Umj - are you referring to the code I posted for 3m above? If so, just remove the < ?php suckerfish(); ?> code from your header.php as that is what is being replaced by the code I provided above.

Ryan on: February 17th, 2008 at 6:56 pm

Wac - I can see the following error in your theme …

<ul id=”mainlevel-nav”>
<li class=”<ul id=”suckerfishnav”><li>

It looks like you have placed the plugin code inside a class statement for your list. The plugin must be outside of the list entirely.

Leave another comment if you can’t figure out how to fix it and I’ll look up the theme and send you the exact code you need to get it to work.

Ryan on: February 19th, 2008 at 10:02 am

Steve - All I see is an “Under construction” message on your site along with your contact details.

Ryan on: February 20th, 2008 at 3:02 pm

DanielRiem - When I designed the plugin, I made it work with the default Kubrick theme. Unfortunately it sets a very small font-size which affects this plugin. I will be correcting this in a future version which will be release some time in the next month or so.

In the mean time, you can change the font size and the width of the dropdown menu by editing the ryans_suckerfish.css file (found in the plugin folder).

Here’s the code you need to edit for the font size:
#suckerfishnav { ... font-size:1.3em;}

And here’s the codes you need to edit to change the width of the dropdown:
#suckerfishnav li li {... width:9em; …}
#suckerfishnav li ul a {width:9em;}
#suckerfishnav li ul ul {margin:-1.50em 0 0 10em;}

If that doesn’t work, then let me know as I may have made an error.

Ryan on: February 20th, 2008 at 6:23 pm

Leo - from what I can see of the dropdown you linked to, it seems to be using the same approach that I am, but without using Javascript to help out older browsers, so I am assuming it will break in IE6 and older - I haven’t checked this though (I’ll have a look tonight to confirm).

Thanks for the link by the way. The only other dropdown plugin for WordPress I had seen was the JQuery Dropdown Plugin.

Stu Nicholls at CSS Play uses HTML tables hidden inside IE conditional comments to create the dropdown with Javascript. This does allow users of very old browsers to use your menu even without Javascript, but this is at the expense of a bunch of non-semantical HTML being jammed in between conditional comments. Most people (including myself) prefer the Suckerfish approach, ie: using Javascript to help out IE6 and older. There are merits in Stu Nicholls approach though.

Dropdown menus by their very nature are notoriously non-browser compliant and will be for quite a few years to come. For example most cellular phones, PDA’s and other mobile devices will struggle to render them correctly. So if you are looking for the most cross browser design possible, then I suggest not using a dropdown at all.

I have no idea how to change the output of the HTML lists that WordPress generates. These would need to be altered to use the CSS Play style menus. I’m sure it is possible, but I think you would probably need to hack the WordPress core files to do it.

EDIT: for any of you who are interested in learning about the finer points of designing non-suckerfish dropdown menus, Stu Nichols website (CSSPlay.co.uk) is a wonderful resource. He truly is the master of cross browser compliant dropdowns which work in older browsers without javascript on. Personally I’m not a fan of this approach, but like I said above, it does have it’s merits. Even if you aren’t interested in using his technique, his site has some brilliant examples of what can be done with a bit of lateral thinking.

DanielRiem on: February 20th, 2008 at 7:10 pm

Ryan,

You must really love your plugin bc you answer everyone’s questions so quickly.

Thanks so much for the reply about changing sizes. I got that. But I just cant figure out why the plugin works better on ie and not on firefox on my site. i tried about everything and am still dumbfounded. my site is http://www.storiesof.us

You da man!

Ryan on: February 20th, 2008 at 9:56 pm

DanielRiem - Firefox Web Developer toolbar to the rescue! I used the outline block elements option in it which outlined your #content block which is obscuring part of the menu. The #content block is transparent, so you can’t actually see it, but since it is overlapping the menu then it blocks the mouseover effect.

The problem is related to the use of relative positioning in the theme. I usually recommend using floats to avoid these types of issues. Your sidebar is floated rather than using relative positioning hence the menu isn’t suffering this problem on the left hand side.

If you replace #content in your style.css file with the following, the problem should be cured.
#content {
width:600px;
margin:0 0 20px 0;
float:left;
padding:10px 18px 15px 18px;
text-align:justify;
}
If that doesn’t do the trick, then let me know and I’ll take a second look.

Ryan on: February 20th, 2008 at 10:51 pm

Leo emailed me with a link to his own site which uses the plugin he originally linked to. It seems that the demo site uses a similar method to that used here, but ironically the plugin does not!

The plugin does indeed use the CSSPlay style method of creating the dropdown. I don’t intend to use this method myself as I prefer the suckerfish approach, but it is interesting to see that someone has created a plugin for this purpose.

Here is Leo’s demo site … http://www.dingo-style.com/

And in case you missed it, here is a link to the plugin … http://www.thanhsiang.org/faqing/node/58#comment-353

Adrian Balan on: February 21st, 2008 at 3:20 pm

I’m using this plugin on my website(www.pozne.ro). I want to know how I can make the sub-menus to be horizontal ?

Ryan on: February 21st, 2008 at 4:08 pm

Oleksiy - I tried to visit your site but it wasn’t working. I wasn’t sure if this was the site you are having trouble with either.

I haven’t heard any reports of a function being called wrong until now, so I’m assuming there is another problem you have come across. If not, I would love to hear confirmation so I can figure out a fix for it.

A link to the site in question would be very useful.

Ryan on: February 21st, 2008 at 8:52 pm

Kevin - I released a beta version of my plugin today which may correct your problem. I suggest trying that and see if it fixes your problem. If not, then leave a comment on my blog and I’ll see if I can find another solution for you.

The beta of Version 1.1.2 of the plug is available here … http://ryanhellyer.net/2008/02/20/suckerfish-plugin-11-beta/

If you don’t want to use the untested beta version, then you could copy the CSS file from the new plugin and replace the CSS file from the old one and it should (I think) correct your problem.

Ryan on: February 21st, 2008 at 8:54 pm

Woops, it seems I made two major errors with the beta version. They are fixed now.

I’ve taken a quick look at your themes style sheet and all you need to do is remove the following code from your style.css file in your theme and the problem should be solved:

#navigation li a:hover {
background-color: #d2d2d2;
color: #000;
}

Let me know if that doesn’t do the trick and I’ll take another look.

Ryan on: February 21st, 2008 at 9:16 pm

Kevin - Good to hear your problem is fixed.

No the beta version of the plugin does not control the height of the menus. You can alter that by editing the suckerfish.css file which comes with the plugin by hand.

Ryan on: February 21st, 2008 at 11:21 pm

Kevin - Do you want the main menu items to have the same styling as the dropdown in my demo does? If so, just remove all of the #navigation styling from your themes style.css file. That should fix it. I assumed you wanted to keep that styling, hence I didn’t suggest you correct it last time.

links for 2008-02-23 at orioa on: February 22nd, 2008 at 4:33 pm

[...] Suckerfish WordPress Plugin | Ryan Hellyer WordPress Dropdown Plugin Beta (tags: WordPress Plugin) [...]

Kel on: February 24th, 2008 at 9:50 am

Two problems.

1- It brings a gray background behind the buttons and I cannot find where that is in the code. I just want to remove or change the color. Seems easy enough but I cannot figure it out.

2- The drop down menus hide behind my content in the left and right side bars.

Please help.

Thanks

Ryan on: February 24th, 2008 at 6:18 pm

Bill Hobbs -

Try changing this:
#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:1;
padding:0;
border:0px solid #000;
margin:0 0 1em 0;
width:100%;
}

to this:
#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
line-height:1;
padding:0;
border:0px solid #000;
margin:0 auto 1em auto;
width:20em;
}

That will give the menu a fixed width and center it via the margins. You will need to adjust the width to suit, 20em’s was just a guess.

It is very important to set the width in em’s, not px’s or pt’s as using anything else will cause the menu to goof when the user changes their text size. Also, make sure you test it in Safari, IE7 and Firefox/Opera as they all have different text widths and what may work in one, may be too skinny for the others.

Lisa on: February 25th, 2008 at 3:07 pm

Having problems installing the plug-in, whenever i add code, it removes it.
Not even sure i am putting it in right place, complete web-building novice!
Is this the right plug-in to add drop down menu to parent group bar, to navigate sub-group pages without having big list at side of page?

Ryan on: February 25th, 2008 at 11:51 pm

Jason - There’ s probably some code which looks something like the following in your header.php file:

<div class="menu-bar">
<?php wp-list-pages(); ?>
</div>

If you replace the <?php wp-list-pages(); ?> with the <?php suckerfish(); ?> the dropdown menu should appear in the correct place I think. If this doesn’t work then send me a link to a test blog and I’ll see what I can do from there.

Ryan on: February 25th, 2008 at 11:55 pm

Jason - What you need to do, is to edit your header.php file in your theme. Find where it says
<div class="menu-bar">
and then find where it says
</div>
… after that. Delete everything in between those
two pieces of text and replace it with
<?php suckerfish(); ?>
Then re-upload the header.php file to your web host and make sure the dropdown plugin is activated in your WordPress admin panel. The dropdown should then appear. If it doesn’t look correct, then let me know and I’ll see if I can sort out a bug fix to make it look right.

If you want to edit the look of the plugin yourself, then try the new Beta plugin instead of the current as you can edit lots of different things with that version, including the font, colour, font size, background colours
etc. of the dropdown menu.

Ryan on: February 25th, 2008 at 11:59 pm

That is very bizaare! The content which belongs in the head tags has ended up inside your menu instead of the dropdown!

This must be some sort of bug in the beta version. Leave the code as is, and try installing the original version of the plugin instead. That should work. I’ll have a look to see if I can sort out the bug in the beta in the mean time.

EDIT: A new version of the beta plugin has been released which corrects this problem.

Lisa on: February 26th, 2008 at 12:28 am

Yes sorry thats what i want it to do.

Have activated plug-in in admin, but when i copy paste the code into header.php, and go to check if its worked, when I look back in header.php its deleted it.

Have looked at other replies to see exactly where to put it, maybe putting in wrong place?

Jason on: February 26th, 2008 at 12:43 am

the menu bar mountain…

sixtoolers.com

Lisa on: February 26th, 2008 at 1:57 am

lol, too complicated for me, its two seperate servers? Golf one is on amber.net, I’m using orange? Your plugin is definately in my list of plug-ins on site and activated?

Yes trying to edit via wordpress theme editor, could it be theme is not editable?

Wouldn’t have a clue how to edit file on computer so may have to leave it.

Ron on: February 26th, 2008 at 9:12 pm

Ryan, I am trying to modify the SuckerFish WP Plugin to suit my
website. One of
the issues I’m having is that I have modified my “widgets.php” file to
exclude
certain categories by ID. The SuckerFish code doesn’t utilize the
modifications
made. Could you please point me in the right direction as to how I can
get this
to work? Any help is greatly appreciated.

Keep up the great work Ryan.

Flick on: February 26th, 2008 at 11:44 pm

OMG, you actually rock so much! I found out about your plugin via the ‘Paged Comments’ plugin page, and was really excited! I’m using a mangled version of Suckerfish (I mangled it) on my site at the moment, and was thinking hard about what menu system to use next (I love Suckerfish for its simplicity and cross compability, and the fact it works without J-script) and was a little bit stuck since some of the more up-to-date solutions are actually more problematic to troubleshoot. Am glad that this is really something that I could use instead! Thanks!

Ryan on: February 27th, 2008 at 10:14 am

Flick - glad you like it

Dan on: February 29th, 2008 at 3:44 am

I like your blog theme. I want to use it on my blog.
Can you please tell me from where I can download these theme?

Many thanks

Dan on: February 29th, 2008 at 9:24 am

Hey Ryan,

very nice plugin you’ve set up here, however I’m having a bit of trouble with it.

I’ve had the same problem Jonathan had with the subpages list overlaying the first-level menu, though not with all themes.

Right now, I’m trying to customize the k2 theme (which does not have this overlaying problem), but I’m faced with another one : while the drop-down menu displays correctly, it vanishes as soon as I leave the page link. I can sometimes manage to “catch” the first subpage, but it is impossible to select the other subpages.

This happens with both Safari and Firefox 2.0.0.12 on MacOS 10.5.2, and IE6 on Windows XP.

I’d be grateful for any suggestion that could fix the problem, as I’m dead set on the idea of pull-down menus

Dan on: February 29th, 2008 at 9:29 pm

You hit the nail on the head! Thanks a lot, Ryan.

I really need to get seriously into CSS some time

Ryan on: March 1st, 2008 at 10:27 am

Dan - How are you inserting the “vertical offset”?

Are you perhaps adding a margin-top:50px or something along those lines to the #suckerfishnav, #suckerfishnav ul line in your CSS file? If so, it may be that the margin is being applied to the child ULs and messing up your display accordingly.

If so, maybe try adding some HTML instead, something like <div style="width:100%;height:50px"></div> should do the trick.

Dan on: March 2nd, 2008 at 4:08 am

Nope, I made sure that my changes weren’t made to a parent of the suckerfish styles (even tried adding 100px to the main title).

On the other hand, I played a bit with the suckerfish css, and I probably messed something there.

For the time being, I’ll build the site w/o suckerfish, and I might come back to this part later

Ryan on: March 2nd, 2008 at 8:56 am

Dan - if you post a link to your problem site here I may be able to help.

Daniel - that’s a good idea, I’ll see if I can implement that in the next version.

Ryan on: March 3rd, 2008 at 10:01 am

Brit, try replacing the &lt?php suckerfish(); ?> code in your theme with the following. I think it is what you are trying to achieve, if not then let me know.

<?php echo '
<ul id="suckerfishnav">
<li><a href="#">Categories</a>
<ul>' , wp_list_categories('title_li=&exclude=10') , '</ul>
</li>
</ul>';
?>

Ryan on: March 3rd, 2008 at 5:47 pm

Brit - The following should do the trick
<?php echo '
<ul id="suckerfishnav">
<li><a href="#">Pages</a>
<ul>' , wp_list_pages('title_li=') , '</ul>
</li>
<li><a href="#">Categories</a>
<ul>' , wp_list_categories('title_li=&exclude=10') , '</ul>
</li>
</ul>';
?>

I would love to see the final product, so feel free to post a link to your site once it’s done! Or leave a message via my Contact Page if you don’t want to post the URL here.

Ryan on: March 3rd, 2008 at 6:23 pm

Mike - The code for the link you provided looks nothing like the default Kubrick theme. It is also missing a Doctype (required for the plugin to work in most browsers) and is missing the code for the plugin.

Ryan on: March 3rd, 2008 at 9:52 pm

Kevin - I prefer to communicate here on the blog so that others can see the solutions/process to fix such problems.

The first error I can see is that you have placed the <?php suckerfish(); ?> code inside UL tags. Remove the UL tags and that should fix some problems.

I’m checking the rest of it now as there seems to be some other problems as well.

Ryan on: March 3rd, 2008 at 10:17 pm

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.

Ryan on: March 4th, 2008 at 2:06 am

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.

Andy on: March 4th, 2008 at 4:45 am

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

Ryan on: March 4th, 2008 at 9:34 am

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.

Chris on: March 5th, 2008 at 7:09 am

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

Zagaonline rss center » Blog Archive » Drop down plugin for Wordpress Pages on: March 5th, 2008 at 4:47 pm

[...] 6. 03. Im aware of drop down plugins for Wordpress posts http://ryanhellyer.net/2008/01/14/su…dpress-plugin/ [...]

Ryan on: March 7th, 2008 at 1:57 am

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.

Ryan on: March 7th, 2008 at 12:06 pm

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.

Daniel on: March 8th, 2008 at 5:07 pm

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

Ryan on: March 8th, 2008 at 5:13 pm

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.

Ryan on: March 9th, 2008 at 10:29 am

Eric - glad to hear it worked for you

Ryan on: March 9th, 2008 at 5:56 pm

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.

Daniel on: March 9th, 2008 at 7:54 pm

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.

Ryan on: March 9th, 2008 at 8:01 pm

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.

Shane on: March 10th, 2008 at 12:00 am

Ryan,

I have used the generator and it aligns ok in firefox, however not in IE.

Any ideas why???

Janet on: March 10th, 2008 at 8:51 pm

Interesting! I’m really helped. It’s really smart idea.

Ryan on: March 11th, 2008 at 12:51 am

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.

Ryan on: March 11th, 2008 at 10:17 pm

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.

Andy Turner on: March 12th, 2008 at 3:09 pm

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

Ryan on: March 12th, 2008 at 10:34 pm

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

Ryan on: March 13th, 2008 at 12:45 pm

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.

Ryan on: March 13th, 2008 at 9:17 pm

A new beta version is available which features the animated dropdowns I mentioned a few comments ago … Dropdown plugin beta

Karynn on: March 14th, 2008 at 8:17 am

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?

westy on: March 14th, 2008 at 10:55 am

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!

Ryan on: March 14th, 2008 at 11:55 am

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.

DanielRiem on: March 15th, 2008 at 4:06 am

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

Ryan on: March 15th, 2008 at 5:02 am

DanielRiem - I’ll see what I can do about the hover over flash problem and will be back shortly with news on that front.

Unrelated issue: You have an improperly closed favicon link between your head tags.

Phil on: March 15th, 2008 at 6:47 am

Quick hack to allow for drop downs to be visable above overlapping div tags.

Add to either theme stylesheet or suckerfish

#suckerfishnav li ul { z-index:1}

Quality plugin keep up the great work.

Ryan on: March 15th, 2008 at 10:02 am

Bartek - Thanks! Your link has now been added to the list.

Scot on: March 15th, 2008 at 1:21 pm

Ryan

Wondering if there is a way to display pages vertically other than alphabetically?

Paul on: March 15th, 2008 at 3:25 pm

Scot - check out sorting options directly through the wordpress tags - http://codex.wordpress.org/Template_Tags/wp_list_pages

Ryan - Is there any way to have the sub-menu items ( li ul ul etc) appear to the left as opposed to the right? My menu is floating on the right side of my page and I would like the dropdown list’s sub-pages to be visible.

I understand that the default list sub-element indent is to the right, and Sukerfish depends on the wordpress tags. I tried setting the wp_list_pages depth to -1 and then reversing your css (left:-999em and left:auto) but I don’t really know what I’m doing and was just hoping that there is a way to do this. Perhaps using CSS to override the default-right-indent.

Any help would be greatly appreciated. I love this plugin!

Just to note, I am using the 1.02 version for specific reasons.

Thanks!

wordpress dropdown menu plugin « Graphic Design Blog on: May 10th, 2008 at 12:11 pm

[...] wordpress dropdown menu plugin Posted May 10, 2008 WordPress Dropdown Menu Plugin [...]

Easy neat way to add stylish CSS Cascading menus to your blog on: May 20th, 2008 at 6:04 am

[...] Wordpress Dropdown Plugin [...]

Widgets and Plugins - Page 2 - DIY Themes Forums on: May 27th, 2008 at 4:32 pm

[...] the subpages. It is beautifully represented at IberiaNature.com. I found a plugin that does this: Suckerfish Dropdown Menu plugin. (And also a new beta version.) I’m experimenting with it now, and hope to figure out how to make [...]

Multi-level Navigation Plugin for WordPress | PixoPoint on: June 1st, 2008 at 11:55 pm

[...] Dropdown Menu Generator and WordPress dropdown menu plugin are used by many professional web designers to create high quality navigation [...]

hubionmac.com » Blog: Neues Design on: August 23rd, 2008 at 5:33 pm

[...] Diese Plug-In liefert die Navigations-Leiste im Header, mit ein paar schönen Drop-Down Menüs. Es lässt sich einfach anpassen und mit einem Simplen Befehl in existierende Sites einbinden. [...]

Drop-down menu - DIY Themes Forums on: September 14th, 2008 at 5:21 pm

[...] been working with the Multi-Level-Navigation plugin, and while it can be tweaked to look quite nice with Thesis, if I use the custom.css file [...]

Javier Seixas | Blog » Blog Archive » Menú desplegable en Wordpress on: October 27th, 2008 at 4:13 am

[...] plugin se llama Suckerfish Wordpress Dropdown Menu. Es muy interesante porque permite editar hasta 6 tipus de submenús diferentes: llamando a [...]

Menús desplegables en la cabecera de WordPress | El Blog de Alex Borrás on: January 20th, 2009 at 7:26 am

[...] Suckerfish WordPress Plugin [...]

Drop down Menus for Wordpress CMS - Plugins reviewed | Macronimous Web Blog on: January 30th, 2009 at 6:18 am

[...]   Discussed below are four drop down plug-ins, for sites enabled with Wordpress.   1. Suckerfish Wordpress Plug-in: It can be downloaded from here. Suckerfish has already existing drop down design, but the same can [...]