- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Programming Languages
Javascript: Drop Down Menu List
I'm sure you have looked at other drop down menu options, using javascript. As you are full aware of the multiple flavors of javascript to produce a simple drop down menu list for your web page. The example I have here, is pretty basic, and should be easy to follow and modify for what you are want to use it for.
Included here, is the sample javascript for handling the menu, css for look and feel, and html for display and layout on your page.
CSS Example
Below is the CSS to control the look and feel of your drop down menu. Font size, font style, colors, width of menu. Place the follow css code between the <head></head> tags on your web page.
<style type="text/css">
#sddm
{ margin: 0;
padding: 0;
z-index: 30}
#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 160px;
background: #666666;
color: #FFF;
text-align: center;
text-decoration: none}
#sddm li a:hover
{ background: #49A3FF}
#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #e7e7e7;
border: 1px solid #666666}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #000000;
font: 11px arial}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
</style> Javascript Example
Below is the javascript example code for controlling the drop down menu list. Place the following javascript between the <head></head> tags of your web page. They can be placed below or above the css code.
<script language="JavaScript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</SCRIPT>HTML Example
Below is the <HTML> example for the items and sub items in your drop down menu. Please the HTML anywhere between the <body></body> tags of your web page.
<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Products</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Men Apparel</a>
<a href="#">Women Apparel</a>
<a href="#">Kids</a>
<a href="#">Household</a>
</div>
</li>
<li><a href="#">Shop Now</a></li>
</ul>
<div style="clear:both"></div>
Summary
Just a neat little javascript to give your web page that drop down menu functionality.
- Javascript: Pop-up window from a HTML link
- Javascript: How to create a simple slide show with clickable links
- Javascript: Pop up Message Box On Submit
- Javascript: How to disable Right Click option
- Javascript: Controlling the number of characters entered into a HTML form field.
- Javascript: How to refresh parent window from a pop-up after closing pop-up
- Javascript: Rotate a different image when the page is reloaded
- Javascript: Drop Down Menu List
- Javascript: A simple calendar with today's date highlighted.
- Javascript: How to hide and show other form fields with a select box with Javascript and HTML
