WordPress Suckerfish Menu
- September 7th, 2007
- Filed under: WordPress, World Wide Web
- Tags: suckerfish, WordPress
Easy Suckerfish menu for Wordpress
This Suckerfish menu version is a light-weight drop-down three-level horizontal menu.
To view an example of the Wordpress Suckerfish menu in action, hover over
“Pages | Categories | Archives | Links” at the top of this website.
Other examples of the Suckerfish menu used with WordPress can be found at
Invoke Media and RockinThemes.
How-to add the Wordpress Suckerfish menu to your website
In the header.php file, before the closing </div> for <div id=”header”>
(alternatively, before <hr />).
(note: you may need to center the menu using <center> …menu code… </center> and edit the style.css file to adjust the width of the menu to fit within your theme)
copy and paste:
<ul id="nav">
<li><a href="">Pages</a>
<ul class="pages">
<?php wp_list_pages('title_li=&depth=1');?>
</ul>
</li>
<li><a href="">Categories</a>
<ul class="categories">
<?php wp_list_cats();?>
</ul>
</li>
<li><a href="">Archives</a>
<ul class="archives">
<?php wp_get_archives('type=monthly');?></ul></li>
<li><a href="">Links</a>
<ul class="categories"><?php get_links(-1,'<li>', '</li>', ' - ');?>
</ul>
</li>
</ul>
In the style.css file, at the end
(note: you may need to make adjustments to the width of the menu to fit within your theme. For the default theme, width: 95%)
copy and paste:
#nav, #nav ul {
width : 100%;
height : 1.8em;
list-style : none;
font-weight : bold;
background : #faf5d7;
padding : 0;
margin : 0;
border : solid #eda;
border-width : 0;
}
#nav a {
display : block;
width : 10em;
width : 6em;
color : #7c6240;
text-decoration : none;
padding : 0.25em 2em;
border : none;
}
#nav li {
float : left;
padding : 0;
width : 10em;
}
#nav li ul {
position : absolute;
left : -999em;
height : auto;
width : 14.4em;
width : 13.9em;
font-weight : normal;
border-width : 0.25em;
margin : 0;
}
#nav li li {
padding-right : 1em;
width : 13em;
}
#nav li ul a {
width : 13em;
width : 9em;
}
#nav li ul ul {
margin : -1.7em 0 0 14em;
background: #faf5d7;
}
#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;
}
#nav li:hover, #nav li.sfhover {
background : #eda;
}
Tags: suckerfish, WordPress
Bryan Chan said,
October 2, 2007 @ 3:21 pm
Hi there, nice example, but can you make clear how to integrate the header into the let say the default theme of WP?! not every one knows how exactly to change the code..
and by the big way!
where is the example of the output of these scripts?!
Dustin said,
October 2, 2007 @ 10:41 pm
Good points, Bryan. I’ll clear up the instructions.
Bryan Chan said,
October 5, 2007 @ 12:15 pm
Hello Dustin, seems the instruction is clearer now, and I will definitely try it.
I found another example you might wanna take a look at:
[http://www.invokemedia.com/css-dropdown-menu-with-wordpress.html]
Bryan Chan said,
October 5, 2007 @ 12:25 pm
I have try your code, the CSS is fine, but the upper header did not work as I intended it to.
I have pages as my main header menu, and I am using K2 as my theme, but I could not find a way to integrate it.
Can you help me about it?
Dustin said,
October 5, 2007 @ 4:15 pm
The K2 theme that I found is located at http://getk2.com/
The problem was that the WordPress text editor converts the quotation marks in the header.php code into something else.
I added the Google Code Prettify script to this site, so now the code output should be correct.
You should be able to copy and paste the code now, without error.
Bryan Chan said,
October 5, 2007 @ 7:33 pm
Yeah that quotation error I noticed too.
Thanks for correcting it
Now that it works and does have drop down menu, but there is another issue; I can’t see my page’s sub pages in the drop down menu, and also the code give me another top navigation menu instead of integrates it…
How do I integrate it with the K2(or the default Kubrick theme)? so that I can see different levels of sub pages?
Dustin said,
October 5, 2007 @ 8:17 pm
Yes, it will give you an additional menu bar. If you want to remove “Pages” from the Suckerfish menu, delete:
< li >< a href="" >Pages< /a >
< ul class="pages" >
< ?php wp_list_pages('title_li=&depth=1');? >
< /ul >
< /li >
If you wish to keep both menus and repeat the “Pages”, but with sub-Pages included, you may have to give the sub-Page a Page parent. In your WordPress admin area, choose to edit your Page. To the right is a “Page Parent” drop-down list. Select the appropriate Page parent.
I also noticed that in the K2 theme, that the post area is in front of the drop-down menu. Do you see that, too?
Marcus said,
October 18, 2007 @ 11:28 pm
Dustin,
I’m trying to figure out how to have only my Pages laid out in the header bar (I don’t need Archive, Categories, Links, etc.). I don’t mean have a “Pages” link where my pages drop down under it, which is what your method gives. I mean have my actual pages in the header horizontally with their own drops. I’ve been able to tweak Nathan Rice’s Rockin’ Suckerfish theme (http://rockinthemes.com/rockinsuckerfish2-2-column-suckerfish-free-wordpress-theme-released/) to get my pages listed in the header, but I couldn’t get them to have dropdown effects (that is, have a child page drop below a parent page).
Any ideas?
Thanks.
Dustin said,
October 19, 2007 @ 1:04 am
Marcus, your idea of drop down pages seems doable. Leave your website URL or send me an e-mail with the URL at email@dustinedwards.info and I will swing by to see what you have and what can be done.
Shonari said,
October 30, 2007 @ 6:28 pm
Great workthough, havent tried it yet but it looks doable. Is it possible to:
a) change the name “pages” to something else for example have on the main menu “cars” and in the dropdown you have “toyota”, “honda” etc etc
b) have other pages in the main menu and not in the dropdown (i dont need the categories page etc but i have other pages that i dont want in the dropdown but in the main menu. Example MAIN NAV: “Cars (drop down sub menu, toyota, honda, Mitsubishi) then ABOUT, CONTACT, HOME, TRUCKS
Ive been look everywhere for something like this with no luck, luckily i stumbled here.
Thanks
Shonari said,
October 30, 2007 @ 6:40 pm
Is it possible to use the page-id tag to select specific pages that you want in the dropdown and leave the rest out as a part of the main menu?
Shonari said,
October 30, 2007 @ 7:03 pm
Maybe this will help
http://gmurphey.com/2006/10/05/wordpress-plugin-page-link-manager/
Dustin said,
October 30, 2007 @ 10:11 pm
In the WordPress Codex, they have examples of how to exclude items from a menu or to include only specific items.
http://codex.wordpress.org/Template_Tags/wp_list_pages#Display_No_Heading
Shonari said,
October 30, 2007 @ 11:22 pm
I tried all that you said to no avail. it just screws with my theme. I sent an email to the address you provided
Shonari said,
October 31, 2007 @ 1:13 am
OK i got it to work. But the Page Tags as far as i can tell can either include or exclude not have some in the list and the others sitting on the main page. How can i get some to sit in the list (ie the dropdown) and the others in the the main nav?
Dustin said,
October 31, 2007 @ 1:57 am
I visited your site and will research ways to try to make it do what you want. I may have something by tomorrow night.
Shonari said,
October 31, 2007 @ 3:06 am
Thanks, you can check again i finally did! hours of non stop fiddling. The only problems to fix now is the fact that when The menu is too long it wraps and mess up the whole alignment and when i try to move the header text (ie Name of site)by adjusting the margin the nav bar moves as well. sucks being a noob
Dustin said,
October 31, 2007 @ 7:03 am
Cool. It looks great. Have you considered padding the Header H2 ?
Shonari said,
October 31, 2007 @ 12:07 pm
#header {
background: #59780a;
height: 116px;
padding: 15px 0px 0px 0px;
}
#header h2 {
color: #ffffff;
font-family: goudy old style, “Times”, verdana, serif;
font-size: 20pt;
font-variant: small-caps;
font-weight: normal;
margin-top: 55px;
margin-bottom: 0px;
margin-left: 13px;
letter-spacing: 2px;
}
thats my CSS for the H2 but if i change the margin, not only does the H2 move but so does the menu bar. How do i add padding to this?
Dustin said,
October 31, 2007 @ 4:36 pm
I think you can decrease your margin-top and then add padding-bottom. I would begin by changing the margin-top until you place the header h2 where you want it, relative to the top of the header div. Then, adjust the padding-bottom to push the menu to the position you want it at.
Shonari said,
October 31, 2007 @ 6:31 pm
Thanks…can i do the same for the text in the menu bar? ie i can only have text up to a certain number of characters. after that it either wraps the text or screws with the presentation. Some of the text in the menue dont need such a large area for the hover, can i just place an auto width in relation to the text or padding or sumthing?
For example the CLUBS/SCHEMES heading i had to remove the “s” at the end of each word because it would wrap and mess with the alignment of the site. And the heading Q&A doesn’t need all that space around it (see it when you hover)
Patrick said,
November 2, 2007 @ 4:10 am
doesn’t work in IE 6.
Dustin said,
November 2, 2007 @ 4:39 am
I no longer have anything that runs with IE 6, so I cannot play around with it.
A useful article for you may be
http://www.builtfromsource.com/2006/10/23/a-fix-for-suckerfish-dropdowns-in-ie-7/
You may be able to spot something that may help you.
Also, look at the original Suckerfish Menu at A List Apart
http://www.alistapart.com/articles/dropdowns/
Dustin said,
November 2, 2007 @ 4:42 am
To Shonari,
Adjust the different width ems to suit the length of the words for each drop down menu and submenu on your website.
Dave Haygarth said,
November 20, 2007 @ 10:32 am
Absolutely brilliant… ! Thanks - got it working a treat at http://www.pelotoninternet.com/ - with bullet image in list too.
Dustin said,
November 20, 2007 @ 4:04 pm
It looks terrific, Dave!
Chris said,
November 22, 2007 @ 9:38 pm
Hi,
I’m looking to do exactly the same thing Marcus describes above - that is have my parent pages list as horizontal nav, and have child pages drop down below them. (http://dustinedwards.info/wordpress-suckerfish-menu/#comment-11). Marcus (or Dustin), did either of you ever come up with a solution?
thanks!
Mike said,
December 30, 2007 @ 4:53 pm
Hey,
I am looking for the same solution as Chris and Marcus:
(http://dustinedwards.info/wordpress-suckerfish-menu/#comment-11). Marcus (or Dustin),
Would love to know if you have it solved. Thanks
music said,
January 9, 2008 @ 2:11 am
very interesting.
i’m adding in RSS Reader
Ryan said,
January 21, 2008 @ 9:28 am
Hi,
I’ve created a WordPress Plugin for this a few days ago … Ryans’ Suckerfish Dropdown WordPress Plugin
Once I get some feedback from users I will do some improvements. So if anyone has any advice/criticisms please let me know so I can implement them in the next version
Dustin said,
January 23, 2008 @ 8:48 am
Hi Ryan,
It is nice to see someone else working on this. I am really busy finishing up my Ph.D. and have very little time to play around with the suckerfish menu, as interesting as it is.
Feel free to browse through the above comments to see some effects that some people are interested in.
Jamie said,
March 18, 2008 @ 7:05 am
Hey I’m trying to figure out the same thing as Shonari I want to create a static website using Ryan Heller’s simple CMS theme and display only individual parent pages and their children I don’t want blogroll categories and the like when using suckerfish- can someone post the solution cos everyone solves it and then doesn’t bother letting anyone else know how its done. I’m a complete NOOB with only a little PHP experience. My page is being tested locally so I can’t show anyone anything yet.
jamie
Dustin said,
March 21, 2008 @ 6:40 am
The good news is, you do not need to know PHP to build your menu.
The suckerfish menu is essentially a list that is written using HTML code.
Please read comment 7.
If you look in the example, if there is something you want to remove, just delete it between the arrow li arrow and arrow /li arrow
James said,
August 14, 2008 @ 3:18 pm
Hello
I had a question - how do you add your TAGS to the menu?
Dustin said,
August 14, 2008 @ 3:54 pm
Hi James,
I made a Tag Cloud:
< ?php echo (wp_tag_cloud()); ?>
If you would like to make a Tag List, the link has information:
http://wordpress.org/support/topic/161323
I have updated my Suckerfish menu and need to post that code here. It works with Firefox, IE 7 and IE 6. I’ll try to remember to do it tonight.
James said,
August 14, 2008 @ 11:57 pm
If you can do it asap that would be good.
Id like it so that if you roll over tags, all the tags go in the menu, just like categories etc….
James said,
August 15, 2008 @ 2:35 pm
Any update bro?