CSS Drop Down Menus with SASS and jQuery

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’);


137 views

Need help? Let me take care of your IT issues.

Share this page

Scroll to Top