ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Drop-down Menu Using CSS and JavaScript

In this course, i’m going to teach you how to create a Drop-down menu using Javascript and CSS. This is very useful when you create a web application that uses a Drop-down list for a sub menu. The sub menu or drop-down list will show when the user the mouse cursor over the main menu. The output of this course is look like as shown below.

dropdown

Now follow the given steps:

  1. Create a folder named as “Dropdown
  2. then, inside this folder we need to create another folder name as “images”
  3. then we’re also going to create a “home.html” file
  4. and a “design.css” file
  5. and lastly a “drop.js” file.

Next, open the home.html file and add the following code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>JavaScript Dropdown</title>

<link rel=”stylesheet” href=”design.css” type=”text/css” />

<script type=”text/javascript” src=”drop.js”></script>

</head>

<body>

<h3>JavaScript Dropdown sample</h3>

<br /><br />

 

<dl class=”dropdown”>

<dt id=”one-ddheader” onmouseover=”ddMenu(‘one’,1)” onmouseout=”ddMenu(‘one’,-1)”>Programming Languages</dt>

<dd id=”one-ddcontent” onmouseover=”cancelHide(‘one’)” onmouseout=”ddMenu(‘one’,-1)”>

<ul>

<li><a href=”#” class=”separator”>Visual Basic</a></li>

<li><a href=”#” class=”separator”>Visual Basic.Net</a></li>

<li><a href=”#” class=”separator”>ASP/ASP.Net</a></li>

<li><a href=”#” class=”separator”>C#</a></li>

<li><a href=”#” class=”separator”>C/C++</a></li>

<li><a href=”#” class=”separator”>Delphi</a></li>

<li><a href=”#” class=”separator”>Java</a></li>

<li><a href=”#”>JavaSript</a></li>

</ul>

</dd>

</dl>

 

<dl class=”dropdown”>

<dt id=”two-ddheader” onmouseover=”ddMenu(‘two’,1)” onmouseout=”ddMenu(‘two’,-1)”>Mobile</dt>

<dd id=”two-ddcontent” onmouseover=”cancelHide(‘two’)” onmouseout=”ddMenu(‘two’,-1)”>

<ul>

<li><a href=”#” class=”separator”>Android</a></li>

<li><a href=”#” class=”separator”>iOS</a></li>

<li><a href=”#” class=”separator”>windows phone</a></li>

</ul>

</dd>

</dl>

<dl class=”dropdown”>

<dt id=”three-ddheader” onmouseover=”ddMenu(‘three’,1)” onmouseout=”ddMenu(‘three’,-1)”>Databases</dt>

<dd id=”three-ddcontent” onmouseover=”cancelHide(‘three’)” onmouseout=”ddMenu(‘three’,-1)”>

<ul>

<li><a href=”#” class=”separator”>Microsoft Access</a></li>

<li><a href=”#” class=”separator”>MySQL</a></li>

<li><a href=”#” class=”separator”>MSSQL</a></li>

<li><a href=”#” class=”separator”>MySQLi</a></li>

<li><a href=”#” class=”separator”>Oracle</a></li>

<li><a href=”#”>SQL Server</a></li>

 

</ul>

</dd>

</dl>

 

<div style=”clear:both” />

</body>

</html>

 

then, for “design.css” add the following code:

  1. body {margin:25px; font:12px Verdana, Arial, Helvetica}
  2.  
  3. * {padding:0; margin:0}
  4.  
  5. .dropdown {float:left; padding-right:5px}
  6.  
  7. .dropdown dt {width:188px; border:1px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
  8.  
  9. .dropdown dt:hover {background:url(images/header_over.gif)}
  10.  
  11. .dropdown dd {position:absolute; overflow:hidden; width:200px; display:none; background:#fff; z-index:200; opacity:0}
  12.  
  13. .dropdown ul {width:204px; border:1px solid #9ac1c9; list-style:none; border-top:none}
  14.  
  15. .dropdown li {display:inline}
  16.  
  17. .dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
  18.  
  19. .dropdown a:hover {background:#d9e1e4; color:#000}
  20.  
  21. .dropdown .separator {border-bottom:1px solid #b9d6dc}

 

And for “drop.js” add the following code:

javascript

  1. var DDSPEED = 10;
  2.  
  3. var DDTIMER = 15;
  4.  
  5. &nbsp;
  6.  
  7. // main function to handle the mouse events //
  8.  
  9. function ddMenu(id,d){
  10.  
  11. var h = document.getElementById(id + '-ddheader');
  12.  
  13. var c = document.getElementById(id + '-ddcontent');
  14.  
  15. clearInterval(c.timer);
  16.  
  17. if(d == 1){
  18.  
  19. clearTimeout(h.timer);
  20.  
  21. if(c.maxh &amp;&amp; c.maxh &lt;= c.offsetHeight){return}
  22.  
  23. else if(!c.maxh){
  24.  
  25. c.style.display = 'block';
  26.  
  27. c.style.height = 'auto';
  28.  
  29. c.maxh = c.offsetHeight;
  30.  
  31. c.style.height = '0px';
  32.  
  33. }
  34.  
  35. c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  36.  
  37. }else{
  38.  
  39. h.timer = setTimeout(function(){ddCollapse(c)},50);
  40.  
  41. }
  42.  
  43. }
  44.  
  45. &nbsp;
  46.  
  47. // collapse the menu //
  48.  
  49. function ddCollapse(c){
  50.  
  51. c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
  52.  
  53. }
  54.  
  55. &nbsp;
  56.  
  57. // cancel the collapse if a user rolls over the dropdown //
  58.  
  59. function cancelHide(id){
  60.  
  61. var h = document.getElementById(id + '-ddheader');
  62.  
  63. var c = document.getElementById(id + '-ddcontent');
  64.  
  65. clearTimeout(h.timer);
  66.  
  67. clearInterval(c.timer);
  68.  
  69. if(c.offsetHeight &lt; c.maxh){
  70.  
  71. c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  72.  
  73. }
  74.  
  75. }
  76.  
  77. &nbsp;
  78.  
  79. // incrementally expand/contract the dropdown and change the opacity //
  80.  
  81. function ddSlide(c,d){
  82.  
  83. var currh = c.offsetHeight;
  84.  
  85. var dist;
  86.  
  87. if(d == 1){
  88.  
  89. dist = (Math.round((c.maxh - currh) / DDSPEED));
  90.  
  91. }else{
  92.  
  93. dist = (Math.round(currh / DDSPEED));
  94.  
  95. }
  96.  
  97. if(dist &lt;= 1 &amp;&amp; d == 1){
  98.  
  99. dist = 1;
  100.  
  101. }
  102.  
  103. c.style.height = currh + (dist * d) + 'px';
  104.  
  105. c.style.opacity = currh / c.maxh;
  106.  
  107. c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  108.  
  109. if((currh &lt; 2 &amp;&amp; d != 1) || (currh &gt; (c.maxh - 2) &amp;&amp; d == 1)){
  110.  
  111. clearInterval(c.timer);
  112.  
  113. }
  114.  
  115. }

Code Explanation:

  1. In the “home.html” file as you observe on we add link on 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.
  2. For “design.css“, we simply use CSS to convert a series of nested Unordered List in to a smooth, easy to use, neat and self-contained dropdown menu. Meaning this is where the magic happens.
  3. Then for the “drop.js” is a script that offers enhanced stability and speed. It includes animation, toggles, rollout timeout, and style handling.

 

Download:

You can download the Source Code here.dropdown

Please comment and share this to your friends.

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!