Website Design, Web Development Blog
Dropdown menu in Drupal 6 theme
Drop down menu – a smart way to present really long list of navigation links. While there have been many JavaScript based drop down menu for ages (read Dreamweaver’s mm menu), in the recent past, CSS based drop down menus have driven a more convincing point.
When it comes to Drupal, we can implement a drop down menu in your theme using the “Son of Suckerfish” CSS menu. What we are going to do is, define a region to print the suckerfish menu, have a preprocess function in the theme template file to create the appropriate link levels, add CSS and finally call it in the page.tpl.php file. Additionally, for IE, we are going to have a nifty JavaScript to fix some CSS issues. Here we go:
- Add suckerfish region in your theme’s .info file, like,
$regions[suckerfish] = Suckerfish - Create a new suckerfish.css file in your theme folder’s root with the following:
#primary a.active,
#secondary a.active {
color: #CDCD8F;
}
#suckerfishmenu .block {
margin-bottom: 0;
padding-bottom: 0;
}
#suckerfishmenu .block, #suckerfishmenu .box {
padding: 0;
}
#suckerfishmenu .title {
display: none;
}
#suckerfishmenu {
line-height: 28px;
background-color:#787878;
border-top: 1px solid #fff;
}
#suckerfishmenu ul.menu { /* top level ul */
padding: 0 0 0 0px;
list-style: none;
z-index: 100;
display: inline;
float:left;
}
#suckerfishmenu a {
color: #fff;
display: block;
padding: 0px 14px 0px 14px; /* padding between menu elements */
margin: 0;
text-decoration: none;
font-size: 98%;
font-weight: bold;
border-right:1px solid #fff;
}
#suckerfishmenu a:active,
#suckerfishmenu a:hover {
text-decoration: none;
background-color:#005daa;
}
#suckerfishmenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
height: 1%;
}
/* second-level lists */
#suckerfishmenu ul.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#suckerfishmenu ul.menu li ul {
position: absolute;
width: 200px;
left: -999em; /* to hide menus because display: none isn't read by screen readers */
}
#suckerfishmenu ul.menu li li {
/* height: auto; */
float: left;
width: 200px;
}
#suckerfishmenu ul.menu li li a:link,
#suckerfishmenu ul.menu li li a:visited {
color: #fff;
background: #787878;
width: 170px;
border: 1px solid #484848;
}
/********************************************************/
/* ADD DOWN ARROW */
/*
#suckerfishmenu ul.menu li.expanded a {
background: #787878 url(../images/menu_arrow_down.jpg) top right no-repeat;
padding-right:20px;
}
#suckerfishmenu ul.menu li.expanded a:hover {
background: #484848 url(../images/menu_arrow_down_h.jpg) top right no-repeat;
}
*/
/********************************************************/
#suckerfishmenu ul.menu li li.expanded a {
background: #787878 url(../images/menu_arrow.png) 100% 50% no-repeat;
}
#suckerfishmenu ul.menu li li.expanded a:active,
#suckerfishmenu ul.menu li li.expanded a:hover {
background: #005daa url(../images/menu_arrow.png) 100% 50% no-repeat;
}
#suckerfishmenu ul.menu li ul a:active,
#suckerfishmenu ul.menu li ul a:hover {
background-color: #005daa;
text-decoration: none;
}
#suckerfishmenu ul.menu li li.expanded ul.menu a {
background: #787878;
}
#suckerfishmenu ul.menu li li.expanded ul.menu a:active,
#suckerfishmenu ul.menu li li.expanded ul.menu a:hover {
background: #005daa;
}
#suckerfishmenu ul.menu li li.expanded ul.menu li.expanded a {
background: #787878 url(../images/menu_arrow.png) 100% 50% no-repeat;
}
#suckerfishmenu ul.menu li li.expanded ul.menu li.expanded a:active,
#suckerfishmenu ul.menu li li.expanded ul.menu li.expanded a:hover {
background: #005daa url(../images/menu_arrow.png) 100% 50% no-repeat;
}
#suckerfishmenu ul.menu li li {
}
#suckerfishmenu ul.menu li ul a {
color: #fff;
width: 200px;
line-height: 26px;
font-size: 95%;
}
#suckerfishmenu ul.menu li ul a:active,
#suckerfishmenu ul.menu li ul a:hover {
background: #005daa;
text-decoration: none;
}
/* margin for pullouts */
#suckerfishmenu ul.menu li ul ul {
margin: -29px 0 0 200px;
}
#suckerfishmenu ul.menu li:hover ul ul, #suckerfishmenu ul.menu li:hover ul ul ul, #suckerfishmenu ul.menu li.sfhover ul ul, #suckerfishmenu ul.menu li.sfhover ul ul ul {
left: -999em;
}
#suckerfishmenu ul.menu li:hover ul, #suckerfishmenu ul.menu li li:hover ul, #suckerfishmenu ul.menu li li li:hover ul, #suckerfishmenu ul.menu li.sfhover ul, #suckerfishmenu ul.menu li li.sfhover ul, #suckerfishmenu ul.menu li li li.sfhover ul {
left: auto;
}
#suckerfishmenu ul.menu li ul ul ul{
margin: -29px 0 0 200px;
}
#suckerfishmenu ul.menu ul li:hover ul ul, #suckerfishmenu ul.menu ul li:hover ul ul ul, #suckerfishmenu ul.menu ul li.sfhover ul ul, #suckerfishmenu ul.menu ul li.sfhover ul ul ul {
left: -999em;
}
#suckerfishmenu ul.menu ul li:hover ul, #suckerfishmenu ul.menu ul li li:hover ul, #suckerfishmenu ul.menu ul li li li:hover ul, #suckerfishmenu ul.menu ul li.sfhover ul, #suckerfishmenu ul.menu ul li li.sfhover ul, #suckerfishmenu ul.menu ul li li li.sfhover ul {
left: auto;
}
#suckerfishmenu ul.menu li li.expanded ul.menu li.expanded ul.menu li a { background: #787878; }
#suckerfishmenu ul.menu li li.expanded ul.menu li.expanded ul.menu li a:active, #suckerfishmenu ul.menu li li.expanded ul.menu li.expanded ul.menu li a:hover {
background: #005daa;}
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded a { background: #787878 url(../images/menu_arrow.png) 100% 50% no-repeat; }
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded a:active, #suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded a:hover {
background: #005daa url(../images/menu_arrow.png) 100% 50% no-repeat;}
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu a { background: #787878; }
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu a:active, #suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu a:hover { background: #005daa; }
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded li ul.menu li.expanded a { background: #787878 url(../images/menu_arrow.png) 100% 50% no-repeat; }
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded li ul.menu li.expanded a:active, #suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li.expanded li ul.menu li.expanded a:hover {
background: #005daa url(../images/menu_arrow.png) 100% 50% no-repeat;}
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li ul.menu a { background: #787878; }
#suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li ul.menu a:active, #suckerfishmenu ul.menu li li.expanded ul.menu li ul.menu li ul.menu a:hover {background: #005daa; }
- Open the template.php file from your theme folder (if it does not exist, create a new template.php file in your Drupal theme folder’s root). Add the following to your template.php file (remember to change all your_theme_name to your theme name)
/* adds suckerfish.css */
drupal_add_css(drupal_get_path('theme', 'your_theme_name') . '/suckerfish.css', 'theme');
function phptemplate_menu_links($links, $attributes = array()) {
if (!count($links)) {
return '';
}
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level ".$attributes['class']. "\" id=\"".$attributes['id']."\">\n";
$num_links = count($links);
$i = 1;
foreach ($links as $index => $link) {
$output .= '<li';
$output .= ' class="';
if (stristr($index, 'active')) {
$output .= 'active';
}
elseif((drupal_is_front_page()) && ($link['href']=='<front>')){
$link['attributes']['class'] = 'active';
$output .= 'active';
}
if ($i == 1) {
$output .= ' first'; }
if ($i == $num_links) {
$output .= ' last'; }
$output .= '"';
$output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
$i++;
}
$output .= '</ul>';
return $output;
}
- Open your page.tpl.php, add the following code, where ever you want the suckerfish menu to come:
<div id="suckerfish_container"> <?php if ($suckerfish): ?> <div style="clear:both"></div> <div id="suckerfishmenu" class="clear-block"><?php print $suckerfish; ?></div> <?php endif; ?> </div><!--suckerfish_container-->
- Go to your menu administration page (admin/build/menu) and add menu items to your primary links with multiple levels. Remember to set the parent links to expanded, so that it will drop down the child links.
- Go to your blocks page (admin/build/block) and place the primary links under the suckerfish region. If you don’t see the suckerfish region, go to admin/build/themes and enable your theme again
- Any style / color changes can be done in the suckerfish.css file that we added earlier
IE 6 Fix
- Create a new suckerfish.js file in your theme folder’s root and add the following code
sfHover = function() {
var sfEls = document.getElementById("suckerfishmenu").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);
- Add the following IE specific code before the </head> in your drupal theme’s page.tpl.php
<!--[if lte IE 6]> <script type="text/javascript" src="<?php print $GLOBALS['base_url']."/"; print $directory; ?>/suckerfish.js"></script> <![endif]-->
Go back to your browser and enjoy your drop down menus.
While customizing the Drupal Theme for MIT – Enterprise Forum’s (India) site, I was asked to add a drop down menu. Roople Theme‘s Newsflash Drupal Theme implements the Son of Suckerfish menu for drop down. I used portions of Newsflash theme as a base for putting Suckerfish menu into my new theme. The chunks of code used in this article is taken from the Newsflash Drupal theme. Newsflash theme provides many more features, that can be set easily in the theme settings. Another popular module that I have used for drop down menus is Nice Menu module.
The Son of Suckerfish menu was earlier featured in http://www.htmldog.com/articles/suckerfish/dropdowns/.
| Print article | This entry was posted by Sridhar on April 3, 2010 at 12:24 pm, and is filed under Drupal. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No trackbacks yet.
Slideshow with Drupal Views Cycle module
about 1 year ago - 13 comments
Views Cycle is a nice Drupal module that uses the jQuery Cycle plug-in to provide image slideshow with many different types of transition effects.
about 1 year ago
Thank you. This is very cool. One question, though… The menu is displayed with the “title” of the menu above the menu itself (e.g., “Primary Links” appears above the dropdown menu). Is there a simple way to remove this? (Entirely, not just in CSS.)
Thanks!
about 1 year ago
Looks like a block title is set for your menu links. Try this: go to admin/build/block and click on “configure” link of your menu. This should take you to the Block Settings Page. See if a Block Title is set. If yes, replace it with or remove any text in the field. This will override the default block title and will not print the title.
Let me know if this helped.
about 1 year ago
Interesting… Although I’m able to add the Primary Links/Suckerfish menu to any block, it doesn’t actually have a “Configure” link next to it. Any ideas on that?
I’ll compare my theme with Garland and see if I’ve done anything wrong with the Block (don’t think so, but I’ll check).
about 1 year ago
Try this else – if you are using primary links, try going directly to admin/build/block/configure/menu/primary-links. Let me know if that worked.
about 1 year ago
Yes, it works. For now, I’ve just hidden the title via CSS. Not optimal, but probably ok for this client. Thanks.
about 1 year ago
Ah! Just went and looked today and I _can_ configure the menu. I must have reimplemented something that made it work again. Thanks!
about 1 year ago
Ive been having problems with this working in all browsers except firefox. Any idea how I might fix this issue?
about 1 year ago
Which browsers have you tried with? (IE6, IE8, Chrome, Safari)
Have you tried clearing Drupal cache? Have you tried clearing the browser cache?
Use FireBug to check if the required JS files are loading. Specifically, for IE6, check if the IE6 fix is in place & the required files are loading.
about 1 year ago
Ive tried all of the browsers you listed, in Chrome and Safari all the text for the links gets crumbled in the left corner over lapping each other. in IE8 the drop down doesn’t show so im guessing the fix isn’t loading, so i have just the primary links showing right now and am gonna start fresh again.
about 1 year ago
The fix is only for IE6. In Chrome & IE8, try using the developer tools to see under the hood, what is getting loaded.
about 1 year ago
I can’t determine why it doesn’t work in IE8 or why chrome will not print the spaces between the links
about 1 year ago
If it is online, give me the link, let me check it out.
about 1 year ago
http://www.musicibe.com/site
about 1 year ago
In your suckerfish.css, you have set:
#suckerfishmenu li {
display:inline;
float:left;
height:1%;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
}
Try setting the height to about 10% instead of 1%. I could make it work in Chrome. In IE6 the drop down happens very far from the link. Let me know if that fixes it.
about 1 year ago
thank you that fixes the issue with Chrome, but IE8 I still run into a problem with the drop down not showing.
about 1 year ago
any idea what the issue may be there?
about 1 year ago
got the issue of it not showing fixed, but if you could please help me as to why its too far to the right it would be greatly appreciated. Thank you again for your help.
about 1 year ago
In suckerfish.css, for #suckerfishmenu ul.menu li ul you have set left to -999em. Try setting it to 50px – this would calculate it from the left of your container. Post back if it works.
- SM
about 1 year ago
I got it, I just needed to add a clear: left feature to #suckerfishmenu ul.menu li ul