sliding/expanding menu

[smaxer3d]

Hoi allemaal.

Ik ben (nog) geen JavaScript-wiz, maar ben er wel hard mee bezig.
Intussen pas ik alleen gratis scripts toe op webpagina's.

Ik heb de volgende 2 scripts van http://javascript.internet.com:


Script Name: Slide Down Menu

Website URL:
http://javascriptsource.com/navigation/slide-down-menu.html

Description: The slide down menu is composed of a number of menu
headers. Upon clicking these headers, its menu items are revealed with a
sliding DHTML effect. This script also works in a frameset.

Follow the instructions below to use this script on your Web site.

<!-- Paste this code into the CSS section of your HTML document  -->

.menu {
 position:relative;
 background-color:gold;
 border:1px solid darkblue;
 width:150;
 font-size:11px;
 font-family:verdana;
 font:bold;
 position:absolute;
 cursor:se-resize;
}

.item_panel {
  width:150;
  border-left:1px solid darkblue;
  border-right:1px solid darkblue;
  clip:rect(0,150,0,0);
  position:absolute;
}

.item_panel a {
 text-decoration:none;
 color:black;
 cursor:hand;
}

.item {
 background-color:lightyellow;
 width:148;
 font-size:10px;
 font-family:verdana;
}



<!-- Paste this code into an external JavaScript file named:
 sliding_menu.js.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: ScriptBreaker :: http://www.scriptbreaker.com/ */

var height = 20; // height of the menu headers
var iheight = 15; // height of the menu_items

var bgc = "lightyellow" // background color of the item
var tc = "black" // text color of the item

var over_bgc = "silver";
var over_tc = "red";

var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 152
var self_menu = new Array();

function write_menu() {
  smc = 0; // count the position of the self_menu
  document.write("<div style='position:absolute'>");
  mn = 0;
  mni = 1;
  start = -1;

  for(i=0;i<Link.length;i++) {
   la = Link[i].split("|");
   if (la[0] == "0") {
    if(start == 0) {
      document.write("</div>");
      h =  csmc * iheight;
      tmn = mn; //-h
      self_menu[smc] = new Array(tmn,h,0,-2);
      smc++;
      mn--;
     }
     csmc = 0;
    document.write("<div class='menu'
 style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'>&nbsp;"+
 la[1] + "</div>");
    self_menu[smc] = new Array(mn,height,0,mni);
    smc++;
    mni++;
    mn+=height;
    start = 1;
   } else {
    if(start == 1) {
      if(N)mn+=2;
       document.write("<div class='item_panel' id='down"+smc+"'
 style='top:"+mn+"'>");
       start = 0;
     }

    document.write("<a href='"+la[2]+"'");
    if (la[3] != "") document.write(" target='" + la[3] + "' ");
    document.write("><div class='item' id='d"+i+"'
 style='height:"+iheight);
    if (N) document.write(";width:150");
    document.write("' onmouseover='color(this.id)'
 onmouseout='uncolor(this.id)'>&nbsp;&nbsp;"+ la[1] + "</div></a>");
    csmc++;
   }
  }
  if (start == 0) {
     document.write("</div>");
     h =  csmc * iheight;
     tmn = mn + 5; //-h
     self_menu[smc] = new Array(tmn,h,0);
     name = "down" + (self_menu.length-1);
     obj = document.getElementById(name);
     obj.style.borderBottomColor = "darkblue";
     obj.style.borderBottomWidth = 1;
     obj.style.borderBottomStyle = "solid";
   }
  document.write("</div>");
}

function color(obj) {
 document.getElementById(obj).style.backgroundColor = over_bgc;
 document.getElementById(obj).style.color = over_tc
}

function uncolor(obj) {
 document.getElementById(obj).style.backgroundColor = bgc;
 document.getElementById(obj).style.color = tc
}

function pull_down(nr,c) {
 if (timerID == "") {
 to = self_menu[nr+1][1]
 begin = nr + 2;
 if (timerID != "") clearTimeout(timerID);
 if (self_menu[nr+1][2] == 0) {
  self_menu[nr+1][2] = 1;
  if(nr == self_menu.length-2) {to++;}
  epull_down(begin,to,0);
 } else {
  to = 0;
  self_menu[nr+1][2] = 0;
  name = "down"+(nr+2);
  open_item = 0;
  for(i=0;i<nr;i++) {
   if(self_menu[i][2] == 1)
    {open_item += self_menu[i][1];
    }
  }
  if (N == false) {open_item-= (c*1)};
  if (nr== self_menu.length-2) {val =
 self_menu[self_menu.length-1][1];to=-1;}
  else  val = parseInt(document.getElementById(name).style.top)
 -(open_item)-(c*height);
  epull_up(begin,to,val);
  }
  }
}

function epull_down(nr,to,nowv) {
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip =
 "rect(0,"+width+","+(nowv+1)+",0)";
 for (i=nr;i<self_menu.length;i++) {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)+1;
 }
 nowv++;
 if(nowv < to) timerID =
 setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function epull_up(nr,to,nowv) {
 name = "down" + (nr-1);
 obj = document.getElementById(name).style.clip =
 "rect(0,"+width+","+nowv+",0)";
 for (i=nr;i<self_menu.length;i++) {
  name = "down" + i;
  obj = document.getElementById(name);
  obj.style.top = parseInt(obj.style.top)-1;
 }
 nowv--;
 if(nowv > to) timerID =
 setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
 else timerID = "";
}

function startup(nr) {
 write_menu();
 if (nr != 0) {
 for(i=0;i<self_menu.length;i++)
 {
  if(self_menu[i][3] == nr) pull_down(i,nr)
  i==self_menu.length;
 }
 }
}



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="sliding_menu.js.js"></script>



<!-- Paste this code into the BODY section of your HTML document  -->

<table width=150><tr><td>
  <script language="JavaScript">
      //Link[nr] = "position [0 is menu/1 is item],Link name,url,target
 (blank|top|frame_name)"
  var Link = new Array();
  Link[0] = "0|Home";
  Link[1] = "1|Home|http://www.javascriptsource.com|";
  Link[2] = "1|More Scripts|http://www.javascript.com|";
  Link[3] =
 "1|Contact|http://www.javascriptsource.com/contact-us.html|";
  Link[4] = "1|Traffic|http://www.thecounter.com|";
  Link[5] = "0|Access";
  Link[6] = "1|Login|Login.asp|";
  Link[7] = "1|Logout|Logout.asp|"
  Link[8] = "0|Scripts";
  Link[9] = "1|Asp|http://www.javascriptsource.com|";
  Link[10] = "1|JavaScript|http://www.javascriptsource.com|";
  Link[11] = "0|Links";
  Link[12] = "1|JavaScript sites|http://www.javascripts.com|blank";

  startup(4);
  </script>
</td></tr></table>

En het tweede script:

<!-- Paste this code into the CSS section of your HTML document  -->

ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li, 
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "- ";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}



<!-- Paste this code into an external JavaScript file named: expandingMenu.js  -->

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com
version date: 06/02/03 :: If want to use this code, feel free to do so,
but please leave this message intact. (Travis Beckham) */

// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;



<!-- Paste this code into the HEAD section of your HTML document.
     You may need to change the path of the file.  -->

<script type="text/javascript" src="expandingMenu.js"></script>



<!-- Paste this code into the BODY section of your HTML document  -->

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>

Het tweede script gebruik ik nu voor een webpagina omdat het menu niet alles open laat staan, maar steeds dichtschuift bij de volgende selectie.
Dat houd het menu steeds overzichtelijk.
Nadeel is dat bij het laden van de nieuwe pagina, het menu ook opnieuw wordt geladen en dus weer van voor af aan begint.
En het is juist zo handig dat deze op de aktieve link open blijft staan.

Het eerste script heeft daarom dus ook de functie om bij het activeren van het menu,
meteen een optie/menu-onderdeel te openen, zodat het lijkt alsof het menu open is blijven staan.

Mijn gebrekkige JavaScript-kennis kan deze functies niet combineren...
Wil iemand mij hier bij helpen?