Simple Dropdown Menu Using Javascript and CSS

This tutorial we’re going to create a simple drop-down list using javascript and css. This element or sometimes refers as “widget” or “control” same with a listbox, which allows the user to select one value from a list. Drop-down list or menu provides a hierarchical overview of the subsections contained within the menu item that spawned it. All the subsections within a section of a site when you hover your mouse cursor over it. To start with this course, first we need to create a folder named as “Dropdown”, inside this folder we need to create another folder named as “images” then we’re also going to create a “home.html” file and a “design.css” file and lastly a “drop.js” file. Next we will open the”home.html” and add the following code: Here in the home.htm file as you observe on we add link in the Head section of our html file. These are the “design.css” and “drop.js”. Having these two file we can be able to do the dropping down menu onMouseover, and the other, onClick.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>JavaScript Dropdown</title>
  6. <link rel="stylesheet" href="design.css" type="text/css" />
  7. <script type="text/javascript" src="drop.js"></script>
  8. </head>
  9. <body>
  10. <h3>JavaScript Dropdown sample</h3>
  11. <br /><br />
  12.  
  13. <dl class="dropdown">
  14. <dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Programming Languages</dt>
  15. <dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
  16. <ul>
  17. <li><a href="#" class="separator">Visual Basic</a></li>
  18. <li><a href="#" class="separator">Visual Basic.Net</a></li>
  19. <li><a href="#" class="separator">ASP/ASP.Net</a></li>
  20. <li><a href="#" class="separator">C#</a></li>
  21. <li><a href="#" class="separator">C/C++</a></li>
  22. <li><a href="#" class="separator">Delphi</a></li>
  23. <li><a href="#" class="separator">Java</a></li>
  24. <li><a href="#">JavaSript</a></li>
  25. </ul>
  26. </dd>
  27. </dl>
  28.  
  29. <dl class="dropdown">
  30. <dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">Mobile</dt>
  31. <dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
  32. <ul>
  33. <li><a href="#" class="separator">Android</a></li>
  34. <li><a href="#" class="separator">iOS</a></li>
  35. <li><a href="#" class="separator">windows phone</a></li>
  36. </ul>
  37. </dd>
  38. </dl>
  39. <dl class="dropdown">
  40. <dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)">Databases</dt>
  41. <dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
  42. <ul>
  43. <li><a href="#" class="separator">Microsoft Access</a></li>
  44. <li><a href="#" class="separator">MySQL</a></li>
  45. <li><a href="#" class="separator">MSSQL</a></li>
  46. <li><a href="#" class="separator">MySQLi</a></li>
  47. <li><a href="#" class="separator">Oracle</a></li>
  48. <li><a href="#">SQL Server</a></li>
  49.  
  50. </ul>
  51. </dd>
  52. </dl>
  53.  
  54. <div style="clear:both" />
  55. </body>
  56. </html>
Next for “design.css” add the following code: In this segment of codes, we use CSS to convert a series of nested Unordered List into a smooth, easy to use, neat and self-contained dropdown menu. Meaning this is where the magic happens.
  1. body {margin:25px;font:12px Verdana, Arial, Helvetica}
  2. * {padding:0; margin:0}
  3. .dropdown {float:left; padding-right:2px}
  4. .dropdown dt {width:188px; border:1px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
  5. .dropdown dt:hover {background:url(images/header_over.gif)}
  6. .dropdown dd {position:absolute; overflow:hidden; width:200px; display:none; background:#fff; z-index:200; opacity:0}
  7. .dropdown ul {width:204px; border:1px solid #9ac1c9; list-style:none; border-top:none}
  8. .dropdown li {display:inline}
  9. .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
  10. .dropdown a:hover {background:#d9e1e4; color:#000}
  11. .dropdown .separator {border-bottom:1px solid #b9d6dc}
And for “drop.js” add the following code: This “drop.js” is a script that offers enhanced stability and speed. It includes animation, toggles, rollout timeout, and style handling.
  1. var DDSPEED = 10;
  2. var DDTIMER = 15;
  3.  
  4. // main function to handle the mouse events //
  5. function ddMenu(id,d){
  6. var h = document.getElementById(id + '-ddheader');
  7. var c = document.getElementById(id + '-ddcontent');
  8. clearInterval(c.timer);
  9. if(d == 1){
  10. clearTimeout(h.timer);
  11. if(c.maxh && c.maxh <= c.offsetHeight){return}
  12. else if(!c.maxh){
  13. c.style.display = 'block';
  14. c.style.height = 'auto';
  15. c.maxh = c.offsetHeight;
  16. c.style.height = '0px';
  17. }
  18. c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  19. }else{
  20. h.timer = setTimeout(function(){ddCollapse(c)},50);
  21. }
  22. }
  23.  
  24. // collapse the menu //
  25. function ddCollapse(c){
  26. c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
  27. }
  28.  
  29. // cancel the collapse if a user rolls over the dropdown //
  30. function cancelHide(id){
  31. var h = document.getElementById(id + '-ddheader');
  32. var c = document.getElementById(id + '-ddcontent');
  33. clearTimeout(h.timer);
  34. clearInterval(c.timer);
  35. if(c.offsetHeight < c.maxh){
  36. c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  37. }
  38. }
  39.  
  40. // incrementally expand/contract the dropdown and change the opacity //
  41. function ddSlide(c,d){
  42. var currh = c.offsetHeight;
  43. var dist;
  44. if(d == 1){
  45. dist = (Math.round((c.maxh - currh) / DDSPEED));
  46. }else{
  47. dist = (Math.round(currh / DDSPEED));
  48. }
  49. if(dist <= 1 && d == 1){
  50. dist = 1;
  51. }
  52. c.style.height = currh + (dist * d) + 'px';
  53. c.style.opacity = currh / c.maxh;
  54. c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  55. if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
  56. clearInterval(c.timer);
  57. }
  58. }
So at this time you can now try to test this application by running first the “home.html” file. And the source code is totally available in this site. And you could just copy and paste the code and modify it apart for yourselves. Hopefully you enjoy reading and you find it helpful. If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

Add new comment