Flash is a really valuable source of inspiration for jQuery developers. In this article we'll see how to create a Flash menu which plays a sound when you select an item with a rollover. Let's see the details.
We're going to use an hidden audio element to play the sound. Here's the markup:
<div id="navigation">
<div id="lava">
<div id="lava-cursor"></div>
</div>
<ul>
<li><a href="">Home</a></li>
<li class="current"><a href="">Archives</a></li>
<li><a href="">Contact</a></li>
</ul>
<audio id="sound">
<source src="sound.mp3"></source>
<source src="sound.ogg"></source>
</audio>
</div>
And here's the CSS to make it work:
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
margin: 0 auto;
padding: 2em 0;
width: 50%;
max-width: 600px;
}
#navigation {
height: 3em;
background: #f0f0f0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
#navigation ul {
margin: 0.4em 0 0 0;
padding: 0;
list-style: none;
height: 2.6em;
font: 90% 'Open Sans', sans-serif;
}
#navigation li {
float: left;
width: 6em;
height: 100%;
display: block;
margin-right: 1em;
}
#navigation a {
float: left;
width: 100%;
height: 100%;
color: #333;
text-transform: uppercase;
text-align: center;
line-height: 2.6;
text-decoration: none;
display: block;
}
#navigation a:hover {
color: #d34545;
}
#lava {
width: 100%;
height: 0.2em;
background: #ccc;
position: relative;
}
#lava-cursor {
width: 5.4em;
height: 100%;
background: #d34545;
display: none;
position: relative;
}
#sound {
width: 0px;
height: 0px;
display: block;
overflow: hidden;
position: absolute;
left: -1000em;
}
This is basically a Lava menu with a sound effect. We can manage it with a custom jQuery plugin:
(function($) {
$.fn.lavaFlash = function(options) {
var that = this;
var settings = {
container: 'ul',
cursor: '#lava-cursor',
current: '.current',
speed: 800,
sound: $('#sound', that)[0],
volume: 2
};
options = $.extend(settings, options);
return that.each(function() {
options.sound.volume = parseFloat(options.volume / 10);
$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
$('li', $(options.container)).each(function() {
var $li = $(this);
$li.mouseover(function() {
$(options.cursor).animate({
left: $li.position().left
}, options.speed, function() {
options.sound.play();
});
});
});
});
};
})(jQuery);
Finally, we kicks things off:
$(function() {
$('#navigation').lavaFlash({speed: 500});
});
You can see the demo below.