login  Naam:   Wachtwoord: 
Registreer je!
 Forum

javascript menu | Pagina 2

29 antwoorden

Gesponsorde links
Offline Wijnand - 31/08/2004 11:20
Avatar van Wijnand Moderator je bedoeld dus dat je eerst dit hebt:

menu 1
menu 2
menu 3

en dat als je op menu 1 klikt dat je dit hebt
menu 1
- sub 1
- sub 2
menu 2
menu 3
Offline DeafBoy - 31/08/2004 11:24 (laatste wijziging 31/08/2004 11:40)
Avatar van DeafBoy HTML beginner Nee er is een knop Start net als bij Windows zelf. Als je daarop klikt schuift er een lijst naar boven met Telefonie Hosting Internet en Mobiel. Als je op Telefonie klikt, ga je naar de pagina Telefonie.
Dat zelfde geldt voor Hosting en Mobiel.

Maar bij Internet niet, dan moet je nog eerst 2 sublinks openen. En die 2 zijn weer links. Heb al gezocht op google, generators, maar niks wat ik precies zocht.

Begrijp je me nu Wijnand?

EDIT: Je begrijpt me toch Wijnand. Sorry. Maar kun je dat wel creeren of aan een script komen??
Offline Wijnand - 31/08/2004 11:42
Avatar van Wijnand Moderator www.google.nl (zoeken op: javascript menu)
www.leejoo.nl

Ik zelf kan dit niet maken, omdat ik niet precies weet wat je bedoeld, en omdat javascript mijn sterkste kant niet is. Zeg maar dat ik javascript zo min mogelijk gebruik omdat mensen die ook wel is uit hebben staan.
Offline DeafBoy - 31/08/2004 11:47
Avatar van DeafBoy HTML beginner Jij had gelijk wat jij bedoelde

je bedoeld dus dat je eerst dit hebt:

menu 1
menu 2
menu 3

en dat als je op menu 1 klikt dat je dit hebt
menu 1
- sub 1
- sub 2
menu 2
menu 3

Klopt helemaal alleen sub 1 en 2 moeten wel naar rechts gaan. En ik ben al op google en Opa Leejoo geweest. Maar Sitemasters V2 was mijn laatste hoop
Offline Hans - 31/08/2004 11:47
Avatar van Hans HTML beginner http://www.dynamicdrive.com/
Offline DeafBoy - 31/08/2004 11:50
Avatar van DeafBoy HTML beginner Oeh ben doof dus slecht in engels. Zal kijken of ik er uit kom
Offline DeafBoy - 31/08/2004 12:09
Avatar van DeafBoy HTML beginner jammer zit er wel een mooie tussen alleen niet gekoppeld aan een knop.. Nog andere suggesties??
Offline wouter - 31/08/2004 12:15
Avatar van wouter PHP interesse maak daar dan zelf een knop van ?
Offline DeafBoy - 31/08/2004 12:17 (laatste wijziging 31/08/2004 12:43)
Avatar van DeafBoy HTML beginner ja maar de script snap ik al helemaal niet. En laat staan die handleiding.

PS: ben doof, dus enorme achterstand op Engels.. Nederlands gaat prima laat staan Engels.

Daarom wou ik een script die ook gekoppeld is aan een knop..
Kan jij me ook niet helpen? Echt niemand die me kan helpen?? Ben radeloos en hopeloos geval nu..
Offline DeafBoy - 31/08/2004 13:22 (laatste wijziging 31/08/2004 13:28)
Avatar van DeafBoy HTML beginner heb wel een voorbeeld gevonden, maar kom nie achter de scripts, want deze heeft meer functies dan ik nodig heb, kan iemand het voor me oplossen,

http://www.win2kwereld.nl/:';( :'( :'(
Links onder de startknop.
Offline biertie - 31/08/2004 13:55
Avatar van biertie Onbekend was zo eventjes aan het denken (jah, soms doe ik dat ook nog ) 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 

ik hoop dat je er iets aan hebt
=> Biertie
Offline DeafBoy - 31/08/2004 14:04
Avatar van DeafBoy HTML beginner Jammer weer een kandidaat minder, Flash kan ik al helemaal nie..:'( :'( 
Offline webbiexl - 31/08/2004 15:28
Avatar van webbiexl PHP interesse Kan je niet mailen naar de site toe, om te vragen of je dat script van hun mag gebruiken???
Offline maestro - 31/08/2004 15:29
Avatar van maestro HTML gevorderde In Fireworks kan je drop-down menu's maken. Het programma slicet alles en genereert de nodige javascript.
Offline webstab - 31/08/2004 15:32
Avatar van webstab PHP ver gevorderde http://www.burmees.nl/menu/menus.htm
daar kwam mijn menu van mijn oude site van.:o
Offline DeafBoy - 31/08/2004 16:15 (laatste wijziging 31/08/2004 16:17)
Avatar van DeafBoy HTML beginner Sorry heb geen Fire Works, en kent dat ook niet.
Maar webstap, over welke menu heb jij het. Ik zie er veel staan.
En ik moet een menu hebben die naar boven uitschuift en niet naar beneden. En graag via een knop
Offline webstab - 31/08/2004 16:55
Avatar van webstab PHP ver gevorderde je moet daar die zip-file downloaden en dan staat er uitleg bij en zo kan je zelf je menu heel gemakkelijk maken.
Offline blader157 - 31/08/2004 17:11 (laatste wijziging 08/09/2004 14:10)
Avatar van blader157 Nieuw lid http://www.leejoo.nl/
daarstaat het eenenalvol van javascripts:s
Offline Darrow - 31/08/2004 17:12 (laatste wijziging 31/08/2004 17:13)
Avatar van Darrow Onbekend als je http:// voor je link zet en / erachter kan je er automatisch op klikken ;)

http://www.leejoo.nl/

Just a tip 
Offline DeafBoy - 31/08/2004 17:34
Avatar van DeafBoy HTML beginner Sorry ik zei op de 1e pagina al dat ik niks vond bij Opa Leejoo..
Ik heb het al op 4 forums gepost en niemand weet een goed antwoord. Voor degene die nog nie begrijpen. het is een verticaal menu met sublinks die naar rechts uitsteken.

Bij de meesten staan ze allemaal boven aan. Dus schuift het naar bedneden. Maar bij mij moet het onderaan staan en het dus ook naar boven uitschuiven en NIET onderaan.
Offline webstab - 31/08/2004 20:00 (laatste wijziging 31/08/2004 20:00)
Avatar van webstab PHP ver gevorderde dat gaat met die
burmees.nl
daar kan je bij opties kiezen tussen horizontaal/verticaal
Offline DeafBoy - 31/08/2004 20:39 (laatste wijziging 31/08/2004 21:01)
Avatar van DeafBoy HTML beginner Yo hier ben ik ff weer heb een uitstekende menu gevonden. Naar nu heb ik jullie hulp nodig voor iets anders met dat menu.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!--************************************************************************-->
  3. <!--* Revenge of the Menu Bar Demo                                         *-->
  4. <!--*                                                                      *-->
  5. <!--* Copyright 2000-2004 by Mike Hall                                     *-->
  6. <!--* Please see http://www.brainjar.com for terms of use.                 *-->
  7. <!--************************************************************************-->
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9. <head>
  10. <title>....</title>
  11. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  12. <link href="/common/default.css" rel="stylesheet" type="text/css" />
  13. <style type="text/css">
  14.  
  15. div.menuBar,
  16. div.menuBar a.menuButton,
  17. div.menu,
  18. div.menu a.menuItem {
  19.   font-family: "MS Sans Serif", Arial, sans-serif;
  20.   font-size: 8pt;
  21.   font-style: normal;
  22.   font-weight: normal;
  23.   color: #000000;
  24. }
  25.  
  26. div.menuBar {
  27.   background-color: #d0d0d0;
  28.   border: 2px solid;
  29.   border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  30.   padding: 4px 2px 4px 2px;
  31.   text-align: left;
  32. }
  33.  
  34. div.menuBar a.menuButton {
  35.   background-color: transparent;
  36.   border: 1px solid #d0d0d0;
  37.   color: #000000;
  38.   cursor: default;
  39.   left: 0px;
  40.   margin: 1px;
  41.   padding: 2px 6px 2px 6px;
  42.   position: relative;
  43.   text-decoration: none;
  44.   top: 0px;
  45.   z-index: 100;
  46. }
  47.  
  48. div.menuBar a.menuButton:hover {
  49.   background-color: transparent;
  50.   border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  51.   color: #000000;
  52. }
  53.  
  54. div.menuBar a.menuButtonActive,
  55. div.menuBar a.menuButtonActive:hover {
  56.   background-color: #a0a0a0;
  57.   border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  58.   color: #ffffff;
  59.   left: 1px;
  60.   top: 1px;
  61. }
  62.  
  63. div.menu {
  64.   background-color: #d0d0d0;
  65.   border: 2px solid;
  66.   border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  67.   left: 0px;
  68.   padding: 0px 1px 1px 0px;
  69.   position: absolute;
  70.   top: 0px;
  71.   visibility: hidden;
  72.   z-index: 101;
  73. }
  74.  
  75. div.menu a.menuItem {
  76.   color: #000000;
  77.   cursor: default;
  78.   display: block;
  79.   padding: 3px 1em;
  80.   text-decoration: none;
  81.   white-space: nowrap;
  82. }
  83.  
  84. div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  85.   background-color: #000080;
  86.   color: #ffffff;
  87. }
  88.  
  89. div.menu a.menuItem span.menuItemText {}
  90.  
  91. div.menu a.menuItem span.menuItemArrow {
  92.   margin-right: -.75em;
  93. }
  94.  
  95. div.menu div.menuItemSep {
  96.   border-top: 1px solid #909090;
  97.   border-bottom: 1px solid #f0f0f0;
  98.   margin: 4px 2px;
  99. }
  100.  
  101. </style>
  102. <script type="text/javascript">//<![CDATA[
  103.  
  104. //*****************************************************************************
  105. // Do not remove this notice.
  106. //
  107. // Copyright 2000-2004 by Mike Hall.
  108. // See http://www.brainjar.com for terms of use.
  109. //*****************************************************************************
  110.  
  111. //----------------------------------------------------------------------------
  112. // Code to determine the browser and version.
  113. //----------------------------------------------------------------------------
  114.  
  115. function Browser() {
  116.  
  117.   var ua, s, i;
  118.  
  119.   this.isIE    = false;  // Internet Explorer
  120.   this.isOP    = false;  // Opera
  121.   this.isNS    = false;  // Netscape
  122.   this.version = null;
  123.  
  124.   ua = navigator.userAgent;
  125.  
  126.   s = "Opera";
  127.   if ((i = ua.indexOf(s)) >= 0) {
  128.     this.isOP = true;
  129.     this.version = parseFloat(ua.substr(i + s.length));
  130.     return;
  131.   }
  132.  
  133.   s = "Netscape6/";
  134.   if ((i = ua.indexOf(s)) >= 0) {
  135.     this.isNS = true;
  136.     this.version = parseFloat(ua.substr(i + s.length));
  137.     return;
  138.   }
  139.  
  140.   // Treat any other "Gecko" browser as Netscape 6.1.
  141.  
  142.   s = "Gecko";
  143.   if ((i = ua.indexOf(s)) >= 0) {
  144.     this.isNS = true;
  145.     this.version = 6.1;
  146.     return;
  147.   }
  148.  
  149.   s = "MSIE";
  150.   if ((i = ua.indexOf(s))) {
  151.     this.isIE = true;
  152.     this.version = parseFloat(ua.substr(i + s.length));
  153.     return;
  154.   }
  155. }
  156.  
  157. var browser = new Browser();
  158.  
  159. //----------------------------------------------------------------------------
  160. // Code for handling the menu bar and active button.
  161. //----------------------------------------------------------------------------
  162.  
  163. var activeButton = null;
  164.  
  165. // Capture mouse clicks on the page so any active button can be
  166. // deactivated.
  167.  
  168. if (browser.isIE)
  169.   document.onmousedown = pageMousedown;
  170. else
  171.   document.addEventListener("mousedown", pageMousedown, true);
  172.  
  173. function pageMousedown(event) {
  174.  
  175.   var el;
  176.  
  177.   // If there is no active button, exit.
  178.  
  179.   if (activeButton == null)
  180.     return;
  181.  
  182.   // Find the element that was clicked on.
  183.  
  184.   if (browser.isIE)
  185.     el = window.event.srcElement;
  186.   else
  187.     el = (event.target.tagName ? event.target : event.target.parentNode);
  188.  
  189.   // If the active button was clicked on, exit.
  190.  
  191.   if (el == activeButton)
  192.     return;
  193.  
  194.   // If the element is not part of a menu, reset and clear the active
  195.   // button.
  196.  
  197.   if (getContainerWith(el, "DIV", "menu") == null) {
  198.     resetButton(activeButton);
  199.     activeButton = null;
  200.   }
  201. }
  202.  
  203. function buttonClick(event, menuId) {
  204.  
  205.   var button;
  206.  
  207.   // Get the target button element.
  208.  
  209.   if (browser.isIE)
  210.     button = window.event.srcElement;
  211.   else
  212.     button = event.currentTarget;
  213.  
  214.   // Blur focus from the link to remove that annoying outline.
  215.  
  216.   button.blur();
  217.  
  218.   // Associate the named menu to this button if not already done.
  219.   // Additionally, initialize menu display.
  220.  
  221.   if (button.menu == null) {
  222.     button.menu = document.getElementById(menuId);
  223.     if (button.menu.isInitialized == null)
  224.       menuInit(button.menu);
  225.   }
  226.  
  227.   // Reset the currently active button, if any.
  228.  
  229.   if (activeButton != null)
  230.     resetButton(activeButton);
  231.  
  232.   // Activate this button, unless it was the currently active one.
  233.  
  234.   if (button != activeButton) {
  235.     depressButton(button);
  236.     activeButton = button;
  237.   }
  238.   else
  239.     activeButton = null;
  240.  
  241.   return false;
  242. }
  243.  
  244. function buttonMouseover(event, menuId) {
  245.  
  246.   var button;
  247.  
  248.   // Find the target button element.
  249.  
  250.   if (browser.isIE)
  251.     button = window.event.srcElement;
  252.   else
  253.     button = event.currentTarget;
  254.  
  255.   // If any other button menu is active, make this one active instead.
  256.  
  257.   if (activeButton != null && activeButton != button)
  258.     buttonClick(event, menuId);
  259. }
  260.  
  261. function depressButton(button) {
  262.  
  263.   var x, y;
  264.  
  265.   // Update the button's style class to make it look like it's
  266.   // depressed.
  267.  
  268.   button.className += " menuButtonActive";
  269.  
  270.   // Position the associated drop down menu under the button and
  271.   // show it.
  272.  
  273.   x = getPageOffsetLeft(button);
  274.   y = getPageOffsetTop(button) + button.offsetHeight;
  275.  
  276.   // For IE, adjust position.
  277.  
  278.   if (browser.isIE) {
  279.     x += button.offsetParent.clientLeft;
  280.     y += button.offsetParent.clientTop;
  281.   }
  282.  
  283.   button.menu.style.left = x + "px";
  284.   button.menu.style.top  = y + "px";
  285.   button.menu.style.visibility = "visible";
  286. }
  287.  
  288. function resetButton(button) {
  289.  
  290.   // Restore the button's style class.
  291.  
  292.   removeClassName(button, "menuButtonActive");
  293.  
  294.   // Hide the button's menu, first closing any sub menus.
  295.  
  296.   if (button.menu != null) {
  297.     closeSubMenu(button.menu);
  298.     button.menu.style.visibility = "hidden";
  299.   }
  300. }
  301.  
  302. //----------------------------------------------------------------------------
  303. // Code to handle the menus and sub menus.
  304. //----------------------------------------------------------------------------
  305.  
  306. function menuMouseover(event) {
  307.  
  308.   var menu;
  309.  
  310.   // Find the target menu element.
  311.  
  312.   if (browser.isIE)
  313.     menu = getContainerWith(window.event.srcElement, "DIV", "menu");
  314.   else
  315.     menu = event.currentTarget;
  316.  
  317.   // Close any active sub menu.
  318.  
  319.   if (menu.activeItem != null)
  320.     closeSubMenu(menu);
  321. }
  322.  
  323. function menuItemMouseover(event, menuId) {
  324.  
  325.   var item, menu, x, y;
  326.  
  327.   // Find the target item element and its parent menu element.
  328.  
  329.   if (browser.isIE)
  330.     item = getContainerWith(window.event.srcElement, "A", "menuItem");
  331.   else
  332.     item = event.currentTarget;
  333.   menu = getContainerWith(item, "DIV", "menu");
  334.  
  335.   // Close any active sub menu and mark this one as active.
  336.  
  337.   if (menu.activeItem != null)
  338.     closeSubMenu(menu);
  339.   menu.activeItem = item;
  340.  
  341.   // Highlight the item element.
  342.  
  343.   item.className += " menuItemHighlight";
  344.  
  345.   // Initialize the sub menu, if not already done.
  346.  
  347.   if (item.subMenu == null) {
  348.     item.subMenu = document.getElementById(menuId);
  349.     if (item.subMenu.isInitialized == null)
  350.       menuInit(item.subMenu);
  351.   }
  352.  
  353.   // Get position for submenu based on the menu item.
  354.  
  355.   x = getPageOffsetLeft(item) + item.offsetWidth;
  356.   y = getPageOffsetTop(item);
  357.  
  358.   // Adjust position to fit in view.
  359.  
  360.   var maxX, maxY;
  361.  
  362.   if (browser.isIE) {
  363.     maxX = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) +
  364.       (document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth : document.body.clientWidth);
  365.     maxY = Math.max(document.documentElement.scrollTop, document.body.scrollTop) +
  366.       (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight);
  367.   }
  368.   if (browser.isOP) {
  369.     maxX = document.documentElement.scrollLeft + window.innerWidth;
  370.     maxY = document.documentElement.scrollTop  + window.innerHeight;
  371.   }
  372.   if (browser.isNS) {
  373.     maxX = window.scrollX + window.innerWidth;
  374.     maxY = window.scrollY + window.innerHeight;
  375.   }
  376.   maxX -= item.subMenu.offsetWidth;
  377.   maxY -= item.subMenu.offsetHeight;
  378.  
  379.   if (x > maxX)
  380.     x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
  381.       + (menu.offsetWidth - item.offsetWidth));
  382.   y = Math.max(0, Math.min(y, maxY));
  383.  
  384.   // Position and show it.
  385.  
  386.   item.subMenu.style.left = x + "px";
  387.   item.subMenu.style.top  = y + "px";
  388.   item.subMenu.style.visibility = "visible";
  389.  
  390.   // Stop the event from bubbling.
  391.  
  392.   if (browser.isIE)
  393.     window.event.cancelBubble = true;
  394.   else
  395.     event.stopPropagation();
  396. }
  397.  
  398. function closeSubMenu(menu) {
  399.  
  400.   if (menu == null || menu.activeItem == null)
  401.     return;
  402.  
  403.   // Recursively close any sub menus.
  404.  
  405.   if (menu.activeItem.subMenu != null) {
  406.     closeSubMenu(menu.activeItem.subMenu);
  407.     menu.activeItem.subMenu.style.visibility = "hidden";
  408.     menu.activeItem.subMenu = null;
  409.   }
  410.   removeClassName(menu.activeItem, "menuItemHighlight");
  411.   menu.activeItem = null;
  412. }
  413.  
  414. //----------------------------------------------------------------------------
  415. // Code to initialize menus.
  416. //----------------------------------------------------------------------------
  417.  
  418. function menuInit(menu) {
  419.  
  420.   var itemList, spanList;
  421.   var textEl, arrowEl;
  422.   var itemWidth;
  423.   var w, dw;
  424.   var i, j;
  425.  
  426.   // For IE, replace arrow characters.
  427.  
  428.   if (browser.isIE) {
  429.     menu.style.lineHeight = "2.5ex";
  430.     spanList = menu.getElementsByTagName("SPAN");
  431.     for (i = 0; i < spanList.length; i++)
  432.       if (hasClassName(spanList[i], "menuItemArrow")) {
  433.         spanList[i].style.fontFamily = "Webdings";
  434.         spanList[i].firstChild.nodeValue = "4";
  435.       }
  436.   }
  437.  
  438.   // Find the width of a menu item.
  439.  
  440.   itemList = menu.getElementsByTagName("A");
  441.   if (itemList.length > 0)
  442.     itemWidth = itemList[0].offsetWidth;
  443.   else
  444.     return;
  445.  
  446.   // For items with arrows, add padding to item text to make the
  447.   // arrows flush right.
  448.  
  449.   for (i = 0; i < itemList.length; i++) {
  450.     spanList = itemList[i].getElementsByTagName("SPAN");
  451.     textEl  = null;
  452.     arrowEl = null;
  453.     for (j = 0; j < spanList.length; j++) {
  454.       if (hasClassName(spanList[j], "menuItemText"))
  455.         textEl = spanList[j];
  456.       if (hasClassName(spanList[j], "menuItemArrow")) {
  457.         arrowEl = spanList[j];
  458.       }
  459.     }
  460.     if (textEl != null && arrowEl != null) {
  461.       textEl.style.paddingRight = (itemWidth 
  462.         - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
  463.       // For Opera, remove the negative right margin to fix a display bug.
  464.       if (browser.isOP)
  465.         arrowEl.style.marginRight = "0px";
  466.     }
  467.   }
  468.  
  469.   // Fix IE hover problem by setting an explicit width on first item of
  470.   // the menu.
  471.  
  472.   if (browser.isIE) {
  473.     w = itemList[0].offsetWidth;
  474.     itemList[0].style.width = w + "px";
  475.     dw = itemList[0].offsetWidth - w;
  476.     w -= dw;
  477.     itemList[0].style.width = w + "px";
  478.   }
  479.  
  480.   // Mark menu as initialized.
  481.  
  482.   menu.isInitialized = true;
  483. }
  484.  
  485. //----------------------------------------------------------------------------
  486. // General utility functions.
  487. //----------------------------------------------------------------------------
  488.  
  489. function getContainerWith(node, tagName, className) {
  490.  
  491.   // Starting with the given node, find the nearest containing element
  492.   // with the specified tag name and style class.
  493.  
  494.   while (node != null) {
  495.     if (node.tagName != null && node.tagName == tagName &&
  496.         hasClassName(node, className))
  497.       return node;
  498.     node = node.parentNode;
  499.   }
  500.  
  501.   return node;
  502. }
  503.  
  504. function hasClassName(el, name) {
  505.  
  506.   var i, list;
  507.  
  508.   // Return true if the given element currently has the given class
  509.   // name.
  510.  
  511.   list = el.className.split(" ");
  512.   for (i = 0; i < list.length; i++)
  513.     if (list[i] == name)
  514.       return true;
  515.  
  516.   return false;
  517. }
  518.  
  519. function removeClassName(el, name) {
  520.  
  521.   var i, curList, newList;
  522.  
  523.   if (el.className == null)
  524.     return;
  525.  
  526.   // Remove the given class name from the element's className property.
  527.  
  528.   newList = new Array();
  529.   curList = el.className.split(" ");
  530.   for (i = 0; i < curList.length; i++)
  531.     if (curList[i] != name)
  532.       newList.push(curList[i]);
  533.   el.className = newList.join(" ");
  534. }
  535.  
  536. function getPageOffsetLeft(el) {
  537.  
  538.   var x;
  539.  
  540.   // Return the x coordinate of an element relative to the page.
  541.  
  542.   x = el.offsetLeft;
  543.   if (el.offsetParent != null)
  544.     x += getPageOffsetLeft(el.offsetParent);
  545.  
  546.   return x;
  547. }
  548.  
  549. function getPageOffsetTop(el) {
  550.  
  551.   var y;
  552.  
  553.   // Return the x coordinate of an element relative to the page.
  554.  
  555.   y = el.offsetTop;
  556.   if (el.offsetParent != null)
  557.     y += getPageOffsetTop(el.offsetParent);
  558.  
  559.   return y;
  560. }
  561.  
  562. //]]></script>
  563. </head>
  564. <body>
  565.  
  566. <!-- Menu bar. -->
  567.  
  568. <div class="menuBar" style="width:80%;"
  569. ><a class="menuButton"
  570.     href=""
  571.     onclick="return buttonClick(event, 'fileMenu');"
  572.     onmouseover="buttonMouseover(event, 'fileMenu');"
  573. >File</a
  574. ><a class="menuButton"
  575.     href=""
  576.     onclick="return buttonClick(event, 'editMenu');"
  577.     onmouseover="buttonMouseover(event, 'editMenu');"
  578. >Edit</a
  579. ><a class="menuButton"
  580.     href=""
  581.     onclick="return buttonClick(event, 'viewMenu');"
  582.     onmouseover="buttonMouseover(event, 'viewMenu');"
  583. >View</a
  584. ><a class="menuButton"
  585.     href=""
  586.     onclick="return buttonClick(event, 'toolsMenu');"
  587.     onmouseover="buttonMouseover(event, 'toolsMenu');"
  588. >Tools</a
  589. ><a class="menuButton"
  590.     href=""
  591.     onclick="return buttonClick(event, 'optionsMenu');"
  592.     onmouseover="buttonMouseover(event, 'optionsMenu');"
  593. >Options</a
  594. ><a class="menuButton"
  595.     href=""
  596.     onclick="return buttonClick(event, 'helpMenu');"
  597.     onmouseover="buttonMouseover(event, 'helpMenu');"
  598. >Help</a
  599. ></div>
  600.  
  601. <!-- Main menus. -->
  602.  
  603. <div id="fileMenu" class="menu"
  604.      onmouseover="menuMouseover(event)">
  605. <a class="menuItem" href="blank.html">File Menu Item 1</a>
  606. <a class="menuItem" href=""
  607.    onclick="return false;"
  608.    onmouseover="menuItemMouseover(event, 'fileMenu2');"
  609. ><span class="menuItemText">File Menu Item 2</span><span class="menuItemArrow">&#9654;</span></a>
  610. <a class="menuItem" href="blank.html">File Menu Item 3</a>
  611. <a class="menuItem" href="blank.html">File Menu Item 4</a>
  612. <a class="menuItem" href="blank.html">File Menu Item 5</a>
  613. <div class="menuItemSep"></div>
  614. <a class="menuItem" href="blank.html">File Menu Item 6</a>
  615. </div>
  616.  
  617. <div id="editMenu" class="menu"
  618.      onmouseover="menuMouseover(event)">
  619. <a class="menuItem" href="blank.html">Edit Menu Item 1</a>
  620. <div class="menuItemSep"></div>
  621. <a class="menuItem" href="blank.html">Edit Menu Item 2</a>
  622. <a class="menuItem" href=""
  623.    onclick="return false;"
  624.    onmouseover="menuItemMouseover(event, 'editMenu3');"
  625. ><span class="menuItemText">Edit Menu Item 3</span><span class="menuItemArrow">&#9654;</span></a>
  626. <a class="menuItem" href="blank.html">Edit Menu Item 4</a>
  627. <div class="menuItemSep"></div>
  628. <a class="menuItem" href="blank.html">Edit Menu Item 5</a>
  629. </div>
  630.  
  631. <div id="viewMenu" class="menu">
  632. <a class="menuItem" href="blank.html">View Menu Item 1</a>
  633. <a class="menuItem" href="blank.html">View Menu Item 2</a>
  634. <a class="menuItem" href="blank.html">View Menu Item 3</a>
  635. </div>
  636.  
  637. <div id="toolsMenu" class="menu"
  638.      onmouseover="menuMouseover(event)">
  639. <a class="menuItem" href=""
  640.    onclick="return false;"
  641.    onmouseover="menuItemMouseover(event, 'toolsMenu1');"
  642. ><span class="menuItemText">Tools Menu Item 1</span><span class="menuItemArrow">&#9654;</span></a>
  643. <a class="menuItem" href="blank.html">Tools Menu Item 2</a>
  644. <a class="menuItem" href="blank.html">Tools Menu Item 3</a>
  645. <div class="menuItemSep"></div>
  646. <a class="menuItem" href=""
  647.    onclick="return false;"
  648.    onmouseover="menuItemMouseover(event, 'toolsMenu4');"
  649. ><span class="menuItemText">Tools Menu Item 4</span><span class="menuItemArrow">&#9654;</span></a>
  650. <a class="menuItem" href="blank.html">Tools Menu Item 5</a>
  651. </div>
  652.  
  653. <div id="optionsMenu" class="menu">
  654. <a class="menuItem" href="blank.html">Options Menu Item 1</a>
  655. <a class="menuItem" href="blank.html">Options Menu Item 2</a>
  656. <a class="menuItem" href="blank.html">Options Menu Item 3</a>
  657. </div>
  658.  
  659. <div id="helpMenu" class="menu">
  660. <a class="menuItem" href="blank.html">Help Menu Item 1</a>
  661. <a class="menuItem" href="blank.html">Help Menu Item 2</a>
  662. <div class="menuItemSep"></div>
  663. <a class="menuItem" href="blank.html">Help Menu Item 3</a>
  664. </div>
  665.  
  666. <!-- File sub menus. -->
  667.  
  668. <div id="fileMenu2" class="menu">
  669. <a class="menuItem" href="blank.html">File Menu 2 Item 1</a>
  670. <a class="menuItem" href="blank.html">File Menu 2 Item 2</a>
  671. </div>
  672.  
  673. <!-- Edit sub menus. -->
  674.  
  675. <div id="editMenu3" class="menu"
  676.      onmouseover="menuMouseover(event)">
  677. <a class="menuItem" href="blank.html">Edit Menu 3 Item 1</a>
  678. <a class="menuItem" href="blank.html">Edit Menu 3 Item 2</a>
  679. <div class="menuItemSep"></div>
  680. <a class="menuItem" href=""
  681.    onclick="return false;"
  682.    onmouseover="menuItemMouseover(event, 'editMenu3_3');"
  683. ><span class="menuItemText">Edit Menu 3 Item 3</span><span class="menuItemArrow">&#9654;</span></a>
  684. <a class="menuItem" href="blank.html">Edit Menu 3 Item 4</a>
  685. </div>
  686.  
  687. <div id="editMenu3_3" class="menu">
  688. <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 1</a>
  689. <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 2</a>
  690. <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 3</a>
  691. <div class="menuItemSep"></div>
  692. <a class="menuItem" href="blank.html">Edit Menu 3-3 Item 4</a>
  693. </div>
  694.  
  695. <!-- Tools sub menus. -->
  696.  
  697. <div id="toolsMenu1" class="menu">
  698. <a class="menuItem" href="blank.html">Tools Menu 1 Item 1</a>
  699. <a class="menuItem" href="blank.html">Tools Menu 1 Item 2</a>
  700. <div class="menuItemSep"></div>
  701. <a class="menuItem" href="blank.html">Tools Menu 1 Item 3</a>
  702. <a class="menuItem" href="blank.html">Tools Menu 1 Item 4</a>
  703. <div class="menuItemSep"></div>
  704. <a class="menuItem" href="blank.html">Tools Menu 1 Item 5</a>
  705. </div>
  706.  
  707. <div id="toolsMenu4" class="menu"
  708.      onmouseover="menuMouseover(event)">
  709. <a class="menuItem" href="blank.html">Tools Menu 4 Item 1</a>
  710. <a class="menuItem" href="blank.html">Tools Menu 4 Item 2</a>
  711. <a class="menuItem" href="blank.html"
  712.    onclick="return false;"
  713.    onmouseover="menuItemMouseover(event, 'toolsMenu4_3');"
  714. ><span class="menuItemText">Tools Menu 4 Item 3</span><span class="menuItemArrow">&#9654;</span></a>
  715. </div>
  716.  
  717. <div id="toolsMenu4_3" class="menu">
  718. <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 1</a>
  719. <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 2</a>
  720. <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 3</a>
  721. <a class="menuItem" href="blank.html">Tools Menu 4-3 Item 4</a>
  722. </div>
  723.  
  724. </body>
  725. </html>


Als je dit opslaat als html bestand zie je dat het een menu is dat de lijst naar beneden uitschuift. Maar kunnen we ook er voor zorgen dat de lijst naar boven uitschuift? Als ik dat weet ben ik tevreden.
Offline Wijnand - 31/08/2004 21:05
Avatar van Wijnand Moderator voortaan geen grote scripts meer plaatsen svp...
Offline Wijnand - 31/08/2004 21:07
Avatar van Wijnand Moderator 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);

hier zit de fout. Tenminste dat denk ik, dus even zoeken met www.google.com op bv _mousedown mouseup_ (zonder _) en dan denk ik dat je het antwoord wel tegenkomt.
Offline DeafBoy - 01/09/2004 10:01 (laatste wijziging 01/09/2004 10:05)
Avatar van DeafBoy HTML beginner Spijt me dit moeten te zeggen, maar volgens mij ligt het daar niet aan Wijnand.. Heb wel gezocht maar nee niet echt de goede.

Kan de menu nu wel zelf wijzigen maar naar boven schuiven lukt me nog niet. 
Offline DeafBoy - 08/09/2004 11:56 (laatste wijziging 08/09/2004 14:47)
Avatar van DeafBoy HTML beginner ff vraagje, het is gelukt om die menu naar boven uit teschuiven, maar ik krijg een foutmelding 2 zelfs van Ongeldig Argument., volgens mij op regel 275 en 286.

Wou de script hier neerzetten, maar op dringen van Wijnand zet ik ff hier de url neer. Alleen die foutmeldingen moeten worden opgelost. Wie iemand dit even voor me nakijken a.u.b.??

http://www.vandetimburgt.nl/test/blaat1.htm/
Offline spikepinneke - 08/09/2004 14:07
Avatar van spikepinneke HTML interesse bij mij schuift er nix uit aan dat menu, ik krijg altijd de melding dat ik geen toegangkrijg tot die pagina.:s
Offline XenoX - 08/09/2004 14:11
Avatar van XenoX Gouden medailleGouden medaille

PHP expert		 http://www.site...amp;id=200

Zet de divs opd e goede plaats en je hebt het menu 
Offline DeafBoy - 08/09/2004 14:23 (laatste wijziging 08/09/2004 14:48)
Avatar van DeafBoy HTML beginner Eh Xenox, snap niet precies wat je bedoelt, de divs staan wel op de goede plaats volgens mij. En Spikespinneke, er moet nu wel iets worden uitgeschoven want daarna kun je pas kiezen welk pagina je wilt.
Dus gaat voor mij om het uitschuiven. de link is test.html. Dat is een lege pagina met witte achtergrond. Maar kan iemand het fikken voor me of zeggen wat er ipv van dat dit moet komen etc..
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.257s