You must have Javascript enabled to experience this site.

CSS Drop Down Menus with SASS and jQuery

Posted & filed under Coding Tips.

Enhancing the original CSS Drop Down Menus example with SASS and jQuery.

I have been asked several times how to add a fade in/out effects to the CSS Drop Down Menus example, which is easy to do with jQuery and I thought I would include some SASS features as well.

Download the zip file for the complete example source to refer to.

To begin with I used HTML5 Boilerplate as a starting point, then added the various examples.

Loading /index.html shows five examples.

 

CSS Menu

This is the original example which has been converted to use SASS.

 

CSS Menu with CSS3 and jQuery

This is a modification of the original example to use CSS3 rounded edges and jQuery fade in/out. The key to this example is that without Javascript (if it has be disabled) it falls back to the previous example; all of the additional features are added to the DOM using jQuery.

There is a class “.jsmenu” that is added by jQuery to add the styling and a <span></span> element is appended to each of the menu items to provide the fade in/out.

function menu_fade_in() {
    var menu = jQuery('.menu');
    menu.removeClass('nojsmenu');
    menu.addClass('jsmenu');
   
    var ul = jQuery('ul', menu);

    ul.find('a').each(function() {
        var a = jQuery(this);
        a.append('<span class="ir">' + a.text() + '</span>');
        a.find('span').width( a.width()+1 ); // add 1 pixel due to IE9
        a.hover(function() {
            jQuery(this).find('span').fadeIn('fast');
        }, function() {
            jQuery(this).find('span').fadeOut('fast');
        });
    });
}

 

CSS Menu with buttons

This is the original example using separate images for each of the buttons. While this works, there can be a momentary blink while hovering as the image is loaded. This is particularly noticeable on slower internet connections.

CSS image replacement is a technique of replacing a text element with an image. There has been a long history of different techniques for this (see CSS Image Replacement Museum) and Boilerplate provides some assistance with an Image Replacement class (class=”ir”) (see Non-semantic helper classes .ir {}).

<li><a id="menu-about" href="#" class="ir">About</a></li>

#menu-about {
    background: url('../img/icons/Button-About-Normal.png') 0 0 no-repeat;
}

#menu-about:hover {
    background: url('../img/icons/Button-About-Selected.png') 0 0 no-repeat;
}

 

CSS Menu with Sprites

Sprites are a method for combining many images into one to improve efficiency and performance (refer to Using SASS with Eclipse for a discussion of Sprites). These can be a hassle to setup – but SASS makes it easy. By using Sprites the problems with the previous example are fixed and the page is faster to load.

@import "icons/*.png";
@mixin sprite_css($name) {
  @include icons-sprite($name);
  height: icons-sprite-height($name);
  width: icons-sprite-width($name);
}

  #menu-about {
      @include sprite_css(Button-About-Normal);
  }
  #menu-about:hover, #menu-about:focus {
      @include sprite_css(Button-About-Selected);
  }

CSS Menu with Sprites and jQuery

This example combines both Sprites and jQuery. To provide fall back in case Javascript is disabled, a ‘.nojsmenu’ class has been added to define the hover states. This will be removed by jQuery and replaced with the ‘.jsmenu’ class to provide the fade in/out.

            <div class="menu nojsmenu">
              <ul>
                <li><a id="menu-about" href="#" class="ir">About</a></li>

.menu {
  #menu-about {
      @include sprite_css(Button-About-Normal);
  }

.nojsmenu {
  #menu-about:hover, #menu-about:focus {
      @include sprite_css(Button-About-Selected);
  }
 
.jsmenu {
  #menu-about span {
      @include sprite_css(Button-About-Selected);
  }
 
function menu_fade_in() {
    var menu = jQuery('.menu');
    menu.removeClass('nojsmenu');
    menu.addClass('jsmenu');

 

 

 

 

19 views