Long ago in a far away land, Eric Meyer, author of "CSS: The Definitive Guide," wrote about his idea that drop down menus could be driven by CSS alone - plus a little javascript to deal with IE6.

This how-to, adds drop down navigation to any menu, and then more specifically the primary links in Garland.

Also note that the Nice Menus module is another way to add drop down and flyout menus to your site.

To start, created a simple menu structure, making sure to expand the parent items. Then enable the menu as a block to the content region, as it serves as a more generic example.

Below is what the menu and source look like for this example:

<div id="block-menu-2" class="clear-block block block-menu">
<h2>Primary links</h2>
<div class="content">
<ul class="menu">
	<li class="expanded"><a href="/node/1">One</a>
		<ul class="menu">
			<li class="leaf"><a href="/node/4">Apple</a></li>
			<li class="leaf"><a href="/node/5">Banana</a></li>
		</ul>

	</li>
	<li class="expanded"><a href="/menus/node/2">Two</a>
		<ul class="menu">
			<li class="leaf"><a href="/node/6">Orange</a></li>
			<li class="leaf"><a href="/node/7">Pear</a></li>
		</ul>
	</li>
	<li class="expanded"><a href="/menus/node/3">Three</a>
		<ul class="menu">
			<li class="leaf"><a href="/node/8">Blueberry</a></li>
			<li class="leaf"><a href="/node/9">Grape</a></li>
		</ul>
	</li>
</ul>
</div>
</div>

Next, open up the theme's style.css and add this to bottom:

/**
 * Drop down menu.
 */
#block-menu-2 ul li {
position:relative;
float:left;
}
#block-menu-2 ul li a {
display:block;
padding-bottom:20px;
float:left;
}
#block-menu-2 ul li ul {
display:none;
}
#block-menu-2 ul li:hover ul, #block-menu-2 ul li.sfhover ul {
display:block;
position:absolute;
left:0px;
margin-top:25px;
z-index:10
}
#block-menu-2 ul li ul li {
clear:left;
}
#block-menu-2 ul li ul li a {
padding-bottom:0px;
}

And to deal with IE6, add the following to the

of the theme's page.tpl.php
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("block-menu-2").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);
</script>

This is now a working drop down menu. This menu could now be moved to a new region or styled further.

In order to have the menu work with Garland's primary links, a few more styles are needed. First, add the following styles to the theme's style.css. Note: these are in addition to the styles already added.

#block-menu-2 ul li a, 
#block-menu-2 li a:link, 
#block-menu-2 li a:visited {
background:transparent url(images/bg-navigation-item.png) no-repeat scroll 50% 0pt;
color:#FFF;
display:block;
margin:0pt 1em;
padding:0.75em 0pt 20px;
}
#block-menu-2 li a:hover, 
#block-menu-2 li a.active {
background:transparent url(images/bg-navigation-item-hover.png) no-repeat scroll 50% 0pt;
color:#FFF;
}
#block-menu-2 ul li ul li a,
#block-menu-2 ul li ul li a:link,
#block-menu-2 ul li ul li a:visited,
#block-menu-2 ul li ul li a:hover,
#block-menu-2 ul li ul li a:active{
z-index:100;
padding-top:7px;
padding-bottom:0px;
margin-bottom:-5px;
background:none;
color:pink;
}
#header {
position:relative;
}
#block-menu-2 {
z-index:4;
position:absolute;
right:0px;
top:-6px;
}
#block-menu-2 ul li.expanded {
background:none;
}
#block-menu-2 li {
background:none;
list-style-image:none;
list-style-type:none;
padding:0px;
}
#block-menu-2 .content {
margin:0px;
}

Next, change the Primary links block from the content region to the header region.

Finally, make the following changes to the theme's page.tpl.php.

Replaced this:

<?php if (isset($primary_links)) : ?>
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
<?php endif; ?>
<?php if (isset($secondary_links)) : ?>
<?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
<?php endif; ?>

with this:

<?php print $header; ?>

and replace this:

<div id="header-region" class="clear-block"><?php print $header; ?></div>

with this:

<div id="header-region" class="clear-block"></div>

Done!

Comments

alek123’s picture

This one solved my problem: http://drupal.org/project/dhtml_menu