CSS Drop Down Primary Links
Quick digression from Ajax. The was a thread on the developers' list about drop down menus, so I thought I would share my approach. This is an pure CSS solution (The .css is probably too site specific to be generally useful, but I included it as an example).
In template.php (pulled out of theme_menu_* and modifed):
<?php
function phptemplate_menu_bar ( $pid, $depth=0 ) {
$menu = menu_get_menu();
$output = '';
if( $depth == 0 ) {
$output .= '<div id="navcontainer"> <ul id="navlist"><li id="home" ><a href="'. base_path() .'"></a></li>'. "\n";
}
else {
$output .= "\n". '<ul>';
}
if (isset($menu['visible'][$pid]) && $menu['visible'][$pid]['children']) {
foreach ($menu['visible'][$pid]['children'] as $mid) {
$children_array = isset($menu['visible'][$mid]['children']) ? $menu['visible'][$mid]['children'] : NULL;
$is_children = ( count($children_array) > 0 );
$children = $is_children ? theme('menu_bar', $mid, $depth+1) : NULL;
if( $depth == 0 ) {
$class = 'class="menu-header"';
}
elseif( $is_children ) {
$class = 'class="submenu-header"';
}
else {
$class = 'class="leaf"';
}
$output .= "<li $class>". menu_item_link($mid) . $children ."</li>\n";
}
}
if( $depth == 0 ) {
$output .= '<li id="last-menu-item"></li>';
}
$output .= '</ul>';
if( $depth == 0 ) {
$output .= '</div>';
}
return $output;
}
?>In page.tpl.php:
<?php
print theme( 'menu_bar', variable_get('menu_primary_menu',0) );
?>In style.css:
/* Menubar Drop - drop-down menubar style */
body { behavior: url( "themes/themes/citris/csshover.htc" ); /* add :hover to ie6 */ }
div#navcontainer {
background: none;
position: absolute; top: 4px; /* position the whole darn thing at the top of the screen */
width: 100%; /* 100% width, so I can center subelements to the screen */
padding: 0px; margin: 0px; /* useful defaults */
border: 0px solid black;
}
/* home/logo link */
#navcontainer li#home {
background-image: url( "images/beigeonblue/menu-logo.gif" );
margin: 0px;
padding: 0px 0px 0px 28px;
border: 0px solid black;
}
#navcontainer li#home a { margin: 0px; padding: 0px; height: 32px; width: 114px; }
/* search form & link */
#navcontainer li.search {
height: 26px; /* 26px = 32 - 6 */
background: url("images/beigeonblue/menu-fragment.gif") repeat-x;
padding: 6px 4px 0px 10px;
width: 121px; /* fiddling with size of search effect size of entire bar */
}
#navcontainer ul a#search-link {
font-size: 90%;
font-weight: normal;
}
/* Rules for all nav elements */
#navcontainer a { text-decoration: none; } /* all links, no underlines */
#navcontainer ul { list-style-type: none; } /* all lists, no decorations */
/* remember: li's are inline and can NOT be controlled like block elements */
/* but floating them magically allows us to regain control the block properties like height*/
#navcontainer li { display: inline; float: left; } /* all list elements inline */
/* Rules for 1st level elements */
#navcontainer ul {
position: relative; /* create container for submenus - so I can line them up */
margin: 0px auto; width: 800px; /* center the puppy - too bad I need to fix the width */
padding-left: 0px; /* space for the left menu side cap: 130 x 32*/
height: 32px; /* match height to background image */
/* border: 2px solid #4A7BAD; */
/* background: url("images/beigeonblue/menu-left.gif") no-repeat top left; */ /* left end cap */
border: 0px solid red;
}
/* make the last top level item special so I can slap the right menu end cap on it */
/* also prevents the inter-item spacer from showing up on the end */
#navcontainer ul li#last-menu-item{
border: 0px solid black;
padding-right: 13px; /* space for right end cap */
height: 32px;
background: url("images/beigeonblue/menu-right.gif") no-repeat top right; /* right end cap */
/* float: left; */
}
/* top level item spacers */
#navcontainer ul li {
padding-right: 1px; /* space to the right for inter-item spacer image */
background: url("images/beigeonblue/menu-spacer.gif") no-repeat top right; /* inter spacer image */
}
/* top level links - standard */
#navcontainer ul a {
border: 0px solid red;
color: black;
font-size: 9pt;
font-weight: bold;
padding: 9px 8px 0px 8px; /* spacing for the text of the links */
/* don't quite understand this: adding float gives the inline box's some block-like control, but making the block's would be deadly */
float: left; /* not needed for positioning, but makes the inline box responsive to height */
height: 24px; /* adjust height to match background-image (24px = 32 - 8 + 0) */
}
/* top-level menu bar links */
#navcontainer ul li.menu-header a, #navcontainer ul a#search-link {
background: url("images/beigeonblue/menu-fragment.gif") repeat-x;
}
#navcontainer ul li.menu-header:hover a, #navcontainer ul li.last-menu-item a:hover {
background: url("images/beigeonblue/menu-fragment-highlight.gif") repeat-x;
}
/**********************************************************/
/*Rules for Second and subsequent levels - start by overwriting almost all top level rules*/
#navcontainer ul li {
position: relative;
}
#navcontainer ul li ul {
position: absolute;
left: 0px;
top: 32px;
background: none;
width: 15em;
margin: 0px;
display: none;
border: 0 solid black;
}
#navcontainer ul li:hover ul, #navcontainer ul li ul:hover { display: block; }
#navcontainer ul#navlist ul li {
float: none;
border: 0px solid blue;
padding: 0px;
background: none;
z-index: 100;
}
#navcontainer ul#navlist ul li a {
float: none;
display: block;
border: 1px solid #DDD;
background-color: #efeede;
margin: 0px;
font-weight: bold;
height: 20px; /* for ie */
}
#navcontainer ul#navlist ul li > a { /* not for ie */
height: 100%;
padding: 0.5em;
}
#navcontainer ul#navlist ul li.submenu-header a{
background: url("images/arrow.png") no-repeat right #efeede;
}
#navcontainer ul#navlist ul li.leaf a{
background: url("") no-repeat right #efeede;
}
#navcontainer ul#navlist ul li a:hover {
font-weight: bold;
color: #228;
background: url( "" ) no-repeat right #fff; /*hack*/
}
#navcontainer ul#navlist ul li.submenu-header a:hover{
background: url( "images/arrow-white.png" ) no-repeat right #fff;
}
#navcontainer ul#navlist ul li.leaf a:hover{
background: url( "" ) no-repeat right #fff;
}
/* 3rd level */
#navcontainer ul#navlist ul ul {
top: 0px;
margin-left: 15em;
visibility: hidden;
}
#navcontainer ul#navlist ul li:hover ul {
visibility: visible;
}
#navcontainer ul#navlist ul ul li a {
background: #efeede;
}
CSS Comment Markers in Your Post
Your CSS file (above) would be more useful if it were not littered with illegal CSS comments markers.
Sometimes you have a legal comment marker: /* comment */
But, mostly, you have a bunch of broken comment markers:
/*hack/
/ comment /
Your CSS demonstration would be more readily useful if one could copy the text from your post and experiment. As it is, if a person copies your sample, then they will have a non-working file because the CSS will never be valid.
Perhaps something in the posting process stripped your ‘asterisks’ inside comments? Because there is no way that the posted file ever worked on any machine, as is.
Just letting folks know that if they do copy this CSS sample portion, then it will not work.
Thanks
oops, I turned on textile in the input filter, and it munged the code. It should be good now.
Bug report
The script seems to have a bug when used in drupal over IE. If the dropdown items overlay another div tag, the backgrounds of the dropdowns seem to become transparent and if there is another link under it, the menu is unclickable. Tried adjusting this setting the atribute visibility: visible; and the z-index, neither helped. Someone please have a look and if a bug fix is needed, please fix. I couldn’t find a solution. The website I was testing it on is currently located at http://migrate.mywebalt.org
Bug report
The code seems to have a bug at some point, most probably a CSS problem. When the menu is used in IE, if the menu items overlay another div or a page title, the menu becomes unclickable. The background turns transparent and thus the item on that tab cannot be clicked. Tried to fix it with x-index and visibility but no use. The site i’m currently testing it on is located at http://migrate.mywebalt.org and the css path is http://migrate.mywebalt.org/style.css if someone wonna have a look :)