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:

2

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

<html>
<head>
<title>MyMenu</title>
<!--The CSS code.-->
<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>
<!--The end of the CSS code.-->
<!--The Javascript menu code.-->
<script type="text/javascript">
//variables'
declarationvar 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 500
mstimer = window.setTimeout('if(item) item.style.visibility = 'hidden';',500); }
//function for keeping the submenu loaded after the end of the 500 ms
timerfunction keepsubmenu(){ window.clearTimeout(timer);}
//hides the visualized menu after clicking outside of its area and expiring of the loaded
timerdocument.onclick = closeelement;
</script>
<!--END of CSS code-->
</head>
<body>
<!--HTML code for the menu -->
<ul id="mymenu">
<li><a href="http://xyz.com/">Home</a></li>
<li>
<a href="http://xyz.com" onmouseover="openelement('menu2')">Tutorials</a>
<ul id="menu2" onmouseover="keepsubmenu()" onmouseout="closeelement()">
<a href="http://xyz.com">CSS</a>
<a href="http://xyz.com">Flash</a>
</ul>
</li>
<li>
<a href="#" onmouseover="openelement('menu3')" onmouseout="closeelement()">More</a>
<ul id="menu3" onmouseover="keepsubmenu()" onmouseout="closeelement()">
<a href="http://xyz.com">About Us</a>
<a href="http://xyz.com">Contact Us</a>
</ul>
</li>
</ul>
<div >
</div>
<!--the end of the HTML code for the menu -->
</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.