来自脚本教程网的教程，翻译可能有些不对。。。
想要试试
音效下拉菜单
在这个教程中我们将讲述如何开发酷炫的音效下拉菜单(html5 + css3)。下拉菜单有css3动画效果(菜单元素有整洁的悬浮特效)同时也使用了html5的Audio元素来添加菜单的音效，准备好了吗？那就开始吧。
Musical drop down menu
Our new tutorial tells about developing cool musical drop down menu (html5 + css3). This menu has css3 animation effects (neat hover effect to menu elements). We also used html5 Audio element in order to add music to this menu. If you are ready, lets start.
Final result | 最终效果
Here are samples and downloadable package:
这儿是示例和下载包：
Step 1. HTML
首先，我们应该准备菜单的HTML布局。每个菜单元素(实际上是一个无序的列表项)都要有描点(链接)，或者嵌套等级。
As the first, we should prepare HTML layout of our menu. Each menu element (which actually is a unordered list item) has anchor, or nested level.
Menuelement Submenuelement
.....
Menu4
.....
Step 2. CSS
这是菜单的css样式：|Here are the CSS styles of our menu:
#nav,#navul{
list-style:noneoutsidenone;
margin:0;
padding:0;
}
#nav{
font-family:"LucidaSansUnicode",Verdana,Arial,sans-serif;
font-size:13px;
height:36px;
list-style:noneoutsidenone;
margin:40pxauto;
text-shadow:0-1px3px#20;
width:700px;
/*borderradius*/
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/*boxshadow*/
-moz-box-shadow:0px3px3px#cecece;
-webkit-box-shadow:0px3px3px#cecece;
box-shadow:03px4px#8b8b8b;
/*gradient*/
background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#787878),color-stop(0.5,#5E5E5E),color-stop(0.51,#707070),color-stop(1,#838383));
background-image:-moz-linear-gradient(centerbottom,#7878780%,#5E5E5E50%,#70707051%,#838383100%);
background-color:#5f5f5f;
}
#navli{
border-bottom:1pxsolid#575757;
border-left:1pxsolid#929292;
border-right:1pxsolid#5d5d5d;
border-top:1pxsolid#797979;
display:block;
float:left;
height:34px;
position:relative;
width:105px;
}
#nav>li:first-child{
border-left:0none;
margin-left:5px;
}
#navul{
left:-9999px;
position:absolute;
top:-9999px;
z-index:2;
}
#navulli{
background:nonerepeatscroll00#838383;
box-shadow:5px5px5pxrgba(0,0,0,0.5);
width:100%;
}
#navlia{
color:#FFFFFF;
display:block;
line-height:34px;
outline:mediumnone;
text-align:center;
text-decoration:none;
/*gradient*/
background-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#787878),color-stop(0.5,#5E5E5E),color-stop(0.51,#707070),color-stop(1,#838383));
background-image:-moz-linear-gradient(centerbottom,#7878780%,#5E5E5E50%,#70707051%,#838383100%);
background-color:#5f5f5f;
}
/*keyframes#animation*/
@-webkit-keyframesanimation{
0%{
-webkit-transform:scale(1);
}
30%{
-webkit-transform:scale(1.2);
}
100%{
-webkit-transform:scale(1.1);
}
}
@-moz-keyframesanimation{
0%{
-moz-transform:scale(1);
}
30%{
-moz-transform:scale(1.2);
}
100%{
-moz-transform:scale(1.1);
}
}
#navli>a:hover{
/*CSS3animation*/
-webkit-animation-name:animation;
-webkit-animation-duration:0.3s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:1;
-webkit-animation-direction:normal;
-webkit-animation-delay:0;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
-moz-animation-name:animation;
-moz-animation-duration:0.3s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:1;
-moz-animation-direction:normal;
-moz-animation-delay:0;
-moz-animation-play-state:running;
-moz-animation-fill-mode:forwards;
}
#navli:hoverul{
left:0;
top:34px;
width:150px;
}
当我们鼠标停留在一个列表项时，将会有一个仿真跳动特效。
When we hover over a list item, we will animate (scale) it once to emulate beat effect.
Step 3. HTML5 JavaScript
现在，是时候添加音乐了。首先，我们应该准备一个空队列(用来存储音频文件)，然后当页面准备好了，初始化音乐：
Now, it is time to add music here. In the beginning, we should prepare a new empty array (to keep our Audio objects), and then, when the page is ready, initialize the music:
//variables
varaLoops=[];//soundloops
//initialization
addEvent(window,'load',function(event){
//loadmusicfiles
aLoops[0]=newAudio('media/background.ogg');
aLoops[0].volume=0.3;
aLoops[1]=newAudio('media/button.ogg');
aLoops[1].volume=1.0;
aLoops[2]=newAudio('media/button_click.ogg');
aLoops[2].volume=1.0;
aLoops[0].addEventListener('ended',function(){//loopbackgroundsound
this.currentTime=0;
this.play();
},false);
aLoops[0].play();
});
然后，我们要添加不同的事件处理：鼠标悬停，鼠标离开和点击：
And then, we should add the handlers to different events: mouseover, mouseout and click:
//allthebuttons
varaBtns=document.querySelectorAll('#navli');
//onmouseovereventhandler
addEvent(aBtns,'mouseover',function(event){
aLoops[1].currentTime=0;
aLoops[1].play();//playclicksound
});
//onmouseouteventhandler
addEvent(aBtns,'mouseout',function(event){
aLoops[1].currentTime=0;
aLoops[1].pause();//playclicksound
});
//onclickeventhandler
addEvent(aBtns,'click',function(event){
aLoops[2].currentTime=0;
aLoops[2].play();//playclicksound
});
瞧，完成了。( ͡° ͜ʖ ͡°)
And voila, we have finalized it.
