jQuery: Flash menu with sound

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>
  <li><a href="">Home</a></li>
  <li class="current"><a href="">Archives</a></li>
  <li><a href="">Contact</a></li>
 <audio id="sound">
  <source src="sound.mp3"></source>
  <source src="sound.ogg"></source>

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() {
      left: $li.position().left
     }, options.speed, function() {


Finally, we kicks things off:

$(function() {

 $('#navigation').lavaFlash({speed: 500});


You can see the demo below.


Live demo


ZIP file

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.