DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Musical Drop-Down Menu

Musical Drop-Down Menu

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
May. 28, 12 · Web Dev Zone · Interview
Like (0)
Save
Tweet
4.59K Views

Join the DZone community and get the full member experience.

Join For Free

our new tutorial explains how to develop a cool musical drop down menu (html5 + css3). this menu has css3 animation effects (neat hover effectfor  menu elements). and this is the awesome part: we also used the html5 audio element in order to add music to this menu. if you are ready, let's start.


final result

musical drop down menu

here are the 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.

<ul id="nav">
    <li><a href="#">menu element</a>
        <ul>
            <li><a href="#">submenu element</a></li>
            .....
        </ul>
    </li>
    <li><a href="#">menu 4</a></li>
    .....
</ul>

step 2. css

here are 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;
    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);
    }
    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, we will animate (scale) it once to emulate a 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
var aloops = []; // sound loops

// initialization
addevent(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();
});

and voila, we have finalized it.


live demo

download in package


conclusion

hope that you’ve enjoyed our new menu. good luck!

Download Element Awesome (window manager) Drops (app) JavaScript Data structure

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Open Source Security Risks
  • Top Soft Skills to Identify a Great Software Engineer
  • Your Old Laptop Is Your New Database Server
  • Choosing Between GraphQL Vs REST

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo