Navigation Menu with Sound Effect | Lessoncup Programming Blog

Sunday, 8 December 2013

Navigation Menu with Sound Effect

Hi, today i am going to tell you about making a menu bar with sound effect using jquery, generally if there is a requirement to play a sound while over the button we prefer FLASH, but now a days we can easily make a menu bar with sound effect using jQuery and Html5, i have developed a same concept using jquery, just it's few lines of code, have a look and use to your websites.


in html create the menu bar using LI tags and take audio tag to play a sound while hover the mouse on button just give it a ID name #audioplayer and keep  a sound file inside the SRC attribute
<audio id="audioplayer">
    <source src="sounds/glass_ping.mp3" type="audio/mpeg">
   <source src="sounds/glass_ping.ogg" type="audio/ogg">
  Your browser does not support the audio element. </audio>

<div class="lessoncup">





.lessoncup{ width:670px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:200px;}

.lessoncup ul{list-style:none; margin:0; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:30px;float:left; background-color:#9C3; color:#FFF; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}

.lessoncup ul li:hover{background-color:#FC0;}



here write the mouse over function and give a LI tag as a selector, now inside the function just use play() method to #audioplayer to play the audio clip while hover the mouse on each LI tag, make sure the audio clip should be small
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>


 $("li").mouseover(function() {



Live Demo   Download Script


  1. sound is not playing well on instant hover on tabs refer css tricks for fix

  2. It’s my first time to visit this site & I’m really surprised to see such impressive stuff out there.
    UI UX design firm


Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA

Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons