<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--************************************************************************-->
<!--* Revenge of the Menu Bar Demo *-->
<!--* *-->
<!--* Copyright 2000-2004 by Mike Hall *-->
<!--* Please see http://www.brainjar.com for terms of use. *-->
<!--************************************************************************-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>....</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
font-family: "MS Sans Serif", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: #000000;
}
div.menuBar {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
padding: 4px 2px 4px 2px;
text-align: left;
}
div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #000000;
cursor: default;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}
div.menuBar a.menuButton:hover {
background-color: transparent;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
color: #000000;
}
div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
background-color: #a0a0a0;
border-color: #909090 #f0f0f0 #f0f0f0 #909090;
color: #ffffff;
left: 1px;
top: 1px;
}
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
div.menu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}
div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #000080;
color: #ffffff;
}
div.menu a.menuItem span.menuItemText {}
div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}
div.menu div.menuItemSep {
border-top: 1px solid #909090;
border-bottom: 1px solid #f0f0f0;
margin: 4px 2px;
}
</style>
<script type="text/javascript">//<![CDATA[
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2000-2004 by Mike Hall.
// See http://www.brainjar.com for terms of use.
//*****************************************************************************
//----------------------------------------------------------------------------
// Code to determine the browser and version.
//----------------------------------------------------------------------------
function Browser() {
var ua, s, i;
this.isIE = false; // Internet Explorer
this.isOP = false; // Opera
this.isNS = false; // Netscape
this.version = null;
ua = navigator.userAgent;
s = "Opera";
if ((i = ua.indexOf(s)) >= 0) {
this.isOP = true;
this
.version
= parseFloat
(ua
.substr(i
+ s
.length
)); return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this
.version
= parseFloat
(ua
.substr(i
+ s
.length
)); return;
}
// Treat any other "Gecko" browser as Netscape 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
s = "MSIE";
if ((i = ua.indexOf(s))) {
this.isIE = true;
this
.version
= parseFloat
(ua
.substr(i
+ s
.length
)); return;
}
}
var browser = new Browser();
//----------------------------------------------------------------------------
// Code for handling the menu bar and active button.
//----------------------------------------------------------------------------
var activeButton = null;
// Capture mouse clicks on the page so any active button can be
// deactivated.
if (browser.isIE)
document.onmousedown = pageMousedown;
else
document.addEventListener("mousedown", pageMousedown, true);
function pageMousedown(event) {
var el;
// If there is no active button, exit.
if (activeButton == null)
return;
// Find the element that was clicked on.
if (browser.isIE)
el = window.event.srcElement;
else
el = (event.target.tagName ? event.target : event.target.parentNode);
// If the active button was clicked on, exit.
if (el == activeButton)
return;
// If the element is not part of a menu, reset and clear the active
// button.
if (getContainerWith(el, "DIV", "menu") == null) {
resetButton(activeButton);
activeButton = null;
}
}
function buttonClick(event, menuId) {
var button;
// Get the target button element.
if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;
// Blur focus from the link to remove that annoying outline.
button.blur();
// Associate the named menu to this button if not already done.
// Additionally, initialize menu display.
if (button.menu == null) {
button.menu = document.getElementById(menuId);
if (button.menu.isInitialized == null)
menuInit(button.menu);
}
// Reset the currently active button, if any.
if (activeButton != null)
resetButton(activeButton);
// Activate this button, unless it was the currently active one.
if (button != activeButton) {
depressButton(button);
activeButton = button;
}
else
activeButton = null;
return false;
}
function buttonMouseover(event, menuId) {
var button;
// Find the target button element.
if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;
// If any other button menu is active, make this one active instead.
if (activeButton != null && activeButton != button)
buttonClick(event, menuId);
}
function depressButton(button) {
var x, y;
// Update the button's style class to make it look like it's
// depressed.
button.className += " menuButtonActive";
// Position the associated drop down menu under the button and
// show it.
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
// For IE, adjust position.
if (browser.isIE) {
x += button.offsetParent.clientLeft;
y += button.offsetParent.clientTop;
}
button.menu.style.left = x + "px";
button.menu.style.top = y + "px";
button.menu.style.visibility = "visible";
}
function resetButton(button) {
// Restore the button's style class.
removeClassName(button, "menuButtonActive");
// Hide the button's menu, first closing any sub menus.
if (button.menu != null) {
closeSubMenu(button.menu);
button.menu.style.visibility = "hidden";
}
}
//----------------------------------------------------------------------------
// Code to handle the menus and sub menus.
//----------------------------------------------------------------------------
function menuMouseover(event) {
var menu;
// Find the target menu element.
if (browser.isIE)
menu = getContainerWith(window.event.srcElement, "DIV", "menu");
else
menu = event.currentTarget;
// Close any active sub menu.
if (menu.activeItem != null)
closeSubMenu(menu);
}
function menuItemMouseover(event, menuId) {
var item, menu, x, y;
// Find the target item element and its parent menu element.
if (browser.isIE)
item = getContainerWith(window.event.srcElement, "A", "menuItem");
else
item = event.currentTarget;
menu = getContainerWith(item, "DIV", "menu");
// Close any active sub menu and mark this one as active.
if (menu.activeItem != null)
closeSubMenu(menu);
menu.activeItem = item;
// Highlight the item element.
item.className += " menuItemHighlight";
// Initialize the sub menu, if not already done.
if (item.subMenu == null) {
item.subMenu = document.getElementById(menuId);
if (item.subMenu.isInitialized == null)
menuInit(item.subMenu);
}
// Get position for submenu based on the menu item.
x = getPageOffsetLeft(item) + item.offsetWidth;
y = getPageOffsetTop(item);
// Adjust position to fit in view.
var maxX, maxY;
if (browser.isIE) {
maxX
= Math
.max(document
.documentElement
.scrollLeft
, document
.body
.scrollLeft
) + (document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth : document.body.clientWidth);
maxY
= Math
.max(document
.documentElement
.scrollTop
, document
.body
.scrollTop
) + (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight);
}
if (browser.isOP) {
maxX = document.documentElement.scrollLeft + window.innerWidth;
maxY = document.documentElement.scrollTop + window.innerHeight;
}
if (browser.isNS) {
maxX = window.scrollX + window.innerWidth;
maxY = window.scrollY + window.innerHeight;
}
maxX -= item.subMenu.offsetWidth;
maxY -= item.subMenu.offsetHeight;
if (x > maxX)
x
= Math
.max(0, x
- item
.offsetWidth
- item
.subMenu
.offsetWidth
+ (menu.offsetWidth - item.offsetWidth));
y
= Math
.max(0, Math
.min(y
, maxY
));
// Position and show it.
item.subMenu.style.left = x + "px";
item.subMenu.style.top = y + "px";
item.subMenu.style.visibility = "visible";
// Stop the event from bubbling.
if (browser.isIE)
window.event.cancelBubble = true;
else
event.stopPropagation();
}
function closeSubMenu(menu) {
if (menu == null || menu.activeItem == null)
return;
// Recursively close any sub menus.
if (menu.activeItem.subMenu != null) {
closeSubMenu(menu.activeItem.subMenu);
menu.activeItem.subMenu.style.visibility = "hidden";
menu.activeItem.subMenu = null;
}
removeClassName(menu.activeItem, "menuItemHighlight");
menu.activeItem = null;
}
//----------------------------------------------------------------------------
// Code to initialize menus.
//----------------------------------------------------------------------------
function menuInit(menu) {
var itemList, spanList;
var textEl, arrowEl;
var itemWidth;
var w, dw;
var i, j;
// For IE, replace arrow characters.
if (browser.isIE) {
menu.style.lineHeight = "2.5ex";
spanList = menu.getElementsByTagName("SPAN");
for (i = 0; i < spanList.length; i++)
if (hasClassName(spanList[i], "menuItemArrow")) {
spanList[i].style.fontFamily = "Webdings";
spanList[i].firstChild.nodeValue = "4";
}
}
// Find the width of a menu item.
itemList = menu.getElementsByTagName("A");
if (itemList.length > 0)
itemWidth = itemList[0].offsetWidth;
else
return;
// For items with arrows, add padding to item text to make the
// arrows flush right.
for (i = 0; i < itemList.length; i++) {
spanList = itemList[i].getElementsByTagName("SPAN");
textEl = null;
arrowEl = null;
for (j = 0; j < spanList.length; j++) {
if (hasClassName(spanList[j], "menuItemText"))
textEl = spanList[j];
if (hasClassName(spanList[j], "menuItemArrow")) {
arrowEl = spanList[j];
}
}
if (textEl != null && arrowEl != null) {
textEl.style.paddingRight = (itemWidth
- (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
// For Opera, remove the negative right margin to fix a display bug.
if (browser.isOP)
arrowEl.style.marginRight = "0px";
}
}
// Fix IE hover problem by setting an explicit width on first item of
// the menu.
if (browser.isIE) {
w = itemList[0].offsetWidth;
itemList[0].style.width = w + "px";
dw = itemList[0].offsetWidth - w;
w -= dw;
itemList[0].style.width = w + "px";
}
// Mark menu as initialized.
menu.isInitialized = true;
}
//----------------------------------------------------------------------------
// General utility functions.
//----------------------------------------------------------------------------
function getContainerWith(node, tagName, className) {
// Starting with the given node, find the nearest containing element
// with the specified tag name and style class.
while (node != null) {
if (node.tagName != null && node.tagName == tagName &&
hasClassName(node, className))
return node;
node = node.parentNode;
}
return node;
}
function hasClassName(el, name) {
// Return true if the given element currently has the given class
// name.
for (i
= 0; i
< list.length
; i
++) return true;
return false;
}
function removeClassName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
// Remove the given class name from the element's className property.
curList
= el
.className
.split(" "); for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el
.className
= newList
.join(" ");}
function getPageOffsetLeft(el) {
var x;
// Return the x coordinate of an element relative to the page.
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);
return x;
}
function getPageOffsetTop(el) {
var y;
// Return the x coordinate of an element relative to the page.
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);
return y;
}
//]]></script>
</head>
<body>
<!-- Menu bar. -->
<div class="menuBar" style="width:80%;"
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'fileMenu');"
onmouseover="buttonMouseover(event, 'fileMenu');"
>File</a
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'editMenu');"
onmouseover="buttonMouseover(event, 'editMenu');"
>Edit</a
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'viewMenu');"
onmouseover="buttonMouseover(event, 'viewMenu');"
>View</a
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'toolsMenu');"
onmouseover="buttonMouseover(event, 'toolsMenu');"
>Tools</a
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'optionsMenu');"
onmouseover="buttonMouseover(event, 'optionsMenu');"
>Options</a
><a class="menuButton"
href=""
onclick="return buttonClick(event, 'helpMenu');"
onmouseover="buttonMouseover(event, 'helpMenu');"
>Help</a
></div>
<!-- Main menus. -->
<div id="fileMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">File Menu Item 1</a>
<a class="menuItem" href=""
onclick="return false;"
onmouseover="menuItemMouseover(event, 'fileMenu2');"
><span class="menuItemText">File Menu Item 2</span><span class="menuItemArrow">▶</span></a>
<a class="menuItem" href="blank.html">File Menu Item 3</a>
<a class="menuItem" href="blank.html">File Menu Item 4</a>
<a class="menuItem" href="blank.html">File Menu Item 5</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">File Menu Item 6</a>
</div>
<div id="editMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Edit Menu Item 1</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 2</a>
<a class="menuItem" href=""
onclick="return false;"
onmouseover="menuItemMouseover(event, 'editMenu3');"
><span class="menuItemText">Edit Menu Item 3</span><span class="menuItemArrow">▶</span></a>
<a class="menuItem" href="blank.html">Edit Menu Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 5</a>
</div>
<div id="viewMenu" class="menu">
<a class="menuItem" href="blank.html">View Menu Item 1</a>
<a class="menuItem" href="blank.html">View Menu Item 2</a>
<a class="menuItem" href="blank.html">View Menu Item 3</a>
</div>
<div id="toolsMenu" class="menu"
onmouseover="menuMouseover(event)">
<a class="menuItem" href=""
onclick="return false;"
onmouseover="menuItemMouseover(event, 'toolsMenu1');"
><span class="menuItemText">Tools Menu Item 1</span><span class="menuItemArrow">▶</span></a>
<a class="menuItem" href="blank.html">Tools Menu Item 2</a>
<a class="menuItem" href="blank.html">Tools Menu Item 3</a>
<div class="menuItemSep"></div>
<a class="menuItem" href=""
onclick="return false;"
onmouseover="menuItemMouseover(event, 'toolsMenu4');"
><span class="menuItemText">Tools Menu Item 4</span><span class="menuItemArrow">▶</span></a>
<a class="menuItem" href="blank.html">Tools Menu Item 5</a>
</div>
<div id="optionsMenu" class="menu">
<a class="menuItem" href="blank.html">Options Menu Item 1</a>
<a class="menuItem" href="blank.html">Options Menu Item 2</a>
<a class="menuItem" href="blank.html">Options Menu Item 3</a>
</div>
<div id="helpMenu" class="menu">
<a class="menuItem" href="blank.html">Help Menu Item 1</a>
<a class="menuItem" href="blank.html">Help Menu Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Help Menu Item 3</a>
</div>
<div id="fileMenu2" class="menu">
<a class="menuItem" href="blank.html">File Menu 2 Item 1</a>
<a class="menuItem" href="blank.html">File Menu 2 Item 2</a>
</div>
<!-- Edit sub menus. -->
<div id="editMenu3" class="menu"
onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Edit Menu 3 Item 1</a>
<a class="menuItem" href="blank.html">Edit Menu 3 Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href=""
onclick="return false;"
onmouseover="menuItemMouseover(event, 'editMenu3_3');"
><span class="menuItemText">Edit Menu 3 Item 3</span><span class="menuItemArrow">▶</span></a>
<a class="menuItem" href="blank.html">Edit Menu 3 Item 4</a>
</div>
<div id="editMenu3_3" class="menu">
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 1</a>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 2</a>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 3</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 4</a>
</div>
<!-- Tools sub menus. -->
<div id="toolsMenu1" class="menu">
<a class="menuItem" href="blank.html">Tools Menu 1 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 3</a>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 5</a>
</div>
<div id="toolsMenu4" class="menu"
onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Tools Menu 4 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 4 Item 2</a>
<a class="menuItem" href="blank.html"
onclick="return false;"
onmouseover="menuItemMouseover(event, 'toolsMenu4_3');"
><span class="menuItemText">Tools Menu 4 Item 3</span><span class="menuItemArrow">▶</span></a>
</div>
<div id="toolsMenu4_3" class="menu">
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 2</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 3</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 4</a>
</div>
</body>
</html>
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
echt verblindend 
Gesponsorde links
:'( 
) en zou je dat niet beter maken in flash, zo een menu. dat zou veel sneller zijn, je laad de voledige flash de eerste keer, en je zet, dan kan je een scipt plaatsen in flash, dat als je over de knop gaat, een uitshuifmenu krijgt! ben zeker dat het gaat, maar alleen, ik kan dat niet hoor 
Actiefste leden van de maand
