Sridhar

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

Views Cycle is a nice module that uses the jQuery Cycle plug-in to provide image slideshow with many different types of transition effects. In Drupal, you are going to create a content type to upload images, generate a view for the uploaded images and style it with the Views Cycle module. The module also provides with many variable settings that you can set. [For Drupal 6]

Requirements:

• CCK: http://drupal.org/project/cck
• Views 2: http://drupal.org/project/views
• Views cycle: http://drupal.org/project/views_cycle
• jQuery cycle plugin: http://www.malsup.com/jquery/cycle/

Installation:

1. Download and enable CCK & Views modules. To allow image upload, also add imagefield module. Imagecache is optional.
2. Download views_cycle and the jQuery cycle plugin. The jQuery cycle plugin also includes a javascript file – jquery.cycle.all.min.js. Copy this file into the views_cycle module directory and rename it as jquery.cycle.js. Now, enable views_cycle module.

Create content type:

1. Login as admin and go to admin/content/types and click on the Add content types tab to add a new content type
2. Give a Name to your content type and enter the machine-readable Type. For example, Name – Animation and Type – cycle_anim
3. In Submission form settings, remove the body field
4. In Workflow settings, uncheck Promoted to front page
5. In Comment settings, set it to Disabled
6. Click on the Save button
7. In the Content types list page, click on Manage fields for the new content type that you have created just now
8. Add a new field with Label as Image and Field name as field_anim_image
9. Under Select a field type, select File and in Form element select Image. Click on Save button
10. In Permitted upload file extensions, enter values as png gif jpg jpeg
11. Under Global settings, check the Required checkbox and set Number of values to 1. Click on the Save field settings button
12. Click on the Display fields. And under Teaser, select Image and under Full node, select Image linked to node

Create content:

1. Browse to node/add and click on the Animation content type to add images for the animation
2. Create at least 2 nodes with different images

Create view:

1. Browse to admin/build/views/add
2. For View name, enter Animation and set the View type to Node. Click Next button
3. Click + (Add) button under Fields and select Content: Image (field_anim_image). Click the Add button
4. Set the Label to None and under Format, select Image linked to node. Click on Update button
5. Click + (Add) button under Filters. Select Node: Published and Node: Type. Click on Add button
6. Under Node: Published configuration settings, set it to Yes and click Update button
7. Under Node: Type configuration settings, for Is one of, check Animation under Node type. Click Update button
8. In the Basic settings group, for Style, click on Unformatted link. Set the default to Cycle and click Update button
9. Under Default style options, set the various values for your animation. You can come back to the view and change the values later.
10. Now you can add a block view or a page view for your animation.

With my animation, the Views Cycle out put the animation with images put in unordered list and default padding on the top and left sides of the container. One way to fix this is through your CSS. Though this module is simple and very nice, there are other variations for slideshow / carousel / rotator with many more features like the DD Block (http://drupal.org/project/ddblock) for Drupal. Have a look at the comparison here http://drupal.org/node/418616.

[This article is for Drupal 6]