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