HTML5 + CSS3 Bands effect drop-down menu implementation

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