menu script maken

ciske de rat · 22 jan 2012

ik ben met menu script bezig nu vind ik alleen een rotzooije aan het worden dus wil ik met css en java bestanden gaan werken zou iemand me kunnen helpen ik heb al meerdere kerren uit elkaar gehaald zonder suc6
enkeld wat er nog moet gebeuren is dat menu in grote balk moet komen en geheel het zaakje boven aan de website neer zetten
voor beeld hoe het nu is

Code:

<!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" xml:lang="en" lang="en">
<head>
<title>john breedveld website style </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="/common/default.css" rel="stylesheet" type="text/css" />
<style>
div.boven {
	width: 1500px;
	height: 200px;
	overflow: hidden;
	border: 0px solid black;
	padding: 0px;
	clear:both;
	top:0px;
	left:0px;
	background-image: url(image/bovenbalk.png);
}
</style>
<style type="text/css">
A:link{color:#FFFFFF;text-decoration:none;}
A:visited{color:#FFFFFF;text-decoration:none}
A:active{color:#FFFFFF;text-decoration:none}
A:hover{color:#FFFFFF;text-decoration:none}

div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size:12pt;
  font-style: normal;
  font-weight: normal;
  color: #FFFFFF;
}

div.menuBar {
  background-image: url(image/bovenbalk.png);
  border: 0px outset #e0e0e0;
  padding: 4px 2px 4px 2px;
  text-align: center;
}

div.menuBar a.menuButton {
	background-color: transparent;
	border: 0px solid #e0e0e0;
	color: #FFFFFF;
	cursor: default;
	left: 0px;
	margin: 1px;
	padding: 2px 6px 2px 6px;
	position: relative;
	text-decoration: none;
	top: 0px;
	z-index: 100;
	background-image: url(image/bovenbalk.png);
}

div.menuBar a.menuButton:hover {
	background-image: url(image/bovenbalk.png);
	border: 0px outset #e0e0e0;
	color: #FF0;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
  background-image: url(image/bovenbalk.png);
  border: 0px inset #e0e0e0;
  color: #ffffff;
  left: 1px;
  top: 1px;
}

div.menu {
  background-image: url(image/bovenbalk.png);
  border: 0px outset #e0e0e0;
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 101;
}

div.menu a.menuItem {
  color: #FFFFFF;
  cursor: default;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  background-image: url(image/bovenbalk.png);
  color: #ffffff;
}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
  margin-right: -.75em;
}

div.menu div.menuItemSep {
  border: 0px inset #e0e0e0;
  margin: 4px 2px;
}

.menuBar .menuButton {
	color: #FF0;
}

</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;

/* [MODIFIED] This code commented out, not needed for activate/deactivate
   on mouseover.

// 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;
  }
}

[END MODIFIED] */

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);
  }

  // [MODIFIED] Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the button, if not already done.

  if (button.onmouseout == null)
    button.onmouseout = buttonOrMenuMouseout;

  // Exit if this button is the currently active one.

  if (button == activeButton)
    return false;

  // [END MODIFIED]

  // 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;

  // [MODIFIED] Added for activate/deactivate on mouseover.

  // Activates this button's menu if no other is currently active.

  if (activeButton == null) {
    buttonClick(event, menuId);
    return;
  }

  // [END MODIFIED]

  // 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";

  // [MODIFIED] Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the button, if not already done.

  if (button.onmouseout == null)
    button.onmouseout = buttonOrMenuMouseout;
  if (button.menu.onmouseout == null)
    button.menu.onmouseout = buttonOrMenuMouseout;

  // [END MODIFIED]

  // 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";

  // For IE; size, position and show the menu's IFRAME as well.

  if (button.menu.iframeEl != null)
  {
    button.menu.iframeEl.style.left = button.menu.style.left;
    button.menu.iframeEl.style.top  = button.menu.style.top;
    button.menu.iframeEl.style.width  = button.menu.offsetWidth + "px";
    button.menu.iframeEl.style.height = button.menu.offsetHeight + "px";
    button.menu.iframeEl.style.display = "";
  }
}

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";

    // For IE, hide menu's IFRAME as well.

    if (button.menu.iframeEl != null)
      button.menu.iframeEl.style.display = "none";
  }
}

//----------------------------------------------------------------------------
// 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);
  }

  // [MODIFIED] Added for activate/deactivate on mouseover.

  // Set mouseout event handler for the sub menu, if not already done.

  if (item.subMenu.onmouseout == null)
    item.subMenu.onmouseout = buttonOrMenuMouseout;

  // [END MODIFIED]

  // 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 the sub menu.

  item.subMenu.style.left       = x + "px";
  item.subMenu.style.top        = y + "px";
  item.subMenu.style.visibility = "visible";

  // For IE; size, position and display the menu's IFRAME as well.

  if (item.subMenu.iframeEl != null)
  {
    item.subMenu.iframeEl.style.left    = item.subMenu.style.left;
    item.subMenu.iframeEl.style.top     = item.subMenu.style.top;
    item.subMenu.iframeEl.style.width   = item.subMenu.offsetWidth + "px";
    item.subMenu.iframeEl.style.height  = item.subMenu.offsetHeight + "px";
    item.subMenu.iframeEl.style.display = "";
  }

  // 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";

    // For IE, hide the sub menu's IFRAME as well.

    if (menu.activeItem.subMenu.iframeEl != null)
      menu.activeItem.subMenu.iframeEl.style.display = "none";

    menu.activeItem.subMenu = null;
  }

  // Deactivate the active menu item.

  removeClassName(menu.activeItem, "menuItemHighlight");
  menu.activeItem = null;
}

// [MODIFIED] Added for activate/deactivate on mouseover. Handler for mouseout
// event on buttons and menus.

function buttonOrMenuMouseout(event) {

  var el;

  // If there is no active button, exit.

  if (activeButton == null)
    return;

  // Find the element the mouse is moving to.

  if (browser.isIE)
    el = window.event.toElement;
  else if (event.relatedTarget != null)
      el = (event.relatedTarget.tagName ? event.relatedTarget : event.relatedTarget.parentNode);

  // If the element is not part of a menu, reset the active button.

  if (getContainerWith(el, "DIV", "menu") == null) {
    resetButton(activeButton);
    activeButton = null;
  }
}

// [END MODIFIED]

//----------------------------------------------------------------------------
// 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";
  }

  // Fix the IE display problem (SELECT elements and other windowed controls
  // overlaying the menu) by adding an IFRAME under the menu.

  if (browser.isIE) {
    var iframeEl = document.createElement("IFRAME");
    iframeEl.frameBorder = 0;
    iframeEl.src = "javascript:false;";
    iframeEl.style.display = "none";
    iframeEl.style.position = "absolute";
    iframeEl.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
    menu.iframeEl = menu.parentNode.insertBefore(iframeEl, menu);
  }

  // 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) {

  var i, list;

  // Return true if the given element currently has the given class
  // name.

  list = el.className.split(" ");
  for (i = 0; i < list.length; i++)
    if (list[i] == name)
      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.

  newList = new Array();
  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 #1. -->

<div class="menuBar" style="float:right;width:40em;height:2em;"

><a class="menuButton"
    href="index.html"
    onclick="return buttonClick(event, 'menu1');"
    onmouseover="buttonMouseover(event, 'menu1');"
><a href="index.html">Home</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu2');"
    onmouseover="buttonMouseover(event, 'menu2');"
>Over Ons</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu3');"
    onmouseover="buttonMouseover(event, 'menu3');"
>Werkzoekenden</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu4');"
    onmouseover="buttonMouseover(event, 'menu4');"
>Werkgevers</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu5');"
    onmouseover="buttonMouseover(event, 'menu5');"
>Scholing</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu6');"
    onmouseover="buttonMouseover(event, 'menu6');"
>Patners</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu7');"
    onmouseover="buttonMouseover(event, 'menu7');"
><a href="index.html">Blog</a
><a class="menuButton"
    href=""
    onclick="return buttonClick(event, 'menu8');"
    onmouseover="buttonMouseover(event, 'menu8');"
><a href="index.html">Contact</a
></div>

<!-- Main menus. -->

<div id="menu1" class="menu"
     onmouseover="menuMouseover(event)">
</a>
</div>

<div id="menu2" class="menu">
<a class="menuItem" href="blank.html">Wie we zijn</a>
<a class="menuItem" href="blank.html">Diensten</a>
<a class="menuItem" href="blank.html">Missie & Visie</a>
<a class="menuItem" href="blank.html">Sponsoring</a>
<a class="menuItem" href="blank.html">Ons Team</a>
</div>

<div id="menu3" class="menu">
<a class="menuItem" href="blank.html">Informatie</a>
<a class="menuItem" href="blank.html">Vacatures</a>
<a class="menuItem" href="blank.html">Solliciteren</a>
<a class="menuItem" href="blank.html">Veelgestelde vragen</a>

</div>

<div id="menu4" class="menu">
<a class="menuItem" href="blank.html">Werk Uitbesteden</a>
<a class="menuItem" href="blank.html">Doorstroom Medewerkers</a>

</div>

<div id="menu5" class="menu">
<a class="menuItem" href="blank.html">Stage-erkenning MBO</a>
<a class="menuItem" href="blank.html">Opleiding</a>
</div>

<div id="menu6" class="menu">
<a class="menuItem" href="http://www.combihosting.nl">Combihosting BV</a>
<a class="menuItem" href="http://www.inpakcentrum.nl">Inpakcentrum BV</a>
<a class="menuItem" href="http://www.wieldopcentrum.nl">Wieldopcentrum Webshop</a>
<a class="menuItem" href="http://www.combicars.nl">Combicars Webshop</a>

<a class="menuItem" href="http://www.sneeuwkettingcentrum.nl">Sneeuwkettingcentrum</a>
<a class="menuItem" href="http://www.balancedvaluesinc.com/">Balanced Values Inc</a>
<a class="menuItem" href="http://www.drechtwerk.nl/site/">Drechtwerk</a>
<a class="menuItem" href="http://www.papendrecht.nl/">Gemeente papendrecht</a>
</div>

<div id="menu7" class="menu">
<a class="menuItem" href="blank.html">Informatie</a>
<a class="menuItem" href="blank.html">Vacatures</a>
<a class="menuItem" href="blank.html">Solliciteren</a>

<a class="menuItem" href="blank.html">Veelgestelde vragen</a>

</div>

<div id="menu8" class="menu">
</div>
<div class="boven"id="boven">

</div>






</body>

</html>

csshunter · 23 jan 2012

Hoi ciske de rat,
Och-arm!

Een loei van een menu-script, van 8 jaar geleden, toen sommige browsers nog niet wisten dat er een css:hover bestond, en je er uit arren moede maar een bonk javascript op moest loslaten om een submenu te kunnen tonen...

Tegenwoordig kan het simpel en doeltreffend zonder javascript, met alleen css; en met ingang van Internet Explorer 7 zijn er zelfs geen trucjes meer nodig om IE het ook te laten doen.

Mijn advies zou zijn: het hele script laten vallen als een baksteen, en een net menu-lijstje met submenu's maken in de vorm van:

HTML:

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="overons.htm">Over Ons</a>
        <ul>
            <li><a href="wie.htm">Wie We Zijn</a></li>
            <li><a href="diensten.htm">Diensten</a></li>
            <li><a href="missie.htm">Missie &amp; Visie</a></li>
            <li><a href="sponsoring.htm">Sponsoring</a></li>
            <li><a href="team.htm">Ons Team</a></li>       
        </ul>
    </li>
    <li><a href="werkzoekenden.htm">Werkzoekenden</a>
        <ul>
            <li><a href="info.htm">Informatie</a></li>
            ... enz.

Dit kan je prettig opmaken met css, met verborgen submenu's die bij een hover tevoorschijn komen.

Deze manier staat bekend onder de naam "Suckerfish menu" (zie hier).
Heb je hier nog geen ervaring mee, dan kan je eens te rade gaan bij de List-O-Matic.
Wil je meer keus, dan bv. Listamatic en andere pagina's in het menu daarvan.
Nog meer keus: de pagina List Menus in de CSS-wiki van css-discuss.
O ja, en een voorbeeld uit de praktijk: de pagina's Menu aanmaken van Reisverslag uit Cascade-land.

Is dit voorlopig genoeg?

Met vriendelijke groet,
CSShunter

menu script maken

ciske de rat

Verenigingslid

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy