Menu Designing in Javascript
JavaScript is a Web language built into all major browsers that you can use to make your Web pages do a lot of neat tricks. Designing a website's navigation menu is one of the most common things you can use JavaScript to do, and since it's relatively easy to do, it's a common way for beginners to learn the language. If you're already familiar with HTML and CSS, you'll find that it's easy to insert JavaScript into your code and create clean, standards-compliant pages.
-
Foundation of JavaScript Menu Design
-
JavaScript menu design uses two simple tools: "onmouseover," which triggers an event to happen when you move your mouse over something, and "onmouseout," which triggers an event to happen when your mouse goes elsewhere.
Let's say we have a navigation menu at the top of our page with two items, "About" and "Topics." When someone hovers either item in the list, we want a submenu to pop up underneath listing more options. So we need to create two functions: one that allows a menu to appear beneath each item using "onmouseover," and one that allows the menu to disappear using "onmouseout."
To do this, we need to add the following JavaScript code into the <head> section of the page:
<script type="text/javascript">
//<![CDATA[function hide(menu){
var menuStyle=document.getElementById(menu).style;
menuStyle.display="none";
}function show(menu) {
var menuStyle=document.getElementById(menu).style;
menuStyle.display="block";
}//]]>
</script>The first two lines and the last two lines just declare that the section of your document in between will be using JavaScript. The code in between creates two functions called "hide" and "show." Each function first creates a variable called "menuStyle," which recognizes a menu by its ID, and then changes the style of that menu by setting it to display="none" or display="block." It's OK if it's not entirely clear yet; once you see it in action, you'll be able to understand it better.
You also have to add another bit of JavaScript at the end of your pages, before the closing </body> tag, that prevents the submenus from appearing on the page by default:
<script type="text/javascript">
//<![CDATA[
hide('submenu-1');
hide('submenu-2');
//]]>
</script>This uses the "hide" function you just created to hide each submenu. In this example, "submenu-1" and "submenu-2" are the IDs of each submenu.
Implementing It in Your HTML
-
Now that the JavaScript foundation is in place, you actually have to activate it inside your HTML. First, create your HTML menu system. The cleanest way to do this is with unordered links embedded inside each other like so:
<ul>
<li>About
<ul>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</li>
</ul>Now, you can add "onmouseover" and "onmouseout" attributes to the top-level <li> tags:
<ul>
<li onmouseover="javascript:show('submenu-1')" onmouseout="javascript:hide('submenu-1')">About
<ul>
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</li>
</ul>All this means is that when someone hovers over "About," your "show" function will cause the submenu underneath it to appear. When the mouse moves away from "About," your "hide" function will cause the submenu to disappear.
Putting It All Together
-
Now that you have the design in place, you need to stick it inside a full document and spruce up the design with some CSS so it all displays correctly. The following example is a full page that works as valid XHTML Strict code and uses some basic CSS styling. Paste it into a text editor, save it as an HTML file, and open it in a Web browser to see the results. Make changes to the CSS as you see fit, and try adding another menu option and submenu.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample JavaScript Menu</title><style type="text/css">
body {
font-family:Georgia, sans-serif;
}a {
color:#FF3A00;
text-decoration:none;
}a:hover {
text-decoration:underline;
}ul {
list-style-type:none;
margin:0;
padding:10px;
}li {
float:left;
padding:10px;
border:1px solid #ddd;
margin-left:-1px;
}li ul {
position:absolute;
margin:10px -11px;
border:1px solid #ddd;
}li li {
float:none;
margin:5px 0;
clear:both;
border:0;
}</style>
<script type="text/javascript">
//<![CDATA[function hide(menu){
var menuStyle=document.getElementById(menu).style;
menuStyle.display="none";
}function show(menu) {
var menuStyle=document.getElementById(menu).style;
menuStyle.display="block";
}//]]>
</script></head>
<body>
<ul>
<li onmouseover="javascript:show('submenu-1')" onmouseout="javascript:hide('submenu-1')">
About
<ul id="submenu-1">
<li><a href="#">Bio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li><li onmouseover="javascript:show('submenu-2')" onmouseout="javascript:hide('submenu-2')">
Topics
<ul id="submenu-2">
<li><a href="#">Movies</a></li>
<li><a href="#">TV</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Theater</a></li>
</ul>
</li></ul>
<script type="text/javascript">
//<![CDATA[
hide('submenu-1');
hide('submenu-2');
//]]>
</script></body>
</html>
-
