Menu with Sub Menus

[Total: 0    Average: 0/5]

This menu dynamically alters its presence to show the sub menus.

Head Code:

<SCRIPT LANGUAGE="JavaScript1.2">
/**
 * resize.js 0.3 970811
 * by gary smith
 * js component for "reloading page onResize"
 */

if(!window.saveInnerWidth) {
  window.onresize = resize;
  window.saveInnerWidth = window.innerWidth;
  window.saveInnerHeight = window.innerHeight;
}

function resize() {
    if (saveInnerWidth < window.innerWidth || 
        saveInnerWidth > window.innerWidth || 
        saveInnerHeight > window.innerHeight || 
        saveInnerHeight < window.innerHeight ) 
    {
        window.history.go(0);
    }
}

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2">
var _id = 0, _pid = 0, _lid = 0, _pLayer;
var _mLists = new Array();
document.lists = _mLists;
var isNav4, isIE4;
if (parseInt(navigator.appVersion.charAt(0)) >= 4) {
  isNav4 = (navigator.appName == "Netscape") ? true : false;
  isIE4 = (navigator.appName.indexOf("Microsoft") != -1) ? true : false;
}
function List(visible, width, height, bgColor) {
  this.setIndent = setIndent;
  this.addItem = addItem;
  this.addList = addList;
  this.build = build;
  this.rebuild = rebuild;
  this.setFont = _listSetFont;
  this._writeList = _writeList;
  this._showList = _showList;
  this._updateList = _updateList;
  this._updateParent = _updateParent;
 this.onexpand = null; this.postexpand = null;
  this.lists = new Array(); // sublists
  this.items = new Array(); // layers
  this.types = new Array(); // type
  this.strs = new Array();  // content
  this.x = 0;
  this.y = 0;
  this.visible = visible;
  this.id = _id;
  this.i = 18;
  this.space = true;
  this.pid = 0;
  this.fontIntro = false;
  this.fontOutro = false;
  this.width = width || 350;
  this.height = height || 22;
  this.parLayer = false;
  this.built = false;
  this.shown = false;
  this.needsUpdate = false;
  this.needsRewrite = false;
  this.parent = null;
  this.l = 0;
  if(bgColor) this.bgColor = bgColor;
  else this.bgColor = null;
  _mLists[_id++] = this;
}
function _listSetFont(i,j) {
  this.fontIntro = i;
  this.fontOutro = j;
}
function setIndent(indent) { this.i = indent; if(this.i < 0) { this.i = 0; this.space = false; } }
function setClip(layer, l, r, t, b) {
  if(isNav4) {
    layer.clip.left = l; layer.clip.right = r;
    layer.clip.top = t;  layer.clip.bottom = b;
  } else {
    layer.style.pixelWidth = r-l;
    layer.style.pixelHeight = b-t;
    layer.style.clip = "rect("+t+","+r+","+b+","+l+")";
  }
}
function _writeList() {
  self.status = "List: Writing list...";
  var layer, str, clip;
  for(var i = 0; i < this.types.length; i++) { 
    layer = this.items[i];
    if(isNav4) layer.visibility = "hidden";
    else layer.style.visibility = "hidden";
    str = "";
    if(isNav4) layer.document.open();
    str += "<TABLE WIDTH="+this.width+" NOWRAP BORDER=0 CELLPADDING=0 CELLSPACING=0><TR>";
    if(this.types[i] == "list") {
      str += "<TD WIDTH=15 NOWRAP VALIGN=MIDDLE><A HREF="javascript:expand("+this.lists[i].id+");"><IMG BORDER=0 SRC="true.gif" NAME="_img"+this.lists[i].id+""></A></TD>";
      _pid++;
    } else if(this.space)
      str += "<TD WIDTH=15 NOWRAP> </TD>";
    if(this.l>0 && this.i>0) str += "<TD WIDTH="+this.l*this.i+" NOWRAP> </TD>";
    str += "<TD HEIGHT="+(this.height-3)+" WIDTH="+(this.width-15-this.l*this.i)+" VALIGN=MIDDLE ALIGN=LEFT>";
    if(this.fontIntro) str += this.fontIntro;
    str += this.strs[i];
    if(this.fontOutro) str += this.fontOutro;
    str += "</TD></TABLE>";
    if(isNav4) {
      layer.document.writeln(str);
      layer.document.close();
    } else layer.innerHTML = str;
    if(this.types[i] == "list" && this.lists[i].visible)
      this.lists[i]._writeList();
  }
  this.built = true;
  this.needsRewrite = false;
  self.status = '';
}
function _showList() {
  var layer;
  for(var i = 0; i < this.types.length; i++) { 
    layer = this.items[i];
    setClip(layer, 0, this.width, 0, this.height-1);
    if(isIE4) {
      if(layer.oBgColor) layer.style.backgroundColor = layer.oBgColor;
      else layer.style.backgroundColor = this.bgColor;
    } else {
      if(layer.oBgColor) layer.document.bgColor = layer.oBgColor;
      else layer.document.bgColor = this.bgColor;
    }
    if(this.types[i] == "list" && this.lists[i].visible)
      this.lists[i]._showList();
  }
  this.shown = true;
  this.needsUpdate = false;
}
function _updateList(pVis, x, y) {
  var currTop = y, layer;
  for(var i = 0; i < this.types.length; i++) { 
    layer = this.items[i];
    if(this.visible && pVis) {
      if(isNav4) {
	layer.visibility = "visible";
	layer.top = currTop;
	layer.left = x;
      } else {
	layer.style.visibility = "visible";
	layer.style.pixelTop = currTop;
	layer.style.pixelLeft = x;
      }
      currTop += this.height;
    } else {
      if(isNav4) layer.visibility = "hidden";
      else layer.style.visibility = "hidden";
    }
    if(this.types[i] == "list") {
      if(this.lists[i].visible) {
        if(!this.lists[i].built || this.lists[i].needsRewrite) this.lists[i]._writeList();
        if(!this.lists[i].shown || this.lists[i].needsUpdate) this.lists[i]._showList();
        if(isNav4) layer.document.images[0].src = "true.gif";
	else eval('document.images._img'+this.lists[i].id+'.src = "true.gif"');
      } else {
	if(isNav4) layer.document.images[0].src = "false.gif";
	else eval('document.images._img'+this.lists[i].id+'.src = "false.gif"');
      }
      if(this.lists[i].built)
        currTop = this.lists[i]._updateList(this.visible && pVis, x, currTop);
    }
  }
  return currTop;
}
function _updateParent(pid, l) {
  var layer;
  if(!l) l = 0;
  this.pid = pid;
  this.l = l;
  for(var i = 0; i < this.types.length; i++)
    if(this.types[i] == "list")
      this.lists[i]._updateParent(pid, l+1);
}
function expand(i) {
  _mLists[i].visible = !_mLists[i].visible;
  if(_mLists[i].onexpand != null) _mLists[i].onexpand(_mLists[i].id);
  _mLists[_mLists[i].pid].rebuild();
  if(_mLists[i].postexpand != null) _mLists[i].postexpand(_mLists[i].id);
}
function build(x, y) {
  this._updateParent(this.id);
  this._writeList();
  this._showList();
  this._updateList(true, x, y);
  this.x = x; this.y = y;
}
function rebuild() { this._updateList(true, this.x, this.y); }
function addItem(str, bgColor, layer) {
  var testLayer = false;
  if(!document.all) document.all = document.layers;
  if(!layer) {
    if(isIE4 || !this.parLayer) testLayer = eval('document.all.lItem'+_lid);
    else {
      _pLayer = this.parLayer;
      testLayer = eval('_pLayer.document.layers.lItem'+_lid);
    }
    if(testLayer) layer = testLayer;
    else {
      if(isNav4) {
	if(this.parLayer) layer = new Layer(this.width, this.parLayer);
	else layer = new Layer(this.width);
      } else return;
    }
  }
  if(bgColor) layer.oBgColor = bgColor;
  this.items[this.items.length] = layer;
  this.types[this.types.length] = "item";
  this.strs[this.strs.length] = str;
  _lid++;
}
function addList(list, str, bgColor, layer) {
  var testLayer = false;
  if(!document.all) document.all = document.layers;
  if(!layer) {
    if(isIE4 || !this.parLayer) testLayer = eval('document.all.lItem'+_lid);
    else {
      _pLayer = this.parLayer;
      testLayer = eval('_pLayer.document.layers.lItem'+_lid);
    }
    if(testLayer) layer = testLayer;
    else {
      if(isNav4) {
	if(this.parLayer) layer = new Layer(this.width, this.parLayer);
	else layer = new Layer(this.width);
      } else return;
    }
  }
  if(bgColor) layer.oBgColor = bgColor;
  this.lists[this.items.length] = list;
  this.items[this.items.length] = layer;
  this.types[this.types.length] = "list";
  this.strs[this.strs.length] = str;
  list.parent = this;
  _lid++;
}

</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function menu_init() {
  if(parseInt(navigator.appVersion) < 4) {
    alert("Sorry, a 4.0+ browser is required to view this demo.");
    return;
  }
  var width, height = 22;
  if(isNav4) width = 3*window.innerWidth/4;
  else width = 3*document.body.clientWidth/4;
  width=300; // this overrides the auto logic for the width...
  var bgColor = "#003366";
  l = new List(true, width, height+5, bgColor);
  l.setFont("<FONT COLOR='#99CCFF' FACE='Arial,Helvetica' SIZE=-1><B>","</B></FONT>");
    m = new List(false, width, height, "#336699");
    m.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
    m.addItem("Join Now");
    m.addItem("Access Benefits");
    m.addItem("Benefits at a Glance");
    m.addItem("Membership Services");
    m.addItem("Contact Us");
    m.addItem("FAQs");
  l.addList(m, "Membership");
    o = new List(false, width, height, "#336699");
    o.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
    o.addItem("Site Showcase");
    o.addItem("HTML & Web Design");
    o.addItem("Scripting");
    o.addItem("Membership");
    o.addItem("Partner Technologies");
  l.addList(o, "Open Studio");
    d = new List(false, width, height, "#336699");
    d.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
      techNote = new List(true, width, height, "#6699CC");
      techNote.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
    d.addList(techNote, "This is another Line");
      techNote.addItem("Digital clock in a form feild.");
  l.addList(d, "Clocks, Calanders, Calculators");
    t = new List(false, width, height, "#336699");
    t.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
    t.addItem("Components");
    t.addItem("CORBA/IIOP");
    t.addItem("Dynamic HTML");
    t.addItem("Java");
    t.addItem("JavaScript");
    t.addItem("Directories and LDAP");
    t.addItem("XML and Metadata");
    t.addItem("Security");
  l.addList(t, "Technologies");
    s = new List(false, width, height, "#336699");
    s.setFont("<FONT COLOR='white' FACE='Arial,Helvetica' SIZE=-1>","</FONT>");
    s.addItem("Search Newsgroups");
    s.addItem("DevEdge Newsgroups");
    s.addItem("FAQs");
    s.addItem("Known Bugs");
    s.addItem("One-to-One Development Support");
    s.addItem("Courses");
    s.addItem("How to Get Answers");
  l.addList(s, "Support & Newsgroups");
  l.addItem("View Source Magazine");
  l.addItem("Communicator Source Code");
  l.addItem("Co-Marketing");
  l.addItem("Products & Downloads");
  l.build(0,0); // coord of top left of menu x,y
}
</SCRIPT>
<STYLE TYPE="text/css">
#spacer { position: absolute; height: 1120; }
</STYLE>
<STYLE TYPE="text/css">
#lItem0 { position:absolute; } 
#lItem1 { position:absolute; } 
#lItem2 { position:absolute; } 
#lItem3 { position:absolute; } 
#lItem4 { position:absolute; } 
#lItem5 { position:absolute; } 
#lItem6 { position:absolute; } 
#lItem7 { position:absolute; } 
#lItem8 { position:absolute; } 
#lItem9 { position:absolute; } 
#lItem10 { position:absolute; } 
#lItem11 { position:absolute; } 
#lItem12 { position:absolute; } 
#lItem13 { position:absolute; } 
#lItem14 { position:absolute; } 
#lItem15 { position:absolute; } 
#lItem16 { position:absolute; } 
#lItem17 { position:absolute; } 
#lItem18 { position:absolute; } 
#lItem19 { position:absolute; } 
#lItem20 { position:absolute; } 
#lItem21 { position:absolute; } 
#lItem22 { position:absolute; } 
#lItem23 { position:absolute; } 
#lItem24 { position:absolute; } 
#lItem25 { position:absolute; } 
#lItem26 { position:absolute; } 
#lItem27 { position:absolute; } 
#lItem28 { position:absolute; } 
#lItem29 { position:absolute; } 
#lItem30 { position:absolute; } 
#lItem31 { position:absolute; } 
#lItem32 { position:absolute; } 
#lItem33 { position:absolute; } 
#lItem34 { position:absolute; } 
#lItem35 { position:absolute; } 
#lItem36 { position:absolute; } 
#lItem37 { position:absolute; } 
#lItem38 { position:absolute; } 
#lItem39 { position:absolute; } 
#lItem40 { position:absolute; } 
#lItem41 { position:absolute; } 
#lItem42 { position:absolute; } 
#lItem43 { position:absolute; } 
#lItem44 { position:absolute; } 
#lItem45 { position:absolute; } 
#lItem46 { position:absolute; } 
</STYLE>

Body Code:

<DIV ID="spacer"></DIV>
<DIV ID="lItem0" NAME="lItem0"></DIV>
<DIV ID="lItem1" NAME="lItem1"></DIV>
<DIV ID="lItem2" NAME="lItem2"></DIV>
<DIV ID="lItem3" NAME="lItem3"></DIV>
<DIV ID="lItem4" NAME="lItem4"></DIV>
<DIV ID="lItem5" NAME="lItem5"></DIV>
<DIV ID="lItem6" NAME="lItem6"></DIV>
<DIV ID="lItem7" NAME="lItem7"></DIV>
<DIV ID="lItem8" NAME="lItem8"></DIV>
<DIV ID="lItem9" NAME="lItem9"></DIV>
<DIV ID="lItem10" NAME="lItem10"></DIV>
<DIV ID="lItem11" NAME="lItem11"></DIV>
<DIV ID="lItem12" NAME="lItem12"></DIV>
<DIV ID="lItem13" NAME="lItem13"></DIV>
<DIV ID="lItem14" NAME="lItem14"></DIV>
<DIV ID="lItem15" NAME="lItem15"></DIV>
<DIV ID="lItem16" NAME="lItem16"></DIV>
<DIV ID="lItem17" NAME="lItem17"></DIV>
<DIV ID="lItem18" NAME="lItem18"></DIV>
<DIV ID="lItem19" NAME="lItem19"></DIV>
<DIV ID="lItem20" NAME="lItem20"></DIV>
<DIV ID="lItem21" NAME="lItem21"></DIV>
<DIV ID="lItem22" NAME="lItem22"></DIV>
<DIV ID="lItem23" NAME="lItem23"></DIV>
<DIV ID="lItem24" NAME="lItem24"></DIV>
<DIV ID="lItem25" NAME="lItem25"></DIV>
<DIV ID="lItem26" NAME="lItem26"></DIV>
<DIV ID="lItem27" NAME="lItem27"></DIV>
<DIV ID="lItem28" NAME="lItem28"></DIV>
<DIV ID="lItem29" NAME="lItem29"></DIV>
<DIV ID="lItem30" NAME="lItem30"></DIV>
<DIV ID="lItem31" NAME="lItem31"></DIV>
<DIV ID="lItem32" NAME="lItem32"></DIV>
<DIV ID="lItem33" NAME="lItem33"></DIV>
<DIV ID="lItem34" NAME="lItem34"></DIV>
<DIV ID="lItem35" NAME="lItem35"></DIV>
<DIV ID="lItem36" NAME="lItem36"></DIV>
<DIV ID="lItem37" NAME="lItem37"></DIV>
<DIV ID="lItem38" NAME="lItem38"></DIV>
<DIV ID="lItem39" NAME="lItem39"></DIV>
<DIV ID="lItem40" NAME="lItem40"></DIV>
<DIV ID="lItem41" NAME="lItem41"></DIV>
<DIV ID="lItem42" NAME="lItem42"></DIV>
<DIV ID="lItem43" NAME="lItem43"></DIV>
<DIV ID="lItem44" NAME="lItem44"></DIV>
<DIV ID="lItem45" NAME="lItem45"></DIV>
<DIV ID="lItem46" NAME="lItem46"></DIV>
Normally you would have this code in the body tag.
To use this on this site - please click here to run the init code.
<a href="javascript:menu_init()">click here</a>
&lt;body ONLOAD="menu_init();">

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *