Dirk Bergmann

Developer, panographer. Does consultancy work from own company. Lives in Chiang Mai, Thailand.

Twitter

Chiang Mai

Hua Hin

Thailand Hotels

ListVote - List. Vote. Learn.

Partnerseek - Find Partners

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

  • Table Of Contents
  •      
  • Vehicles
  •      
  • Next Example
  •      
  • Previous Example
  •      

    becomes

  • Table Of Contents
  •      
  • Vehicles      
             
    • Planes
    •        
    • Trains
    •        
    • Automobiles
    •        
    • Bicycles
    •        
    • Motorcycles
    •                 
    • Next Example
    •      
    • Previous Example
    •      

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

        s.

        Moving on to the css, the sliding-door navigation might actually already look pretty good now, perhaps you?d want to add some styling to the ul.dropdown ul li element. I had far more trouble getting the shiny buttons to display correctly, and here are some important changes which you should include in your own custom css file at the bottom of all the css-includes (so that this custom file will be included last and override any YAML specific styling). Essential changes are bold:

        /* your.css /
        .hlist{overflow:visible;}
        ul.dropdown ul li {position:relative;
        border:0;
        *}
        **ul.dropdown li.hover ul  {background:#d3d3d3 url('/images/my_fashionable_gradient.gif') repeat-x scroll; }
        ul.dropdown ul li a {width:100%;border-bottom:1px solid #a3a3a3;height:auto;background:#d3d3d3 url('/images/my_fashionable_gradient.gif') repeat-x scroll;}

        As I?m on Linux I don?t have access to IE7 but I?ll try in the next few days if it might be possible to achieve the drop-down in IE7 with only css as seems to be the case with IE8. Then I?ll update the post with the results.

        As always, working with css is can be tedious and frustrating so YMMV. Please share your experiences with this approach in the comments. Also a live example at http://chiangmai.net with an include structure adapted for Ruby on Rails.

        #

        Philipp: Hi dude, I tried to include what you wrote on your page in order to improve my YAML shinybuttons layout with a dropdown menu but somehow it wont work. All the subcategrories are included but the menu wont drop down. Can you help me ? greetz from Germany, Philipp

        Sebastian Springer: Hey, I was looking quite a while for a suitable dropdown menu and stumbled upon your sollution. I have implemented the Menu an I works fine except for a visibility problem. The submenu seems to be hidden behind the object below. I already tried to set the z-index of the elements definded through the menu's css but it didn't change anything. Have a look here: http://sinfonetzia.de/test/. "Das Orchester" should have subitems. I will try to set up the rest of the website an return to the menu lateron. Right now I have no idea how to solve it :-(. Sebastian

        Martin: Hi there, I have tried to do this twice and it does NOT work. I don´t know why and I don´t know what is missing. I have made this like in this example and I tried it with the introduction by paul. Both are not working. Please help: martinstockffm@gmail.com

        paul: This works really well, thanks. Here is a for dummies version of the above instruction, it might help. 1. If you're new to yaml download it, unzip it and use the shiny buttons example found under: yaml_33_101012/examples/05_navigation/menu_shiny_buttons.html 2. download DDMF and copy dropdown.css and jquery.dropdown.js into the folder yaml_33_101012/examples/05_navigation 3. Now you can reference them in the head section of menu_shiny_buttons.html 4. Include your dropdown navigation. Check your lists are correctly nested! 5. Add the classes as mentioned above. 6. Then copy the block above in /* your.css */ at the end of the file layout_shiny_buttons.css (found under yaml_33_101012\yaml_33_101012\examples5_navigation\css\)

        Raul: Awesome thanks!! I was stumped with the z-index issue until I found your site. Thanks!

        Martin: Hi, I am using the latest version of YAML and I would put into the framework the sample, that you offer here. But it does not really work. Please help!

        Nicolaj-Alexander: Hi, i use the newest Yaml and want to use the Dropdown but i didn't get it. Could someone help me? I've zipped the structure and put it to nialma.net/test... It will very helpfull if someone could do that! So i can see what is to do. Greatings from Germany