Original: Scripts Tutorials (from the Script Tutorial Web tutorial, translation may be some wrong ...) Want to try
Effects drop-down menu
In this tutorial we will tell you how to develop a cool audio drop-down menu (HTML5 + CSS3). The drop-down menu has the CSS3 animation effect (The menu element has a neat suspension effect) and also uses the HTML5 audio element to add the menu sound, ready? So let's get started.
Musical drop down menu
Our new tutorial tells is about developing cool musical drop menu (HTML5 + CSS3). This menu had 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 is ready, lets start.
Final Result | Final effect
Here is an example and download package: | Here is samples and downloadable package:
Live Demo | Demo
Download in package | Download the archiveStep 1. Html
First, we should prepare the HTML layout of the menu. Each menu element (which is actually an unordered list item) must have a stroke (link), or a nesting level.
as the first, we should prepare HTML layout of our menu. Each menu element (which actually are a unordered list item) has anchor, or nested level.
<ul id= "NAV" > <li><a href= "#" >menu element</a> <ul> <li><a HRE f= "#" >submenu element</a></li> ... </ul> </li> <li><a href= " # ">menu 4</a></li> .....</ul>
Step 2. Css
This is the CSS style of the menu: | here is the CSS styles of our menu:
#nav, #nav ul { list-style: none outside none; margin: 0; padding: 0;} #nav { font-family: "Lucida sans unicode", Verdana,arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 700px; /* border radius */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: - Webkit-gradient (Linear, left bottom, left top, color-stop (0, #787878), Color-stop (0.5, #5E5E5E), color-stop (0.51, #707070), color-stop (1, #838383)); background-image: -moz-linear-gradient (center bottom, #787878 0%, # 5e5e5e 50%, #707070 51%, #838383 100%) background-color: #5f5f5f;} #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; Display: block; float: left; height: 34px; position: relative; width: 105px;} #nav > li:first-child { border-left: 0 none; margin-left: 5px;} #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2;} #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba (0, 0, 0, 0.5); width: 100%;} #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none;& NBsp; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient (Linear, left bottom, left top, color-stop (0, #787878), color-stop (0.5, # 5E5E5E), color-stop (0.51, #707070), color-stop (1, #838383)); Background-image: -moz-linear-gradient (center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color: #5f5f5f;} /* keyframes #animation */@-webkit-keyframes animation { 0% { -webkit-transform: scale (1); } 30% { -webkit-transform: scale (1.2); &NBSP;&NBSP;&NBSP;&NBSP;}&NBSp; 100% { -webkit-transform: scale ( 1.1); }}@-moz-keyframes animation { 0% { -moz-transform: scale (1); } 30% { -moz-transform: scale (1.2); } 100% { - Moz-transform: scale (1.1); } #nav li > a:hover { /* CSS3 animation */ -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;} #nav li:hover ul { left: 0; top: 34px; width: 150px;}
When we hover over a list item, there will be a simulated bounce effect.
When we hover over a list item, we'll animate (scale) it once to emulate beat effect.
Step 3. HTML5 JavaScript
Now it's time to add music. First, we should prepare an empty queue (to store audio files), and then when the page is ready, initialize the music:
Now, it's 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 was ready, Initi Alize The music:
variablesvar aloops = []; // sound loops// initializationaddevent ( window, ' Load ', function (event) { // load music Files aloops[0] = new audio (' Media/background.ogg '); aloops[0].volume = 0.3; aloops[1] = new audio (' media/ Button.ogg '); aloops[1].volume = 1.0; aloops[2] = new audio (' Media/button_click.ogg '); aloops[2].volume = 1.0; aloops[0].addeventlistener (' Ended ', function () { // loop background sound this.currentTime = 0; this.play (); }, false); Aloops[0].play ();});
Then we want to add different event handling: mouse hover, mouse off and click:
And then, we should add the handlers to different Events:mouseover, mouseout and click:
// all the buttonsvar abtns = document.queryselectorall (' #nav li ');// onmouseover event handleraddevent (ABtns, ' mouseover ', function (event) { aLoops[1].currentTime = 0; aloops[1].play (); // play click sound});// onmouseout Event handleraddevent (abtns, ' mouseout ', function (event) { Aloops[1].currenttime = 0; aloops[1].pause (); // play click sound});// onclick event handleraddevent (abtns, ' click ', function (Event) { aloops[2].currenttime = 0; aloops[2].play (); // play click sound});
look, it's done. ( ?° ?? ?°)
And voila, we have finalized it.
HTML5 + CSS3 Bands effect drop-down menu implementation