menuDropdown.css
body {
font-family: verdana, helvetica, arial, sans-serif;
margin: 0px;
padding: 0px
}
#mainMenu {
background-color: #EEE;
border: 1px solid #CCC;
color: #000;
margin: 0px;
padding: 0px 0px 2px 20px;
}
#menuList {
margin: 0px;
padding: 0px;
}
#menuList ul {
margin: 0px;
padding: 0px;
}
#menuList li {
display: inline;
list-style: none;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
margin: 0px;
padding: 3px 6px;
text-decoration: none;
}
a.actuator:hover {
background-color: #009;
color: #EEE;
}
.menu {
color: #000;
background-color: #EEE;
border: 1px solid #CCC;
position: absolute;
visibility: hidden;
}
.menu li a {
background-color: transparent;
color: #000;
display: block;
font-size: 12px;
line-height: 1.75em;
margin: 0px;
padding: 0px 10px;
text-decoration: none;
}
.menu li a:hover {
background-color: #009;
color: #EEE;
}
span.key {
text-decoration: underline;
}
#productsMenu { width: 165px; }
#plansMenu { width: 160px; }
menuDropdown.js
/*
* menuDropdown.js - implements an dropdown menu based on a HTML list
* Author: Dave Lindquist (http://www.gazingus.org)
*/
var currentMenu = null;
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I'm too tired
actuator.onmouseover = function() {
if (currentMenu == null) {
this.showMenu();
}
else {
currentMenu.style.visibility = "hidden";
this.showMenu();
}
}
actuator.onclick = function() {
if (currentMenu == null) {
this.showMenu();
}
else {
currentMenu.style.visibility = "hidden";
currentMenu = null;
}
return false;
}
actuator.showMenu = function() {
menu.style.left = this.offsetLeft + "px";
menu.style.top = this.offsetTop + this.offsetHeight + "px";
menu.style.visibility = "visible";
currentMenu = menu;
}
}