Menu Tutorial: Javascript

Javascript is a client-side object oriented programming language. It is used to add dynamic features and interactive functionality to web sites. Javascript is a dialect of the ECMAScript standard. Javascript and Java are different programming languages, although they have some similar structures. Both the languages are based on the C syntax.

In our Javascript menu tutorial we will show how to create a simple drop-down menu. The source code will include explanations of the Javascript functionality. In the current examples the CSS, the Javascript and the HTML code will be written in a single file (for example index.html). However, you can easy create external .css and .js files and include them in the html file. The line regarding the Javascript is:

<script type="text/javascript" src="myjavascript.js"></script>

You should replace myjavascript.js with your actual Javascript file.

The drop-down menu will be visualized in the way shown below:

The source code of the drop-down menu is as follows:

<html>
<head>
<title>MyMenu</title>


<style type="text/css" media="screen">

#mymenu
{   margin: 0;
   padding: 0;
}

#mymenu li
{   margin: 0;
   padding: 0;
   list-style: none;
   float: left;
}

#mymenu li a
{   display: block;
   margin: 0 1px 0 0;
   padding: 4px 10px;
   width: 80px;
   background: #bbbaaa;
   color: #ffffff;
   text-align: center;
}

#mymenu li a:hover
{   background: #aaddaa}

#mymenu ul
{   position: absolute;
   visibility: hidden;
   margin: 0;
   padding: 0;
   background: #eeebdd;
   border: 1px solid #ffffff}

   #mymenu ul a
   {   position: relative;
       display: block;
       margin: 0;
       padding: 5px 10px;
       width: 80px;
       text-align: left;
       background: #eeebdd;
       color: #000000;
}

   #mymenu ul a:hover
   {   background: #aaffaa;
}
</style>



<script type="text/javascript">
//variables' declaration
var timer       = 0;
var item      = 0;

//function for opening of submenu elements
function openelement(num)
{

//checks whether there is an open submenu and makes it invisible
if(item) item.style.visibility = 'hidden';

   //shows the chosen submenu element
   item = document.getElementById(num);
   item.style.visibility = 'visible';
}

// function for closing of submenu elements
function closeelement()
{
//closes the open submenu elements and loads the timer with 500ms
timer = window.setTimeout('if(item) item.style.visibility = 'hidden';',500);
}

//function for keeping the submenu loaded after the end of the 500 ms timer
function keepsubmenu()
{
       window.clearTimeout(timer);
}
//hides the visualized menu after clicking outside of its area and expiring of the loaded timer
document.onclick = closeelement;

</script>


</head>
<body>


<ul id="mymenu">
   <li><a href="http://siteground.com/">Home</a>
   </li>
   <li><a href="http://www.siteground.com/tutorials/" onmouseover="openelement('menu2')">Tutorials</a>
       <ul id="menu2" onmouseover="keepsubmenu()" onmouseout="closeelement()">
       <a href="http://www.siteground.com/tutorials/cssbasics/index.htm">CSS</a>
       <a href="http://www.siteground.com/tutorials/flash/index.htm">Flash</a>
       </ul>
   </li>
   <li><a href="#" onmouseover="openelement('menu3')" onmouseout="closeelement()">More</a>
       <ul id="menu3" onmouseover="keepsubmenu()" onmouseout="closeelement()">
       <a href="http://www.siteground.com/about_us.htm">About Us</a>
       <a href="http://www.siteground.com/contact_us.htm">Contact Us</a>
       </ul>
   </li>
</ul>
<div style="clear:both"></div>

</body>
</html>

In the above example we are using a timer, otherwise the submenus will be closed immediately after moving the mouse away from their area.

Please note that the above code is tested on the latest version of Mozilla Firefox. It should work normally on all new browsers, which support the hover functionality.

Detailed information about the Javascript syntax can be found at the following web site.

Menu Tutorial: Javascript

Web Hosting Solutions

Free Resources