Complete .Net Tutorial: 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.

Live Demo

download in package

Step 1. 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.

01<ul id="nav">

02    <li><a href="#">Menu element</a>

03        <ul>

04            <li><a href="#">Submenu element</a></li>

05            .....

06        </ul>

07    </li>

08    <li><a href="#">Menu 4</a></li>

09    .....

10</ul>

Step 2. CSS

Here are the CSS styles of our menu:

001#nav,#nav ul {

002    list-style: none outside none;

003    margin: 0;

004    padding: 0;

005}

006#nav {

007    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;

008    font-size: 13px;

009    height: 36px;

010    list-style: none outside none;

011    margin: 40px auto;

012    text-shadow: 0 -1px 3px #202020;

013    width: 700px;

014

015    /* border radius */

016    -moz-border-radius: 4px;

017    -webkit-border-radius: 4px;

018    border-radius: 4px;

019

020    /* box shadow */

021    -moz-box-shadow: 0px 3px 3px #cecece;

022    -webkit-box-shadow: 0px 3px 3px #cecece;

023    box-shadow: 0 3px 4px #8b8b8b;

024

025    /* gradient */

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

027    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

028    background-color: #5f5f5f;

029}

030#nav li {

031    border-bottom: 1px solid #575757;

032    border-left: 1px solid #929292;

033    border-right: 1px solid #5d5d5d;

034    border-top: 1px solid #797979;

035    display: block;

036    float: left;

037    height: 34px;

038    position: relative;

039    width: 105px;

040}

041#nav > li:first-child {

042    border-left: 0 none;

043    margin-left: 5px;

044}

045#nav ul {

046    left: -9999px;

047    position: absolute;

048    top: -9999px;

049    z-index: 2;

050}

051#nav ul li {

052    background: none repeat scroll 0 0 #838383;

053    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

054    width: 100%;

055}

056#nav li a {

057    color: #FFFFFF;

058    display: block;

059    line-height: 34px;

060    outline: medium none;

061    text-align: center;

062    text-decoration: none;

063

064    /* gradient */

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

066    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

067    background-color: #5f5f5f;

068}

069

070/* keyframes #animation */

071@-webkit-keyframes animation {

072    0% {

073        -webkit-transform: scale(1);

074    }

075    30% {

076        -webkit-transform: scale(1.2);

077    }

078    100% {

079        -webkit-transform: scale(1.1);

080    }

081}

082@-moz-keyframes animation {

083    0% {

084        -moz-transform: scale(1);

085    }

086    30% {

087        -moz-transform: scale(1.2);

088    }

089    100% {

090        -moz-transform: scale(1.1);

091    }

092}

093#nav li > a:hover {

094    /* CSS3 animation */

095    -webkit-animation-name: animation;

096    -webkit-animation-duration: 0.3s;

097    -webkit-animation-timing-function: linear;

098    -webkit-animation-iteration-count: 1;

099    -webkit-animation-direction: normal;

100    -webkit-animation-delay: 0;

101    -webkit-animation-play-state: running;

102    -webkit-animation-fill-mode: forwards;

103

104    -moz-animation-name: animation;

105    -moz-animation-duration: 0.3s;

106    -moz-animation-timing-function: linear;

107    -moz-animation-iteration-count: 1;

108    -moz-animation-direction: normal;

109    -moz-animation-delay: 0;

110    -moz-animation-play-state: running;

111    -moz-animation-fill-mode: forwards;

112}

113#nav li:hover ul {

114    left: 0;

115    top: 34px;

116    width: 150px;

117}

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:

01// variables

02var aLoops = []; // sound loops

03

04// initialization

05addEvent(window, 'load', function (event) {

06

07    // load music files

08    aLoops[0] = new Audio('media/background.ogg');

09    aLoops[0].volume = 0.3;

10    aLoops[1] = new Audio('media/button.ogg');

11    aLoops[1].volume = 1.0;

12    aLoops[2] = new Audio('media/button_click.ogg');

13    aLoops[2].volume = 1.0;

14

15    aLoops[0].addEventListener('ended', function() { // loop background sound

16        this.currentTime = 0;

17        this.play();

18    }, false);

19    aLoops[0].play();

20});

And then, we should add the handlers to different events: mouseover, mouseout and click:

01// all the buttons

02var aBtns = document.querySelectorAll('#nav li');

03

04// onmouseover event handler

05addEvent(aBtns, 'mouseover', function (event) {

06    aLoops[1].currentTime = 0;

07    aLoops[1].play(); // play click sound

08});

09

10// onmouseout event handler

11addEvent(aBtns, 'mouseout', function (event) {

12    aLoops[1].currentTime = 0;

13    aLoops[1].pause(); // play click sound

14});

15

16// onclick event handler

17addEvent(aBtns, 'click', function (event) {

18    aLoops[2].currentTime = 0;

19    aLoops[2].play(); // play click sound

20});

And voila, we have finalized it.