Home » Tutorials

Musical drop down menu

Tutorials
Author Reading 7 min Views 376 Published by Modified by

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.

Contents
  1. Final result
  2. Step 1. HTML
  3. Step 2. CSS
  4. Step 3. HTML5 JavaScript
  5. Conclusion

Final result

Musical drop down menu

Here are samples and downloadable package:

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     /* border radius */
015     -moz-border-radius: 4px;
016     -webkit-border-radius: 4px;
017     border-radius: 4px;
018     /* box shadow */
019     -moz-box-shadow: 0px 3px 3px #cecece;
020     -webkit-box-shadow: 0px 3px 3px #cecece;
021     box-shadow: 0 3px 4px #8b8b8b;
022     /* gradient */
023     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));
024     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
025     background-color: #5f5f5f;
026 }
027 #nav li {
028     border-bottom: 1px solid #575757;
029     border-left: 1px solid #929292;
030     border-right: 1px solid #5d5d5d;
031     border-top: 1px solid #797979;
032     display: block;
033     float: left;
034     height: 34px;
035     position: relative;
036     width: 105px;
037 }
038 #nav > li:first-child {
039     border-left: 0 none;
040     margin-left: 5px;
041 }
042 #nav ul {
043     left: -9999px;
044     position: absolute;
045     top: -9999px;
046     z-index: 2;
047 }
048 #nav ul li {
049     background: none repeat scroll 0 0 #838383;
050     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
051     width: 100%;
052 }
053 #nav li a {
054     color: #FFFFFF;
055     display: block;
056     line-height: 34px;
057     outline: medium none;
058     text-align: center;
059     text-decoration: none;
060     /* gradient */
061     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));
062     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
063     background-color: #5f5f5f;
064 }
065 /* keyframes #animation */
066 @-webkit-keyframes animation {
067     0% {
068         -webkit-transform: scale(1);
069     }
070     30% {
071         -webkit-transform: scale(1.2);
072     }
073     100% {
074         -webkit-transform: scale(1.1);
075     }
076 }
077 @-moz-keyframes animation {
078     0% {
079         -moz-transform: scale(1);
080     }
081     30% {
082         -moz-transform: scale(1.2);
083     }
084     100% {
085         -moz-transform: scale(1.1);
086     }
087 }
088 #nav li > a:hover {
089     /* CSS3 animation */
090     -webkit-animation-name: animation;
091     -webkit-animation-duration: 0.3s;
092     -webkit-animation-timing-function: linear;
093     -webkit-animation-iteration-count: 1;
094     -webkit-animation-direction: normal;
095     -webkit-animation-delay: 0;
096     -webkit-animation-play-state: running;
097     -webkit-animation-fill-mode: forwards;
098     -moz-animation-name: animation;
099     -moz-animation-duration: 0.3s;
100     -moz-animation-timing-function: linear;
101     -moz-animation-iteration-count: 1;
102     -moz-animation-direction: normal;
103     -moz-animation-delay: 0;
104     -moz-animation-play-state: running;
105     -moz-animation-fill-mode: forwards;
106 }
107 #nav li:hover ul {
108     left: 0;
109     top: 34px;
110     width: 150px;
111 }

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
02 var aLoops = []; // sound loops
03 // initialization
04 addEvent(window, 'load', function (event) {
05     // load music files
06     aLoops[0] = new Audio('media/background.ogg');
07     aLoops[0].volume = 0.3;
08     aLoops[1] = new Audio('media/button.ogg');
09     aLoops[1].volume = 1.0;
10     aLoops[2] = new Audio('media/button_click.ogg');
11     aLoops[2].volume = 1.0;
12     aLoops[0].addEventListener('ended', function() { // loop background sound
13         this.currentTime = 0;
14         this.play();
15     }, false);
16     aLoops[0].play();
17 });

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

01 // all the buttons
02 var aBtns = document.querySelectorAll('#nav li');
03 // onmouseover event handler
04 addEvent(aBtns, 'mouseover', function (event) {
05     aLoops[1].currentTime = 0;
06     aLoops[1].play(); // play click sound
07 });
08 // onmouseout event handler
09 addEvent(aBtns, 'mouseout', function (event) {
10     aLoops[1].currentTime = 0;
11     aLoops[1].pause(); // play click sound
12 });
13 // onclick event handler
14 addEvent(aBtns, 'click', function (event) {
15     aLoops[2].currentTime = 0;
16     aLoops[2].play(); // play click sound
17 });

And voila, we have finalized it.

Live Demo

Conclusion

Hope that you’ve enjoyed with our new menu. Good luck!

Rate article
© 2025 Script Tutorials