Scripts
Javascript Dropdown Menu
Een script om een usorted list te parsen naar een drop-down-menu. De code voor het menu had ook al door PHP geparsed kunnen worden, maar door een UL/LI list aan te bieden kunnen zoekmachines de navigatie beter en sneller indexeren. Javascript en CSS doen de rest..
javascript-dropdown-menu
[b]stylesheet.css[/b]
[code]html, body, div, form
{
margin: 0px;
padding: 0px;
}
body
{
padding: 50px;
}
.dropdown
{
background: #000000;
height: auto;
padding: 4px 4px 4px 10px;
}
.dropdown ul
{
list-style: none none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
.dropdown ul li
{
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 18px 0px 0px;
position: relative;
}
.dropdown ul li a
{
color: #FFFFFF;
font-family: arial;
font-size: 12px;
font-weight: bold;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-decoration: none;
}
.dropdown ul li a:hover
{
text-decoration: underline;
}
.dropdown ul li ul
{
background: #F0F0F0;
border: #000000 solid 1px;
display: none;
left: 0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: 25px;
}
.dropdown ul li ul li
{
color: #000000;
display: block;
font-family: Arial;
font-size: 12px;
font-weight: normal;
left: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
top: auto;
width: 120px;
}
.dropdown ul li ul li a
{
color: #000000;
display: block;
padding: 3px 3px 3px 6px;
}
.dropdown ul li ul li ul
{
left: 125px;
top: 2px;
}[/code]
[b]dropdown.js[/b]
[code]var dropdown_rootNode = null; // Reference to root node of the current navigation.
var dropdown_timer = null; // Timer to hide all menu's on a 'onmouseout'.
var dropdown_timerWait = 750; // Time to wait before closing all open menu's.
var dropdown_zIndex = 1000; // zIndex of the navigation.
function createDropdown(nav_id)
{
if(document.getElementById) // Browser compatability
{
try
{
var rootNode = document.getElementById(nav_id);
// Add javascript to items in navigation and hide submenu's.
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];
if(ulNode.nodeName == 'UL') // Lookup UL tags
{
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];
if(liNode.nodeName == 'LI') // Lookup LI tags
{
// Init subitems
__initDropdown(liNode);
// Add a mouseover-event to each list item.
liNode.onmouseover = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}
__showDropdown(this);
}
liNode.onmouseout = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}
dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
}
}
}
}
}
}
catch(e)
{
// Ignore
}
}
}
// Add classes and mouse-events to subitems.
function __initDropdown(rootNode)
{
dropdown_zIndex += 2;
var zIndex = dropdown_zIndex;
// Open subitems
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];
if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'none';
ulNode.style.visibility = 'hidden';
ulNode.style.zIndex = zIndex;
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];
if(liNode.nodeName == 'LI')
{
// liNode.style.zIndex = zIndex + 1;
// Init subitems
__initDropdown(liNode);
// Add a mouseover-event to each list item.
liNode.onmouseover = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}
this.className += ' hover';
__showDropdown(this);
}
liNode.onmouseout = function()
{
try
{
clearTimeout(dropdown_timer);
}
catch(e)
{
}
this.className = this.className.replace('hover', '');
dropdown_timer = setTimeout('__hideDropdown()', dropdown_timerWait);
}
}
}
}
}
}
// Show submenu
function __showDropdown(rootNode)
{
if(dropdown_rootNode == null)
{
dropdown_rootNode = rootNode.parentNode.parentNode;
}
// Hide siblings' submenu's
var ulNode = rootNode.parentNode;
for(var i = 0; i < ulNode.childNodes.length; i++)
{
var liNode = ulNode.childNodes[i];
if(liNode.nodeName == 'LI')
{
if(liNode != rootNode)
{
__hideDropdown(liNode);
}
}
}
// Show submenu's (if any)
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];
if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'block';
ulNode.style.visibility = 'visible';
}
}
}
// Hide submenu's
function __hideDropdown(rootNode)
{
if(__hideDropdown.arguments.length < 1)
{
var tmpNode = dropdown_rootNode;
dropdown_rootNode = null;
if(tmpNode != null)
{
for(var i = 0; i < tmpNode.childNodes.length; i++)
{
var ulNode = tmpNode.childNodes[i];
if(ulNode.nodeName == 'UL')
{
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];
if(liNode.nodeName == 'LI')
{
__hideDropdown(liNode);
}
}
}
}
}
}
else
{
for(var i = 0; i < rootNode.childNodes.length; i++)
{
var ulNode = rootNode.childNodes[i];
if(ulNode.nodeName == 'UL')
{
ulNode.style.display = 'none';
ulNode.style.visibility = 'hidden';
for(var j = 0; j < ulNode.childNodes.length; j++)
{
var liNode = ulNode.childNodes[j];
if(liNode.nodeName == 'LI')
{
__hideDropdown(liNode);
}
}
}
}
}
}[/code]
[b]index.html[/b]
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dropdown Menu</title>
<link type="text/css" rel="stylesheet" href="./stylesheet.css" />
<script type="text/javascript" src="./dropdown.js"></script>
</head>
<body>
<div class="dropdown" id="my_dropdown_id">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a>
<ul>
<li><a href="#">Item 1.1.1</a>
<ul>
<li><a href="#">Item 1.1.1.1</a>
<ul>
<li><a href="#">Item 1.1.1.1.1</a>
<ul>
<li><a href="#">Item 1.1.1.1.1.1</a></li>
<li><a href="#">Item 1.1.1.1.1.2</a></li>
<li><a href="#">Item 1.1.1.1.1.3</a></li>
<li><a href="#">Item 1.1.1.1.1.4</a></li>
<li><a href="#">Item 1.1.1.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Item 1.1.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 1.1.1.2</a></li>
<li><a href="#">Item 1.1.1.3</a></li>
<li><a href="#">Item 1.1.1.4</a></li>
</ul>
</li>
<li><a href="#">Item 1.1.2</a></li>
<li><a href="#">Item 1.1.3</a></li>
<li><a href="#">Item 1.1.4</a></li>
<li><a href="#">Item 1.1.5</a></li>
</ul>
</li>
<li><a href="#">Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
<script type="text/javascript">
createDropdown('my_dropdown_id');
</script>
</body>
</html>[/code]
Reacties
0