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


92 views

Need help? Let me take of your IT issues.

Share this page

Share on facebook
Share on linkedin
Share on twitter
Share on print
Share on email
Scroll to Top

By continuing to use this website, you consent to the use of cookies in accordance with our Cookie Policy