Menu and submenu : Menu « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Menu 
Menu and submenu

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>xmenu-xlayer</title>
    
    <meta name="KEYWORDS" content="">
    <meta name="DESCRIPTION" content="">

<style type="text/css">
  <!--
  body
  {
    background-color: #ffffff;
    color: #000000;
    font-size: 12px;
    font-family: Arial, Helvetica;
  }

  p
  {
    color: #a1a1a1;
    font-weight: bold;
  }

  a
  {
    font-family: Arial, Helvetica;
    text-decoration: none
  }
  a:active
  {
    color: #a1a1a1
  }
  a:link
  {
    color: #a1a1a1
  }
  a:visited
  {
    color: #a1a1a1
  }
  a:hover
  {
    color: #cccccc;
    text-decoration: none;
  }

  .orange
  {
    background-color: #ff7f00;
  }
  .dark_orange
  {
    background-color: #ff5500;
  }
  a.navigation_links
  {
    font-family: Arial, Helvetica, sans serif; 
    font-size:10px; 
    color: #fadada;
    font-weight: 600;
  }
  a:hover.navigation_links
  {
    font-family: Arial, Helvetica, sans serif; 
    font-size:10px; 
    color:white;
    font-weight: 600;
  }
  .content
  {
    font-family: Arial, Helvetica, sans serif;
    background-color: #ffffff;
    color: #000000;
    font-size: 12px;
  }
  -->


    
    
    </style>
<!-- Browser.js -->
    <script language="javascript">
// created by: Andre Dietisheim (dietisheim@sphere.ch)
// created: 2001-31-12
// modified by: Andre Dietisheim (dietisheim@sphere.ch)
// modified: 2004-01-28
// version: 0.8.0

function Browserbrowsers 
{
  this.browsers = browsers;  // browser detection array
  this.createBooleans();
}

Browser.prototype.createBooleans = function() 
{
  var name = navigator.appName;
  var cname = navigator.appCodeName;
  var usragt = navigator.userAgent;
  var ver = navigator.appVersion;
  for i = 0; i < this.browsers.length; i++ 
  {
    var browserArray = this.browsers]// browsers-array

    var sCheck = browserArray]// 'logical expr' that detects the browser
    var sCurrentVersion = browserArray]// 'regexp' that gets current version
    var sBrand = browserArray]// browser-obj 'property' (is.xx)
    var availableVersions = browserArray]// 'versions' to check for

    if evalsCheck ) )
    // browser recognized
      eval"this." + sBrand + " = true" )// browser-obj property (is.xx)
      var regexp, ver, sMinorVersion, sMajorVersion;
      regexp = new RegExpsCurrentVersion );
      regexp.execusragt )// parse navigator.userAgent
      var sMajorVersion = RegExp.$1;
      var sMinorVersion = RegExp.$2;

      for j = 0; j < availableVersions.length; j++ )
      {
        if parseFloat(availableVersions]) <= evalsMajorVersion + "." + sMinorVersion ) )
        // upper versions
          eval"this." + sBrand + availableVersions].substr0+ availableVersions].substr2"up = true" );
        }
        if parseFloat(availableVersions]) == evalsMajorVersion + "." + sMinorVersion ) ) 
        /// current version
          eval"this." + sBrand + availableVersions].substr0+ availableVersions].substr2"= true" );
        }
      }
    }
  }
}

is = new Browser 
[
  // Internet Explorer Windows ---
  "iewin",
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Microsoft Internet Explorer' ) >= 0 && usragt.indexOf( 'MSIE' ) >= 0 && usragt.indexOf( 'Opera' ) < 0 && usragt.indexOf( 'Windows' ) >= 0"// IE detection expression
    "MSIE.([0-9]).([0-9])",  // regexpr for version (in navigator.userAgent)
    "5""5.5""6" ] ],  // published versions
  // Internet Explorer Macintosh ---
  "iemac",
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Microsoft Internet Explorer' ) >= 0 && usragt.indexOf( 'MSIE' ) >= 0 && usragt.indexOf('Opera') < 0 && usragt.indexOf('Mac') >= 0",
    "MSIE.([0-9]).([0-9])",
    "5""5.1""5.2" ] ],
  // Gecko (Mozilla, Galeon, Firebird, Netscape >=6.x) ---
  "gk"
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >= 0 && usragt.indexOf( 'Gecko' ) >= 0 && usragt.indexOf( 'Safari' ) < 0",
    "[rv[:| ]*([0-9]).([0-9])|Galeon\/([0-9]).([0-9])]",
    "0.7""0.8""0.9""1.0""1.1""1.2""1.3""1.4""1.5""1.6" ] ],
  // Netscape Navigator ---
  "nn",
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && parseInt( ver ) <= 4",
    "([0-9]).([0-9])",
    "4""4.5""4.7""4.8" ] ],
  // Opera ---
  "op",
    "cname.indexOf( 'Mozilla' ) >= 0 && ( name.indexOf( 'Microsoft Internet Explorer' ) >=0 || name.indexOf( 'Opera' ) >= 0 ) && usragt.indexOf( 'Opera' ) >= 0",
    "Opera.([0-9]).([0-9])",
    "5""5.1""6""7""7.1""7.2" ] ],
  // Safari ---
  "sf",
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && usragt.indexOf('AppleWebKit' ) >= 0 && usragt.indexOf('Safari') >= 0",
    "AppleWebKit\/([0-9])"
    "Konqueror\/([0-9]\.[0-9])",
    "48""85" ] ],
  // Konqueror ---
  "kq",
    "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Konqueror' ) >= 0 && usragt.indexOf( 'Konqueror' ) >= 0",
    "Konqueror\/([0-9]).([0-9]*)",
    "2.2""3""3.1" ] ]
] );

    
    </script>
<!-- XlayerParent.js -->
    <script language="javascript">
// created by: Andre Dietisheim (dietisheim@sphere.ch)
// created:  2001-12-20
// modified by: Andre Dietisheim (dietisheim@sphere.ch)
// modified: 2004-02-06
// version: 1.4.0

function XlayerParentsLayerId, sImg, sDesc, iWidth, iHeight, sContent )
{
  // static var --------
  if!XlayerParent.prototype.instances XlayerParent.prototype.instances = new Array();
  XlayerParent.prototype.instancesXlayerParent.prototype.instances.length this;
  this.sId = this.createsLayerId, sImg, sDesc, iWidth, iHeight )
}

XlayerParent.prototype.create functionsLayerId, sImg, sDesc, iWidth, iHeight )
{
  this.sParentLayerId = sLayerId;
  this.sParentLayerXlayerId = sLayerId + "Xlayer"

  var sLayer = "";
  var content_str = '';

  if sImg )
    sContent = '<img src="' + sImg + '" width="' + iWidth + '" height="' + iHeight + '" border="0" >';
  else if sDesc )
    sContent = sDesc;

  // nn4up ----------
  if is.nn4up )
  {
    var sLayer = '<ilayer id="' + sLayerId + '" top=left=width=' + iWidth + ' height=' + iHeight + ' >' + ( ( sContent )? sContent : "" '</ilayer>';
    document.writesLayer );
    return sLayerId;
  }

  // iewin5up, iemac5up, gk --------
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
  {
    var sLayer = '<div id="' + sLayerId + '" style="position:relative; width: ' + iWidth + 'px; height: ' + iHeight + 'px; ">'  ( ( sContent )? sContent : "" '</div>';
    document.writesLayer );
    return sLayerId;
  }
  else
  {
    return null;
  }
}

XlayerParent.prototype.getLayer = functionsLayerId )
{
  var layer = null;

  if sLayerId )
  {  // id supplied
    if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
      return document.getElementByIdsLayerId );
    else if is.nn4up )
      return document.layerssLayerId ];
  }
  else if !sLayerId )
  {  // null supplied
    if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
      return document.body;
    else if is.nn4up )
      return window;
  }
}


XlayerParent.prototype.getX = functionlayer )
{
  var x = 0;

  if is.nn4up )
  {
    if layer != window )      
      x = layer.pageX;
  }
  else if is.gk || is.iemac5up || is.iewin5up || is.sf || is.kq3up || is.op6up )
  {
    if layer != document.body )
    {
      currentX = 0;
      object = layer;
      while object )
      {
        currentX += object.offsetLeft;
        object = object.offsetParent;
      }
      x = currentX;
    }

    if is.iemac5up )
      x += parseInt"0" + document.body.currentStyle.marginLeft, 10  );

  }
  return x;
}


XlayerParent.prototype.getY = functionlayer )
{
  var y = 0;

  if is.nn4up )
  {
    if layer != window )  y = layer.pageY;
  }
  else if is.gk || is.iewin || is.iemac5up || is.sf || is.kq3up || is.op6up )
  {
    if layer != document.body )
    {
      currentY = 0;
      object = layer;
      while object )
      {
        currentY += object.offsetTop;
        object = object.offsetParent;
      }
      y = currentY;
    }
    if is.iemac5up )
      y += parseInt"0" + document.body.currentStyle.marginTop, 10  );
  }

  return y;
}


XlayerParent.prototype.getW = functionlayer )
{
  var w = 0;

  if is.nn4up )
  {
    if layer == window )
      return window.innerWidth;
    else
      return layer.clip.width;
  }
  else if is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up )
  {
    if layer == document.body )
      return window.innerWidth;
    else
      return layer.offsetWidth;
  }
  else if is.iewin5up )
  {
    if layer == document.body )
      return document.body.clientWidth;
    else
      return layer.offsetWidth;
  }
}


XlayerParent.prototype.getH = functionlayer )
{
  var h = 0;

  if is.nn4up )
  {
    if layer == window )
      return window.innerHeight;
    else
      return layer.clip.height;
  }
  else if is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up )
  {
    if layer == document.body )
      return window.innerHeight;
    else
      return layer.offsetHeight;
  }
  else if is.iewin5up )
  {
    if layer == document.body )
      return document.body.clientHeight;
    else
      return layer.offsetHeight;
  }
}
    
    </script>
<!-- Xlayer.js -->    
    <script language="javascript">
// created by: Andre Dietisheim (dietisheim@sphere.ch)
// created: 2001-12-20
// modified by: Andre Dietisheim (dietisheim@sphere.ch)
// modified: 2004-02-21
// version: 2.5.3

function XlayersParent, xlayerParent, x, y, offsetX, offsetY, w, h,  iClipTop, iClipRight, iClipBottom, iClipLeft, iZindex, bVisibility, sBgcolor, fading, events, sText, bBold, sAlign, iTopTextBorder, iRightTextBorder, iBottomTextBorder, iLeftTextBorder, sFgcolor, sHref, sIcon, iIconWidth, iIconHeight, iconBorder, sFontface, iFontsize, src , sSpacer )
{
  if !Xlayer.prototype.instances )
    Xlayer.prototype.instances = new Array();
  Xlayer.prototype.instancesXlayer.prototype.instances.length this// Store this Instance In static array

  this.index = Xlayer.prototype.instances.length - 1;
  this.sParent = sParent;
  this.parent = null;
  this.xlayerParent = xlayerParent;
  this.lyr = null;
  this.id = this.id || "Xlayer" this.index;
  this.x = x || 0;
  this.y = y || 0;
  this.offsetX = offsetX ||  0;
  this.offsetY = offsetY ||  0;
  this.w = w ||  0;
  this.h = h || 0;
  this.iClipTop = iClipTop || 0;
  this.iClipRight = iClipRight || w;
  this.iClipBottom = iClipBottom || h;
  this.iClipLeft = iClipLeft || 0;
  this.iZindex = iZindex || 0;
  this.bVisibility = bVisibility;
  this.sBgcolor = sBgcolor || "black";
  this.iOpacity = 0;
  this.sSpacer = sSpacer;

  // caption ---
  this.sText = sText || null;
  this.bBold = bBold || false;
  this.sAlign = sAlign || "center";
  this.iTopTextBorder = iTopTextBorder;
  this.iRightTextBorder = iRightTextBorder;
  this.iBottomTextBorder = iBottomTextBorder;
  this.iLeftTextBorder = iLeftTextBorder;
  this.sFgcolor = sFgcolor || "white";
  this.sHref = is.nn4up && !sHref )"#" : sHref; // nn4 always need a href to process clicks
  this.sFontface = sFontface || "Helvetica";
  this.iFontsize = iFontsize || 2;
  this.sIcon = sIcon ||  null;
  this.iIconWidth = iIconWidth || 0;
  this.iIconHeight = iIconHeight || 0;
  this.iconBorder = iconBorder || 0;

  // iframe ----
  this.iframe = null;
  this.scrollbars = null;
  this.src = src ||  null;
  this.events = events || null// array: event, func, event, func, ...
  this.fading =  fading || null// array: start, stop, steps, delay

  if is.op6up && !is.op7up // opera can't create dynamically
    this.writeDiv();
}

Xlayer.prototype.MOUSEOVER = "onmouseover";
Xlayer.prototype.MOUSEOUT = "onmouseout";
Xlayer.prototype.CLICK = "onclick";


Xlayer.prototype.create function() 
{
  this.parent = XlayerParent.prototype.getLayerthis.sParent )// parent = another layer or document.body
  this.parentCoordsOnly = XlayerParent.prototype.getLayerthis.xlayerParent.sId );
  if is.nn4up )
  {
    if this.w == "100%" )
      this.lyr = new Layerthis.parent.innerWidth, this.parent );
    else
      this.lyr = new Layerthis.w, this.parent );
  }
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
  {
    this.lyr = document.createElement"DIV" )// create layer
    this.lyr.style.position = "absolute";
    this.lyr.style.overflow = "hidden";
    this.lyr.id = this.id;
    this.parent.appendChildthis.lyr )// insert into DOM
  }
  else if is.op6up && !is.op7up )
  // already created on instanciation (no dynamic creation possible)
    this.lyr = document.getElementByIdthis.id );
  }
  
  this.setVisibilitythis.bVisibility );
  this.setSizethis.w, this.h );
  this.setEventsthis.events );
  if !is.op6up && !is.op7up ) ) 
    this.setBodythis.getCaptionthis.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) );
  this.setBgColorthis.sBgcolor );
  this.setFgColorthis.sFgcolor );
  this.setPosthis.x, this.y, this.offsetX, this.offsetY );
  this.setZindexthis.iZindex );
  this.fadethis.fading );
}

Xlayer.prototype.writeDiv = function()
{
  document.writeln'<div id="' + this.id + '" style="position:absolute;">' + this.getCaptionthis.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder '</div>' );
}

Xlayer.prototype.kill = function()
{
  if is.nn4up )
  {
    for i = 0; i < document.layers.length ; i++ // scan trough layers-array in NN-DOM
    {
      this.setVisibilityfalse );
      if document.layers].id == this.lyr.id )  
      {
        index = i;
        //document.layers.splice(i, 1)
        //delete document.layers[i]
        document.layersnull;
        break;
      }
    }
  }
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
  {
    var lyr;
    lyr = document.getElementByIdthis.lyr.id );
    document.body.removeChildlyr );
  }
  this.iOpacity = 0;
}

Xlayer.prototype.setFgColor = functioncolor )
{
  if this.sText )
  {
    this.sFgcolor = color;

    if is.nn4up )
      this.setBodythis.getCaptionthis.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) );
    else if is.iewin5up || is.iemac5up || is.gk || is.sf  || is.kq3up || is.op6up )
    {
      if this.sText )
      {
        document.getElementByIdthis.id+"d" ).style.color = color;
        //this.setCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder );
      }
    }
  }

}

Xlayer.prototype.setBgColor = functioncolor )
{
  this.sBgcolor = color;

  if is.nn4up )
    this.lyr.document.bgColor = color;
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
    this.lyr.style.backgroundColor = color;
}

Xlayer.prototype.setSize = functionw, h )
{
  var iOldWidth = this.w; // store old values
  var iOldHeight = this.h;

  this.w = w; // store new values
  this.h = h;

  if is.nn4up )
  {
    if w == "100%" )
      this.lyr.resizeTowindow.innerWidth, h );
    else 
      this.lyr.resizeTow, h );
  }
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
  {
    if w == "100%" )
    {
      this.lyr.style.width = "100%";
      this.lyr.style.height = h + 'px';
    }
    else
    {
      this.lyr.style.width = w + 'px';
      this.lyr.style.height = h + 'px';
    }

    this.setClippingthis.iClipTop, this.iClipRight + w - iOldWidth ),  this.iClipBottom + h - iOldHeight )this.iClipLeft );

    if is.iewin5up && this.iframe // recreate iframe on resize
      this.setIframethis.src );
  }
  else if is.op6up && !is.op7up )
  {
    if w == "100%" )
    {
      this.lyr.style.pixelWidth = "100%";
      this.lyr.style.pixelHeight = h;
    }
    else
    {
      this.lyr.style.pixelWidth = w;
      this.lyr.style.pixelHeight = h;
    }
  }
}

Xlayer.prototype.setPos = functionx, y, offsetX, offsetY )
{
  var parent;
  if this.parentCoordsOnly )
    parent = this.parentCoordsOnly;
  else
    parent = this.parent;
    
  // calc x, y ---
  if x == "centered" )
    x = XlayerParent.prototype.getXparent XlayerParent.getWparent this.w / 2;
  else if x == "left" )
    x = this.xlayerParent.getXparent );
  else if x == "right" )
    x = XlayerParent.prototype.getXparent + XlayerParent.prototype.getWparent this.w;

  if y == "centered" )
    y = XlayerParent.prototype.getYparent XlayerParent.prototype.getHparent this.h / 2;
  else if y == "top" )
    y = XlayerParent.prototype.getYparent );
  else if y == "bottom" )
    y = XlayerParent.prototype.getYparent + XlayerParent.prototype.getHparent this.h;

  if offsetX )
    x += offsetX;
  if offsetY )
    y += offsetY;

  this.x = x;
  this.y = y;

  // set position ---
  if is.nn4up )
  {
    this.lyr.moveTothis.x, this.y );
  }
  else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
  {
    this.lyr.style.top = this.y + "px";
    this.lyr.style.left = this.x + "px";
  }
}

Xlayer.prototype.setVisibility = functionbVisibility 
{
  this.bVisibility = bVisibility;
  if this.lyr 
  {
    if is.nn4up 
    {
      this.lyr.visibility = bVisibility )"show" "hide";
    }
    else if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up 
    {
      this.lyr.style.visibility = bVisibility )"visible" "hidden";
    }
  }
}

Xlayer.prototype.isVisible = function() 
{
  return this.bVisibility;
}

Xlayer.prototype.setFontsize = functioniFontsize )
{
  this.iFontsize = iFontsize;
}

Xlayer.prototype.setFontface = functionsFontface )
{
  this.sFontface = sFontface;
}

Xlayer.prototype.setClipping = functiontop, right, bottom, left )
{
  if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
  {
    this.lyr.style.clip = "rect(" + top + "px " + right + "px " + bottom + "px " + left + "px)";
  }
  else if is.nn4up )
  {
    this.lyr.clip.top = top;
    this.lyr.clip.right = right;
    this.lyr.clip.bottom = bottom;
    this.lyr.clip.left = left;
  }
  this.iClipTop = top;
  this.iClipRight = right;
  this.iClipBottom = bottom;
  this.iClipLeft = left;
}

Xlayer.prototype.setZindex = functioniZindex )
{
  this.iZindex = iZindex;

  if is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up )
  {
    this.lyr.style.zIndex = iZindex;
  }
  else if is.nn4up )
  {
    this.lyr.zIndex = iZindex;
  }
}

Xlayer.prototype.setEvents = functionevents )
{
  ifevents )
  {
    for i = 0; i < events.length; )
    {
      var e = eventsi++ ];
      var func = eventsi++ ];

      if is.gk || is.sf || is.kq3up || is.op7up this.lyr.addEventListenere.substring2, e.length )this.onEvente, func, this.lyr )false );
      else if is.iewin5up || is.iemac5up || is.op6up this.lyre.toLowerCase() ] this.onEvente, func, this.lyr );//new Function( func );
      else if is.nn4up )
      {
        this.lyr.captureEventsEvente.toUpperCase().substring) ] );
        this.lyre.toLowerCase() ] new Functionfunc );
      }
    }
  }
}

Xlayer.prototype.onEvent = functionevent, func, xlayer )
{
  return function)
  {
    var e = arguments];
    if event == Xlayer.prototype.MOUSEOVER || event == Xlayer.prototype.MOUSEOUT )
    {
      if !e var e = window.event; //ie

      if e.target && e.relatedTarget )
      {
        var target = e.target;
        var relatedTarget = e.relatedTarget;
      }
      else if e.fromElement && e.toElement )
      {
        var target = e.toElement;
        var relatedTarget = e.fromElement;
      }
      if Xlayer.prototype.isChildNoderelatedTarget, xlayer && Xlayer.prototype.isChildNodetarget, xlayer ) )
        return false// ignore events of inner html-entities 
    }
    return evalfunc );
  };
}

Xlayer.prototype.isChildNode = functionnode, parentNode )
{
  if node == parentNode )
  {
    return true;
  }
  else if node && node.parentNode )
    return Xlayer.prototype.isChildNodenode.parentNode, parentNode );
  else
    return false;
}

Xlayer.prototype.setBody = functionsHtml )
{
  if is.iewin5up || is.iemac || is.op7up || is.kq3up )
    this.lyr.innerHTML = sHtml;
  else if is.gk || is.sf )
  {
    while this.lyr.hasChildNodes() )
        this.lyr.removeChildthis.lyr.firstChild );
    var range = this.lyr.ownerDocument.createRange();
    range.selectNodeContentsthis.lyr );
    range.deleteContents();
    var contextualFrag = range.createContextualFragmentsHtml );
    this.lyr.appendChildcontextualFrag );
  }
  else ifis.nn4up )
  {
    this.lyr.document.open()
    this.lyr.document.writesHtml );
    this.lyr.document.close();
  }
  else if is.op6up && !is.op7up )
    this.sBody = sHtml;
}

Xlayer.prototype.scroll = functionorientation, step )
{
  this.orientation = orientation;
  this.step = step;

  // scrolling possible (clipping present)
  if ( ( this.iClipRight < this.w || this.iClipTop != || this.iClipLeft > || this.iClipBottom < this.h ) ) 
  // scrolling possible
    if orientation == "horiz" )
    {
      if this.iClipLeft + step > && this.iClipRight  + step < this.w 
      {  // border reached?
        this.setPos(this.x - step, this.y);
        this.setClipping(this.iClipTop, this.iClipRight + step, this.iClipBottom, this.iClipLeft + step);
      }
    }
    else if orientation == "vert" )
    {
      if this.iClipTop + step > && this.iClipBottom + step < this.h 
      {  // border reached?
        this.setPosthis.x, this.y - step );
        this.setClippingthis.iClipTop + step, this.iClipRight, this.iClipBottom + step, this.iClipLeft );
      }
    }
  }
}

Xlayer.prototype.setOpacity = functioniOpac )
{
  if is.iewin5up || is.iemac5up )
    this.lyr.style.filter = "alpha(opacity=" + iOpac + ")";

  else if is.gk )
  {
    this.lyr.style.MozOpacity = iOpac / 100;//opac + "%";
  }
/*  not tested yet
  else if ( is.kq3up )
  {
    this.lyr.style.KhtmlOpacity = iOpac / 100;
  }
*/}

Xlayer.prototype.fade = functionfading )
{
  if fading )
  {
    start =  fading]// opacity start value
    stop =  fading]// stop
    steps =  fading]// number of steps
    delay =  fading]// delay in ms

    this.iOpacity = this.iOpacity + parseInt( ( stop - start / steps );
    this.setOpacitythis.iOpacity );

    if this.iOpacity < stop )
      setTimeout"Xlayer.prototype.instances[" this.index + "].fade( Xlayer.prototype.instances[" this.index + "].fading )", delay);

    this.fading = fading;
    return true;
  }
}

Xlayer.prototype.setIframe = functionsrc, scrollbars )
{
  this.src =  src;

  if scrollbars != null )
  {
    this.scrollbars = scrollbars )"yes"  "no";
  }
  else if this.scrollbars == null )
  {
    this.scrollbars = "yes";      // default for scrollbars: 'yes'
  }

  if is.nn4up )
  {
    this.lyr.src = src;
  }
  else if is.iewin5 )
  // ugly workaround: ie5 basically cannot create dynamically : frame, iframe

    this.lyr.innerHTML = "<iframe width='100%' height='100%' frameborder='0' scrolling='" this.scrollbars + "' id='" this.id + "_iframe" "'></iframe>";
    this.lyr.contentWindow = new Object();
    this.lyr.contentWindow.location = new Object();
    this.iframe = document.getElementById(this.id + "_iframe");    // store iframe
    this.lyr.contentWindow.location.iframe = this.iframe;
    this.lyr.contentWindow.location.iframe.id = "";
    this.lyr.contentWindow.location.iframe.src = src
  }
  else if is.iewin55up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
  {
    var iframe;
    iframe = document.createElement"IFRAME" );      // create iframe
    iframe.src = src;
    iframe.name = this.id + "_iframe";
    iframe.scrolling = this.scrollbars;
    iframe.frameBorder = "0px";
    iframe.style.visibility = "inherit";

    if is.iewin55up )
    {
      iframe.style.width = this.w + "px";
      iframe.style.height = this.h + "px";
    }
    else if is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up )
    {
      iframe.style.width = "inherit";
      iframe.style.height = "inherit";
    }

    while this.lyr.hasChildNodes() )
    {  // remove existing layer child-nodes
      this.lyr.removeChildthis.lyr.lastChild );
    }
    this.lyr.appendChildiframe // insert iframe into layer

    this.iframe = iframe;
  }
}

Xlayer.prototype.getCaption = functionsText, bBold, sIcon, iIconWidth, iIconHeight, iIconBorder )
{
  this.sText = sText;
  this.sIcon = sIcon;
  this.iIconWidth = iIconWidth;
  this.iIconHeight = iIconHeight;

  var tab_head = '<table style="' + ( ( is.iewin5up )? 'cursor: hand;' : 'cursor: pointer;" ' ) 'width="' + this. w + '" height="' + this.h + '" border="0" cellpadding="0" cellspacing="0">';
  var tab_foot = '</table>';

  if sText || sIcon )
  {
    // content ---
    var img = "", desc = ""html ="", tab_body = "", sTextCell = "";
    if sIcon )
      img = '<img src="' + sIcon + '" width="' + iIconWidth + '" height="' + iIconHeight + '">';
    if sText )
    {        
      if is.nn4up )
        sTextCell = '<font id="' + this.id + 'd" color="' + this.sFgcolor + '" size="' + ( parseInt( "0" + ( this.iFontsize / 5 ), 10 ) ) + '" face="' + this.sFontface + '">' + ( ( bBold )'<b>' : '' + sText + ( ( bBold )'</b>' : '' '</font>';
      else if is.iewin5up || is.gk || is.sf || is.kq3up || is.iemac5up || is.op6up )
        sTextCell = '<span id="' + this.id + 'd" style="' + 'color:' + this.sFgcolor + ';' + 'font-size:' + this.iFontsize + 'px;' + 'font-family:' + this.sFontface + ';' + ( ( bBold )? ' font-weight:bold;' : '' ) + 'height:' + this.iFontsize + 'px">' + sText + '</span>';
    }
    if this.sHref && is.nn4up // nn4 always needs a <a href...
      sTextCell = "<a href='" this.sHref + "' style='text-decoration: none;'>" + sTextCell + "</a>";

    // text cell -----
    var iTextCellWidth = this.w - iIconWidth - iIconBorder;
    var iTextCellHeight = this.h - this.iTopTextBorder - this.iBottomTextBorder;
    desc += '<table width="' + iTextCellWidth + '" height="' + this.h + '" cellpadding="0" cellspacing="0" border="0">';
    // top text border
    if this.iTopTextBorder > )
      desc += '<tr style="line-height: ' +  this.iTopTextBorder + 'px"><td colspan="3" height="' + this.iTopTextBorder + '"><img src="' + this.sSpacer + '" width="1" height="' + this.iTopTextBorder + '" border="0"></td></tr>';
    desc += '<tr style="line-height: ' +  this.iFontsize + 'px">';
    // left border
    if this.iLeftTextBorder > )
      desc += '<td><img src="' + this.sSpacer + '" width="' + this.iLeftTextBorder + '" height="1" border="0"></td>';
    // text cell
    desc += '<td valign="middle" align="' + this.sAlign + '">' + sTextCell + '</td>';
    // right border
    if this.iRightTextBorder > )
      desc += '<td><img src="' + this.sSpacer + '" width="' + this.iRightTextBorder + '" height="1" border="0"></td>';
    desc += '</tr>';
    // bottom text border
    if this.iBottomTextBorder > )
      desc += '<tr style="line-height: ' + this.iBottomTextBorder + 'px"><td colspan="3" height="' + this.iBottomTextBorder + '"><img src="' + this.sSpacer + '" width="1" height="' + this.iBottomTextBorder + '" border="0"></td></tr>';
    // right border
    desc += '</table>';
    // text & icons ---
    if sIcon && sText )
    {
      tab_body =
        '<tr>' +
          '<td nowrap ';
      if is.iemac5 )
      {
        tab_body += 'style="position: absolute; top: 0px; height: ' + this.iFontsize + 'px; width: ' + ( this.w - iIconWidth - iIconBorder ) + 'px; vertical-align: middle;" ';
      }
      tab_body +=
            'width="' + ( this.w - iIconWidth  - iIconBorder ) + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' +
            desc +
          '</td>' +
          '<t';
      if is.iemac5 )
      {
        tab_body += 'style="position: absolute; top: ' + ( ( this.h - iIconHeight ) / 2 ) + 'px; left: ' + ( this.w - iIconWidth - iIconBorder ) + 'px; bottom: ' + iIconHeight + 'px; right:' + ( iIconWidth + iIconBorder ) + 'px;height: ' + iIconHeight + 'px; width: ' + ( iIconWidth + iIconBorder ) + 'px" ';
      }
      tab_body +=
          'width="' + ( iIconWidth + iIconBorder ) + '" height="' + this.h + '" align="center" valign="middle" >' +
            img +
          '</td>' +
        '</tr>';
    }

    // text only ---
    else if sText && !sIcon )
    {
      tab_body = '<tr><td ';
      if is.iemac5 )
      {
        tab_body += 'style="position: absolute; top: 0; left: 0" ';
      }
      tab_body +=
        'width="' + this.w + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' + desc + '</td></tr>';
    }
    // icon only ---
    else if sIcon && !sText )
    {
      tab_body = '<tr><td nowrap ';
      if is.iemac5 )
      {
        tab_body += 'style="position: absolute; top: 0; left: 0" ';
      }
      tab_body += 'width="' + this.w + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' + sIcon + '</td></tr>';
    }
    var html = tab_head + tab_body + tab_foot;

    return html;
  }
}
    
    </script>
<!-- Xmenu.js -->    
    <script language="javascript">
/**
@author  Andre Dietisheim (dietisheim@sphere.ch)
@version 2.5.2, 2004-02-10 (created on 2002-04-22)
* Copyright (c) 2001-2004 Andre Dietisheim
*/

function XmenusNavigationName, sNavigation, globals, styles, contents )
{
  if!Xmenu.prototype.instances Xmenu.prototype.instances = new Array();
  Xmenu.prototype.instancesXmenu.prototype.instances.length this// store this instance in static Array

  this.index = Xmenu.prototype.instances.length - 1;

  this.sNavigationName = sNavigationName;
  this.sNavigation = sNavigation;
  this.iType = globals];
  this.iCloseDelay = globals1000;
  this.bClick = globals];
  this.bMenuBelow = globals];
  this.bLeftAlign = globals];
  this.bKeepExpansionState = globals];
  this.bHighlightClickedNodes = globals];
  this.sSpacerUrl = globals];
  this.styles = styles;
  this.contents = contents;

  this.iContent = 0;
  this.tree = null;
  this.overNode = null;
  this.outNode = null;
  this.lastNode = null;
  this.absY = 0;
  this.timeout = null;
  this.bOpened = false;
  iParentLayerWidth = is.iemac5up ): globals][ ]// XparentLayer disturbs Xlayer-events on iemac5
  iParentLayerHeight = is.iemac5up ): globals][ ];
  this.xlayerParent = new XlayerParent"XlayerParent" this.index, this.sSpacerUrl, null, iParentLayerWidth, iParentLayerHeight, null );

  this.tree = this.buildTree00, false, null, "tree" );

  this.nodeFound = null;
  this.navigationNode = null;
  if this.findNodethis.sNavigation, this.tree ) )
  // node indicated in request found
    this.navigationNode = eval"this." this.nodeFound );
  }
}

Xmenu.prototype.VERTICAL = 0;
Xmenu.prototype.HORIZONTAL = 1;
Xmenu.prototype.COLLAPSING = 2;

Xmenu.prototype.buildTree = functioniAbsX, iAbsY, bSibling, sParent, sPath )
{  
    var node = this.buildNodeiAbsX, iAbsY, bSibling, sParent, sPath );
    this.iContent++;
    if this.iContent < this.contents.length && node.iLevel < this.contentsthis.iContent ][ ] )
    // child
      node.child = this.buildTree(  node.absX, node.absY, false, "this." + node.sPath, node.sPath + ".child" );
    }
    if this.iContent < this.contents.length && node.iLevel == this.contentsthis.iContent ][ ] )
    // sibling
      node.sibling = this.buildTreenode.absX, node.absY, true, node.sParent, node.sPath + ".sibling" );
    }
    node.xlayer = this.addXlayerthis.xlayerParent, node, this.styles )
    return node;
}

Xmenu.prototype.buildNode = functioniAbsX, iAbsY, bSibling, sParent, sPath )
{
  var node = new Object();
  node.child = null;
  node.sibling = null;
  node.sParent = sParent;
  node.sPath = sPath;

  node.sText = this.contentsthis.iContent ][ ];
  node.target = this.contentsthis.iContent ][ ];
  node.iLevel = this.contentsthis.iContent ][ ];

  if this.iType == this.VERTICAL )
  {
    if !bSibling )
    // child
      if node.iLevel > || node.iLevel == && !this.bMenuBelow ) ) // menu below: level 2,3,... || menu right: 1, 2, ...
        node.absX = iAbsX + this.stylesnode.iLevel ][ this.stylesnode.iLevel + ][ ];
      else // menu below: level 0, 1 || menu right: level 0
        node.absX = iAbsX + this.stylesnode.iLevel + ][ ];

      if node.iLevel != || node.iLevel == && !this.bMenuBelow ) ) // level 0, 2, 3, ... : add yOffset
        node.absY = iAbsY + this.stylesnode.iLevel + ][ ];
      else // level 1: add height of last node + yOffset
        node.absY = iAbsY + this.stylesnode.iLevel + ][ this.stylesnode.iLevel ][ ];
    }
    else
    // sibling
      node.absX = iAbsX;
      node.absY = iAbsY + this.stylesnode.iLevel + ][ ];
    }
  }
  else if this.iType == this.HORIZONTAL )
  {
    if !bSibling )
    // child
      if node.iLevel > || this.bMenuBelow && node.iLevel == ) )
      // ( level 1 && menu below ), level 2, 3, 4, ...
        node.absY = iAbsY + this.stylesnode.iLevel + ][ this.stylesnode.iLevel ][ ];
        if !this.bLeftAlign // add height of last + yOffset, add xOffset
          node.absX = iAbsX + this.stylesnode.iLevel + ][ ];
        else
          node.absX = this.stylesnode.iLevel + ][ this.cumulateOffsets0, node.iLevel ( ( node.iLevel > && !this.bMenuBelow )this.styles][ );
      }
      else
      // level 0, ( level 1 && menu on the right ) 
        node.absY = iAbsY + this.stylesnode.iLevel + ][ ];
        if !this.bLeftAlign // add yOffset, add width of last + xOffset
          node.absX = iAbsX + this.stylesnode.iLevel + ][ ( ( node.iLevel > )this.stylesnode.iLevel + ][ );
        else
          node.absX = this.stylesnode.iLevel + ][ this.cumulateOffsets0, node.iLevel ( ( node.iLevel > && !this.bMenuBelow )this.styles][ );
      }
    }
    else
    // sibling
      node.absY = iAbsY;
      node.absX = iAbsX + this.stylesnode.iLevel + ][ ];
    }
  }
  else if this.iType == this.COLLAPSING )
  {
    if !bSibling )
    // child
      node.absX = iAbsX + this.stylesnode.iLevel + ][ ];
      node.absY = iAbsY + this.stylesnode.iLevel + ][ ];
    }
    else
    // sibling
      node.absX = iAbsX;
      node.absY = iAbsY + this.stylesnode.iLevel + ][ ];
    }
  }
  return node;
}

Xmenu.prototype.cumulateOffsets = functioniStyleIndex, iMaxLevel )
{
  var iOffset = 0;
  for i = 0; i < iMaxLevel; i++ )
  {
    iOffset += this.stylesi + ][ iStyleIndex ];
  }
  return iOffset;
}

Xmenu.prototype.addXlayer = functionxparentLayer, node, styles )
{
  var parent =  null;
  var x =  "left";
  var y =  "top";
  var offsetX = node.absX;
  var offsetY = node.absY;
  var w =  stylesnode.iLevel + ][ ];
  var h = stylesnode.iLevel + ][ ];
  var clipTop = 0;
  var clipRight = w;
  var clipBottom = h;
  var clipLeft = 0;
  var zIndex =  node.iLevel;
  var visibility = false;
  var fading =  stylesnode.iLevel + ][ ];
  var events =  
  
    Xlayer.prototype.MOUSEOVER, "Xmenu.prototype.instances[" this.index + "].onmouseover( Xmenu.prototype.instances[" this.index + "]." + node.sPath + ")",
    Xlayer.prototype.MOUSEOUT, "Xmenu.prototype.instances[" this.index + "].onmouseout( Xmenu.prototype.instances[" this.index + "]." + node.sPath + ")",
    Xlayer.prototype.CLICK, "Xmenu.prototype.instances[" this.index + "].onclick( Xmenu.prototype.instances[" this.index + "]." + node.sPath + ")"
  ];            
  var sText =  node.sText;
  var bgcolor = stylesnode.iLevel + ][ ][ ];
  var fgcolor =  stylesnode.iLevel + ][ ][ ];
  var align =  stylesnode.iLevel + ][ ][ ];
  var iTopTextBorder = stylesnode.iLevel + ][ ][ ]
  var iRightTextBorder = stylesnode.iLevel + ][ ][ ]
  var iBottomTextBorder = stylesnode.iLevel + ][ ][ ]
  var iLeftTextBorder = stylesnode.iLevel + ][ ][ ]
  var href = null;
  var bold =  stylesnode.iLevel + ][ ][ ];
  var fontface =  stylesnode.iLevel + ][ ][ ];
  var fontsize =  stylesnode.iLevel + ][ ][ ];
  if stylesnode.iLevel + ][ ][ 11 ] )
  {  // icon defined
    var icon = node.child || stylesnode.iLevel + ][ ][ 10 ] )? stylesnode.iLevel + ][ ][ 11 this.sSpacerUrl;
    var icon_w = stylesnode.iLevel + ][ ][ 12 ];
    var icon_h = stylesnode.iLevel + ][ ][ 13 ];
    var iconBorder = stylesnode.iLevel + ][ ][ 14 ];
  }
  else
  {  // icon not defined
    var icon = null;
    var icon_w = 0;
    var icon_h = 0;
    var iconBorder = 0;
  }
  var src = null// iframe: src

  return new Xlayerparent, xparentLayer, x, y, offsetX, offsetY, w, h, clipTop, clipRight, clipBottom, clipLeft, zIndex, visibility, bgcolor, fading, events, sText, bold, align, iTopTextBorder, iRightTextBorder, iBottomTextBorder, iLeftTextBorder, fgcolor, href, icon, icon_w, icon_h, iconBorder, fontface, fontsize, src, this.sSpacerUrl );
}

Xmenu.prototype.create function()
{
  this.createXlayersnull );
  this.setVisibSiblingsthis.tree, true );
}

Xmenu.prototype.createXlayers = functiontree )
{
  if !tree 
  // call without param -> take root node
    tree = this.tree;
  }
  if tree.child )
  {
    this.createXlayerstree.child );
  }
  if tree.sibling )
  {
     this.createXlayerstree.sibling );
  }

  tree.xlayer.create();
}

Xmenu.prototype.setOpenListener = functionopenListener )
{
  this.openListener = openListener;
}

Xmenu.prototype.setCloseListener = functioncloseListener )
{
  this.closeListener = closeListener;
}

Xmenu.prototype.setLinkClickListener = functionlinkClickListener )
{
  this.linkClickListener = linkClickListener;
}

Xmenu.prototype.open = function()
{  
  if this.navigationNode != null )
  {
    this.openLastClicked();
  }
  else
  {
    this.setVisibSiblingsthis.tree, true );
  }
  this.bOpened = true;
  this.openListener.onMenuOpenthis );
}

Xmenu.prototype.openLastClicked = function()
{
  node = this.navigationNode;
  this.lastNode = node;

  if node.child != null )
    this.setVisibSiblingsnode.child, true );

  while node != null )
  {
    this.highlightClickedNodenode );
    if node.sParent != null )
    {
      this.setVisibSiblingsevalnode.sParent ).child, true );
      node = evalnode.sParent );
    }
    else
    {
      this.setVisibSiblingsthis.tree, true );
      node = null;
    }
  }
}

Xmenu.prototype.findNode = functionsText, node )
{
  if this.nodeFound )
    return true;

  if node.child )
    this.findNodesText, node.child );

  if node.sibling )
    this.findNodesText, node.sibling );

  if sText == node.sText )
    this.nodeFound = node.sPath;

  if this.nodeFound 
    return true;
  else 
    return false;
}

Xmenu.prototype.close = function()
{
  if this.bOpened && !this.bKeepExpansionState )
  {
    this.setVisibChildrenthis.tree, false );
    this.setVisibSiblingsthis.tree, true );
    if this.iType == this.COLLAPSING )
      this.setCollapsePosthis.tree );
//    if ( this.bClick && this.lastNode )
//    {
      this.clearHighlightChildrenthis.tree );
      this.lastNode = null;
//    }

    this.bOpened = false;
    this.closeListener.onMenuClosethis );
  }
}

Xmenu.prototype.onmouseover = functionnode )
{
  this.overNode = node;
  if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL && !this.bClick )
  {
    if !this.bOpened )
    // this menu will open
      this.bOpened = true;
      this.openListener.onMenuOpenthis );
    }
    if this.outNode )
      var outNode = this.outNode;
    else
      var outNode = this.tree;
    if outNode.iLevel > node.iLevel )
    {
      this.showBranchnode, this.outNode );
//      this.setVisibSiblings( eval( outNode.sParent + ".child" ), false );
//      this.setVisibSiblings( outNode.child, false );
    }
    else if outNode.iLevel == node.iLevel )
    {
      this.setVisibSiblingsoutNode.child, false );
    }
    this.setVisibSiblingsnode.child, true );
  }
  if this.checkClickPathnode ) )
  // current node is not the node that was clicked (or its parents)
    this.highlightnode, true );
  }
  return false;
}

Xmenu.prototype.onmouseout = functionnode )
{
  if this.checkClickPathnode ) )
    this.highlightnode, false );

  var timeout = this.timeout;
  if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL && !this.bClick // close menu if no onmouseover until timeout
  {
    this.timeout = setTimeout"Xmenu.prototype.instances[" this.index + "].checkOnmouseout()"this.iCloseDelay );
  }

  this.outNode = node;
  clearTimeouttimeout );
  return false;
}

Xmenu.prototype.checkClickPath = functionnode )
{
  if this.bHighlightClickedNodes )
  {
    lastNode = this.lastNode;
    while lastNode != null )
    {
      if lastNode == node // node clicked found
        return false;
      else // continue looking for it
        lastNode = evallastNode.sParent );
    }
    return true;
  }
  else
  {
    return true;
  }
}

Xmenu.prototype.checkOnmouseout = function()
{
  if this.overNode == this.outNode && !this.bKeepExpansionState && this.bClick ) )
  // onmouseover executed since delay?
    this.close();
  }
}

Xmenu.prototype.onclick = functionnode )
{  
  if node.target )
  // follow href
    node.target.opennode.sText, this.sNavigationName, this.sNavigation );
    this.sNavigation = node.sText;
    this.navigationNode = node; // store navigation node
    this.clearHighlightChildrenthis.tree );
    this.linkClickListener.onLinkClickthis )// inform controller
  }
  else if (
    ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL && this.bClick || 
    this.iType == this.COLLAPSING )
  {
    this.highlightnode, true );
    if !this.bOpened )
    // this menu will open
      this.bOpened = true;
      this.openListener.onMenuOpenthis );
    }
  
    if this.iType == this.COLLAPSING )
      this.collapsenode );
    else if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL && this.bClick )
      this.showBranchnode, this.lastNode );
    this.lastNode = node;
  }
  return false;
}

Xmenu.prototype.showBranch = functionnode, hideNode )
{
//  if ( this.bClick && hideNode == node && node.child && node.child.xlayer.isVisible() )
  if this.bClick && node.child && node.child.xlayer.isVisible() )
  // reclose branch
    this.setVisibChildrennode.child, false );
    this.clearHighlightChildrennode, false );
  }
  else
  {
    if hideNode )
    // hide old nodes
      this.setVisibChildrenthis.tree, false );
      this.clearHighlightChildrenthis.tree, false );
    }
    if node.child this.setVisibSiblingsnode.child, true );
    while node )
    // show new nodes
      if this.bClick )
        this.highlightClickedNodenode, true );
      if node.sParent 
        this.setVisibSiblingsevalnode.sParent ).child, true );
      else
        this.setVisibSiblingsthis.tree, true );
      node = evalnode.sParent );
    }
  }
}

Xmenu.prototype.clearHighlightChildren = functionnode )
{
  if node )
  {
    if  node.child )
       this.clearHighlightChildrennode.child );
    if node.sibling )
       this.clearHighlightChildrennode.sibling );
    this.highlightnode, false );
  }
}

Xmenu.prototype.collapse = functionnode )
{
  this.showBranchnode, this.lastNode );
  this.setCollapsePosthis.tree );
}

Xmenu.prototype.setCollapsePos = functionnode )
{
  if node == this.tree // start looping
    this.absY = this.tree.xlayer.y;
      
  if node.xlayer.isVisible() )
  {
    node.xlayer.setPosnode.xlayer.x, this.absY );
    this.absY += node.xlayer.h;
  }

  if node.child 
    this.setCollapsePosnode.child );
  if node.sibling 
    this.setCollapsePosnode.sibling );
}

Xmenu.prototype.highlight = functionnode, bHighlight )
{
  var index = bHighlight )5;  // style for mouseover or mouseout ?
  node.xlayer.setBgColorthis.stylesnode.iLevel + ][ index ][ ] );
  // nn4 crashes, iemac stops rendering
  if !is.nn4up && !is.iemac5up node.xlayer.setFgColorthis.stylesnode.iLevel + ][ index ][ ] );
}

Xmenu.prototype.highlightClickedNode = functionnode )
{
  if node && this.bHighlightClickedNodes )
  {
    node.xlayer.setBgColorthis.styles][ ] );
    if !is.nn4up && !is.iemac5up 
      node.xlayer.setFgColorthis.styles][ ] );
  }
}

Xmenu.prototype.setVisibSiblings = functionnode, bVisibility )
{
  if node )
  {
    if node.sibling )
       this.setVisibSiblingsnode.sibling, bVisibility );
    node.xlayer.setVisibilitybVisibility );
  }
}

Xmenu.prototype.setVisibChildren = functionnode, bVisibility )
{
  if node )
  {
    if  node.child )
       this.setVisibChildrennode.child, bVisibility );
    if  node.sibling )
       this.setVisibChildrennode.sibling, bVisibility );
    node.xlayer.setVisibilitybVisibility );
  }
}

Xmenu.prototype.isNavigationNodeFound = function()
{
  return this.navigationNode != null;
}
    
    </script>
<!-- Xmenus.js -->    
    <script language="javascript">
// created by: Andre Dietisheim (dietisheim@sphere.ch)
// created:  2002-05-11
// modified by: Andre Dietisheim (dietisheim@sphere.ch)
// modified: 2004-01-17
// version: 2.1.0

function XmenussNavigationName, sNavigation )
{
  if!Xmenus.prototype.instances Xmenus.prototype.instances = new Array();
  Xmenus.prototype.instancesXmenus.prototype.instances.length this;

  this.index = Xmenus.prototype.instances.length - 1;
  this.bCompatibleBrowser = is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.nn4up || is.op6up );
  this.iCloseDelay = 1;
  this.xmenus = new Array();

  this.sNavigationName = sNavigationName;
  this.sNavigation = sNavigation;
  this.navigationMenu = null;

  this.lastMenu = null;
  this.timeout = null;
  this.bReopenDisabled = false;
}

Xmenus.prototype.add = functionxmenuConfig )
{
  if this.bCompatibleBrowser )
    this.xmenusthis.xmenus.length new Xmenuthis.sNavigationName, this.sNavigation, xmenuConfig], xmenuConfig], xmenuConfig] );
//  else
//    this.writeDegradationHtml( xmenuConfig );
}

Xmenus.prototype.create function()
{
  if !this.bCompatibleBrowser return;

  for j = 0; j < this.xmenus.length; j++ )
  {
    this.xmenus].setOpenListenerthis );
    this.xmenus].setCloseListenerthis );
    this.xmenus].setLinkClickListenerthis );
    this.xmenus].create();
    if this.xmenus].isNavigationNodeFound() )
    {
      this.openNavigationMenuthis.xmenus] );
    }
  }
}

Xmenus.prototype.openNavigationMenu = functionxmenu )
{
      this.navigationMenu = xmenu;
      this.lastMenu = xmenu;
      xmenu.open();
}

Xmenus.prototype.onMenuOpen = functionxmenu )
// fired by Xmenu on menu open
  if this.lastMenu != null && this.lastMenu != xmenu )
  {
    this.bReopenDisabled = true;
    this.lastMenu.close();
    this.bReopenDisabled = false;
  }
  this.bOpened = true;
  this.lastMenu = xmenu;
}

Xmenus.prototype.onMenuClose = functionxmenu )
{  // fired by Xmenu on menu close
  if !this.bReopenDisabled )
  {
    this.timeout = setTimeout"Xmenus.prototype.instances[" this.index + "].reopenAfterClose()"this.iCloseDelay * 1000 );
  }
  this.bOpened = false;
}

Xmenus.prototype.reopenAfterClose = function()
{
  if !this.bOpened && this.navigationMenu != null )
  //no other menu is opened -> open navigation menu
    this.navigationMenu.open();
  }
}

Xmenus.prototype.onLinkClick = functionxmenu )
{  // fired by Xmenu on click on a link
//  this.navigationMenu.clearHighlightChildren( this.navigationMenu.tree );
  this.openNavigationMenuxmenu );
}

Xmenus.prototype.writeDegradationHtml = functionxmenuConfig )
{
  var content = xmenuConfig];
  for i = 0; i < content.length; i++ )
  {
    if content][ == && content][ ] )
      document.write'<a href="' + content[ i ][ 1 ].sSrc + '">' + content][ '</a><br>' );;
  }
}    
    </script>
<!-- Debug.js -->    
    <script language="javascript">
function Debug()
{  
  this.outputElementName = "debug";
  this.sText = "";
}

debug = new Debug();

Debug.prototype.writeHtml = functioniColumns, iRows )
{  
  sTextAreaHtml =
    "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">" +
      "<tr>" +
        "<td colspan=\"3\">" +
          "<form>" +
            "<textarea type=\"text\" name=\"" this.outputElementName + "\" id=\"debug\" cols=\"" + iColumns + "\" rows=\"" + iRows + "\">" +
            "</textarea><br>" +
            "<input type=\"button\" value=\"select all\" onClick=\"javascript:document.getElementById( 'debug' ).select()\">" +
            "<input type=\"reset\" value=\"clear\">" +
          "</form>" +
        "</td>" +
      "</tr>" +
    "</table>";  
    
  document.writesTextAreaHtml );
}

Debug.prototype.flushBuffer = function()
{
  var outputElement = this.getOutput();
  if outputElement )
  {
    outputElement.value = this.sText + "\n" + outputElement.value ;
  }
}

Debug.prototype.bufferedWrite = functionsText )
{
  this.sText = sText + "\n" this.sText;
}

Debug.prototype.write = functionsText )
{
  var outputElement = this.getOutput()
  if outputElement )
  {
    outputElement.value = sText + "\n" + outputElement.value;
  }
}

Debug.prototype.getOutput = function()
{
  var outputElement = null;
  if is.nn4up )
  {
    outputElement = document.forms"\"" this.outputElementName + "\"" ];
  }
  else if is.gk || is.iewin5up || is.iemac5up || is.sf )
  {
    outputElement = document.getElementByIdthis.outputElementName );
  }
  return outputElement;
}    
    </script>
<!-- XmenuConfig.js -->    
    <script language="javascript">
function WinTargetsSrc )
{
  this.sSrc = sSrc;
}

WinTarget.prototype.createHref = functionsSrc, sText, sNavigationName, sNavigation 
{
  if sSrc == "#" )
  // create link to same page poping up current menu-entry
    sSrc = location + ""// window.document.URL
    sSrc = sSrc.replacenew RegExpsNavigationName + "=[^&]*""" ), sNavigationName + "=" + escapesText ) );
    if sSrc.indexOfsNavigationName + "=" )
      sSrc = sSrc + "?" + sNavigationName + "=" + escapesText );
  }
  return sSrc;
}

WinTarget.prototype.open = functionsText, sNavigationName, sNavigation )
{
  window.location = this.createHrefthis.sSrc, sText, sNavigationName, sNavigation );
}

function NewWinTargetsSrc, iX, iY, iWidth, iHeight )
{
  this.win = null;
  this.sSrc = sSrc;
  this.iX = iX;
  this.iY = iY;
  this.iWidth = iWidth;
  this.iHeight = iHeight;
}

NewWinTarget.prototype.open = function()
{
  var sOpts = "toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes,scrollbars=yes";

  if document.body && document.body.offsetWidth )
    sOpts += ",width=" this.iWidth;
  else if window.innerWidth )
    sOpts += ",innerWidth=" this.iWidth + ",";

  if document.body && document.body.offsetHeight )
    sOpts += ",height=" this.iHeight
  else if window.innerHeight )
    sOpts += ",innerHeight=" this.iHeight

  sOpts +=",top=" this.iY;
  sOpts += ",left=" this.iX;

  this.win = top.openthis.sSrc, "", sOpts );
}

function FrameTargetsSrc, sId )
{
  this.sSrc = sSrc;
  this.sId = sId;
}

FrameTarget.prototype.open = function()
{
  var target = top.framesthis.sId ];
  if target )
    target.document.location.href = this.sSrc;
}

function IframeTargetsSrc, sId )
{
  this.sSrc = sSrc;
  this.sId = sId;
}

IframeTarget.prototype.open = function()
{
  if !this.ns47up )
  {
    var target = top.framesthis.sSrc ];
    if target )
      target.src = this.sSrc;
  }
}    
    </script>
<!-- XmenusConf.js -->    
    <script language="javascript">
var pastaVertical = [
    // globals -----------------
    [  Xmenu.prototype.VERTICAL,
      1// delay in sec. before closing menu
      false, // onclick / onmouseover
      true, // horizontal & vertical menu: menu appears below/right of the root-node
      false, // horizontal menu: each hierarchy starts on same X
      false, // keep expansion state
      true,  // highlight clicked nodes
      20],  // XlayerParent width, height
      "img/spacer.gif" // spacer url
    ],
      // styles ------------------
      [  [ "#ff4400""#ffaaaa" ]// onclick-menu: color of clicked node
        0810025, null, "#ef6f00""white""center"0000, true, "Arial, Helvetica, sans serif"14, false, "img/arrow_horiz.gif"3510 ],"#ff5500""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"2, null, 120] ]// xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]]
        0110030, null, "#ef7f00""white""left"00010, true, "Arial, Helvetica, sans serif"12, false, "img/arrow_horiz.gif"3510 ],"#ff8e00""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        -8010020, null, "#ff8e00""white""left"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_horiz.gif"3510 ],"#ffa000""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        -4010020, null, "#ffb200""white""left"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_horiz.gif"3510 ],"#ffc400""#ffccbb""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ]
      ],
      // content ----------
      [  [ "pasta", null, ]// content: [text, href, hierarchyLevel]
          "spaghetti", null, ],
            "bolognese", null, ],
              "formaggio"new WinTarget"#" )],
            "carbonara"new WinTarget"#" )],
            "pesto", null, ],
              "rosso"new WinTarget"#" )],
          "tortelloni"new WinTarget"#" )],
          "tagliatelle", null, ],
            "alla panna", null, ],
            "arrabiato"new WinTarget"#" )],
              "formaggio"new WinTarget"#" )]              
      ]
    ];
    
var pastaHorizontal = [
    // globals -----------------
    [  Xmenu.prototype.HORIZONTAL,
      1// delay in sec. before closing menu
      false, // classic menu: onclick / onmouseover
      true, // horizontal & vertical menu: menu appears below/right of the root-node
      false, // horizontal menu: each hierarchy starts on same X
      false, // keep expansion state
      true,  // highlight clicked nodes
      20],  // XlayerParent width, height
      "img/spacer.gif" // spacer url
    ],
      // styles ------------------
      [  [ "#ff4400""#ffaaaa" ]// onclick-menu: color of clicked node
        0810025, null, "#ef6f00""white""center"00010, true, "Arial, Helvetica, sans serif"14, false, "img/arrow_vert.gif"5310 ],"#ff5500""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"2, null, 120] ]// xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]]
        0110030, null, "#ef7f00""white""center"00010, true, "Arial, Helvetica, sans serif"12, false, "img/arrow_vert.gif"5310 ],"#ff8e00""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        0010020, null, "#ff8e00""white""center"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_vert.gif"5310 ],"#ffa000""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        0010020, null, "#ffa000""white""center"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_vert.gif"5310 ],"#ffb200""#ffccbb""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ]
      ],
      // content ----------
      [  [ "pasta", null, ]// content: [text, href, hierarchyLevel]
          "spaghetti", null, ],
            "bolognese", null, ],
              "formaggio"new WinTarget"#" )],
            "carbonara"new WinTarget"#" )],
            "pesto", null, ],
              "rosso"new WinTarget"#" )],
          "tortelloni"new WinTarget"#" )],
          "tagliatelle", null, ],
            "alla panna", null, ],
            "arrabiato", null, ],
              "formaggio"new WinTarget"#" )]
      ]
    ];

var pastaVerticalOnclickHighlight = [
    // globals -----------------
    [  Xmenu.prototype.VERTICAL,
      1// delay in sec. before closing menu
      true, // classic menu: onclick / onmouseover
      true, // horizontal & vertical menu: menu appears below/right of the root-node
      false, // horizontal menu: each hierarchy starts on same X
      false, // keep expansion state
      true, // onclick menu: highlight clicked nodes
      20],  // XlayerParent width, height
      "img/spacer.gif" // spacer url
    ],
      // styles ------------------
      [  [ "#ff4400""#ffaaaa" ]// onclick-menu: color of clicked node
        0810025, null, "#ef6f00""white""center"0000, true, "Arial, Helvetica, sans serif"14, false, "img/arrow_vert.gif"5310 ],"#ff5500""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif, sans serif"2, null, 120] ]// xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]]
        0115024, null, "#ff7f00""white""left"0000, true, "Arial, Helvetica, sans serif"12, false, "img/arrow_vert.gif"5310 ],"#ff8e00""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif, sans serif"1"img/spacer.gif"11] ],
      ],
      // content ----------
      [  [ "gallery", null, ]// content: [text, href, hierarchyLevel]
          "&nbsp;&nbsp;face-art.ch"new NewWinTarget(  "http://www.face-art.ch"50501024768 )],
          "&nbsp;&nbsp;swissbusinesshub.org"new NewWinTarget(  "http://www.swissbusinesshub.org"5050800600 )],
          "&nbsp;&nbsp;ensta.fr"new NewWinTarget(  "http://www.ensta.fr/uer/uei/fr/index.html"5050800600 )]
      ]
    ];

var pastaCollapsingFading = [
    // globals -----------------
    [  Xmenu.prototype.COLLAPSING,
      1// delay in sec. before closing menu
      true, // vertical or horizontal menu: onclick / onmouseover
      true, // horizontal & vertical menu: menu appears below/right of the root-node
      true,  // horizontal menu: each hierarchy starts on same X
      false, // keep expansion state
      true,  // highlight clicked nodes
      20],  // XlayerParent width, height
      "img/spacer.gif" // spacer url
    ],
      // styles ------------------
      [  [ "#ff4400""#ffaaaa" ]// onclick-menu: color of clicked node
        11810025, null, "#ff7f00""white""center"00010, true, "Arial, Helvetica, sans serif"12, false, "img/arrow_vert.gif"5310 ],"#ff7c00""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        0010020, null, "#ff8e00""white""center"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_vert.gif"5310 ],"#ffa000""#ffbbaa""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ],
        0010020, null, "#ffa000""white""center"00010, true, "Arial, Helvetica, sans serif"10, false, "img/arrow_vert.gif"5310 ],"#ffb200""#ffccbb""center"00010, true, "Arial, Helvetica, sans serif"1"img/spacer.gif"11] ]
      ],
      // content ----------
      [    [ "spaghetti", null, ],
            "bolognese", null, ],
              "formaggio"new WinTarget"#" )],
            "carbonara"new WinTarget"#" )],
            "pesto", null, ],
              "rosso"new WinTarget"#" )],
          "tortelloni"new WinTarget"#" )],
          "tagliatelle", null, ],
            "alla panna", null, ],
              "formaggio"new WinTarget"#" )],
            "arrabiato"new WinTarget"#" )]
      ]
    ];
    
    
    </script>

    <script language="javascript">

      var menus =  new Xmenus'sNavigation', '' );

      function onLoad()
      {
        menus.create()
      }

      function onResize()
      {
        window.location.reload();
      }
      
    </script></head>

  <body onload="onLoad()" onresize="onResize()">
    <table border="0" cellpadding="0" cellspacing="0" height="33" width="553">
    <tbody><tr>
        <td class="orange" height="33" valign="top" width="100">
          <script language="javascript">
            menus.addpastaHorizontal );
          </script>
        </td>
            <td class="orange" height="33" valign="top" width="100">
           <script language="javascript">
            menus.addpastaVertical );
           </script>
        <td class="orange" height="33" valign="top" width="100">
           <script language="javascript">
            menus.addpastaVerticalOnclickHighlight );
                   </script>
    </tbody>
    </table>
<b>Xmenu-xlayer</b> is a versatile, javascript driven DHTML menu that works on
<ul class="content"><li>Internet Explorer Windows and later (55.56)<br></li>
<li>Gecko (Mozilla, Mozilla-Firebird, Galeon, Netscape 67, etc.)<br></li>
<li>Opera 67<br></li><li>Internet Explorer Macintosh and later (55.15.2)<br></li>
<li>Safari<br></li><li>Konqueror 3.x<br></li><li>Netscape 4.x<br></li>
</ul>

It comes in basic modes: 
  <ul class="content">
    <li>horizontal<br></li>
    <li>vertical<br></li>
    <li>collapsing<br></li>
   </ul>
and may be configured to fold/unfold on clicks or mouseovers. There are
plenty of other configuration options that allow you to change colors,
fonts, sizes, offsets, behaviours, etc. <b>Xmenu-xlayer</b> is very easy to
implement, it doesn't need any absolute coordinates - just add it to
your layout and it calculates its positon on its own. The whole code is
released into the community under LGPL and may be freely distributed. 


<script language="javascript">
  menus.addpastaCollapsingFading );
</script>

</body></html>

           
       
Related examples in the same category
1. Application Menubar Example
2. [DOM Menu] :: Example 1 :: Horizontal Menu
3. [DOM Menu] :: Example 2 :: KDE Keramik Style Menu
4. [DOM Menu] :: Example 3: Brainjar.com 'Revenge of the Menubar' Style Menu
5. [DOM Menu] Example 4: Vertical Menu
6. [DOM Menu] :: Example 5 :: Two Menus
7. [DOM Menu] :: Example 6 :: Flash Hiding
8. Menu bar for an inner fake window
9. Fly in Menu item
10. Not too fancy menu with toolbar
11. Custom Contextual Menu(content sensitive)
12. Drop-Down Menus
13. Menu with sound
14. Menu based on Javascript
15. popup menu (content sensitive menu)
16. Complete Source Code for the Menu
17. Slide out menu
18. Dynamic menu: fly in
19. Slide out menu with i18N
20. Menu: XP, win 98 style
21. Simple drop-down menu example with layer
22. Build a simple fancy menu
23. Add/delete menu items
24. Customizable layout: customize menu layout
25. Vertical layout menu
26. Easy skinable menu with CSS
27. Menu Item properties
28. Direct link menu
29. Context menu: popup menu
30. Black Menu
31. Dropdown menu
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.