Low-Pain Drop-Down Navigation Menu for YAML

Having recently dug into css-frameworks, I’ve found Dirk Jesse’s YAML to be in a league of its own. While I think that support for IE5.5 could be dropped, YAML makes many right choices regarding abstraction and accommodating browser quirks.

And while YAML has two basic navigation bars out of the box (named sliding-door and shiny-buttons), I wanted a drop down menu on hover over the navigation items, with as much CSS and as little JavaScript as possible.

After some searching I found the Drop-Down-Menu Framework (DDMF), and it looks like it makes many right choices. It uses css for non-IE browsers javascript-frameworks for IE6 and 7 so it can avoid some of the ugly conditional HTML needed to get a drop-down to work with only css in these IE versions. One thing that’s missing is tab-navigation so there is no drop-down when the users navigates to a menu item containing a drop-down menu with the keyboard.

In its original form DDMF will work with its own HTML templates, but to integrate it with the YAML navigation menus some changes are needed.

The first step is of course to include the css and javascript of the framework in the head tag of your pages your pages as outlined in the examples.
Then, starting with the DDMF files, the included JavaScript (jquery.dropdown.js) might let IE6 display the drop-down behind the page content. This well known z-index issue with IE6 can be fixed, so the original file

//jquery.dropdown.js

$(document).ready(function(){

$("ul.dropdown li").dropdown();

});

$.fn.dropdown = function() {

$(this).hover(function(){
$(this).addClass("hover");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
},function(){
$(this).removeClass("hover");
$('.open',this).removeClass("open");
$('ul:first',this).css('visibility', 'hidden');
});

}

will become

$(document).ready(function(){

$("ul.dropdown li").dropdown();

**if (jQuery.browser.msie) {  

var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
}**

});

$.fn.dropdown = function() {

$(this).hover(function(){
$(this).addClass("hover");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
},
function(){
$(this).removeClass("hover");
$('.open',this).removeClass("open");
$('ul:first',this).css('visibility', 'hidden');
});

}

Please don’t mind me dealing only with jQuery, but you should find similar fixes for the other two js-frameworks supported by DDMF, i.e. mootools and scriptaculous.

Moving on to the HTML, the YAML plain vanilla

<ul>  
  <li><a href="#">Table Of Contents</a></li>  
  <li><a href="#">Vehicles</a></li>  
  <li><a href="#">Next Example</a></li>  
  <li><a href="#">Previous Example</a></li>  
</ul>  
> >

becomes

> >

As you see, the changes are very minor, just add the two class declarations to the

 Share TweetBack to Top