Solved

hover over image, create a drop down list in javascript

Posted on 2006-11-15
3
219 Views
Last Modified: 2008-02-01
I have built a navigation bar where when you over over an item, it creates a drop down menu. Now I have a few different images all lined up in a certain area. I'd like to when I hover a certain image, create a drop down list of options. Similiar idea but now I am using images instead.

Has anyone ever done this and how would I do it?

I really need to see some sample code to get an idea.

TIA.
0
Comment
Question by:samic400
  • 2
3 Comments
 
LVL 23

Accepted Solution

by:
rama_krishna580 earned 500 total points
ID: 17949356
Hi,

try this...

<html><head></head><body>

Hello World

<table border=1 cellspacing=0 cellpadding=0><tr valign=top><td width=125><div style="position:relative">
<script language="JavaScript">
<!--

var DOM = document.getElementById;
var IE4 = document.all;
var NN4 = document.layers;
var GKO = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false;

var mObj = new Array();

function MENU(style) {
//----------------------------------------------------------------------------------------------------
// Configuration
//----------------------------------------------------------------------------------------------------

  this.style = style ? style : "left";      // menu style (top or left)
  this.floatMenu = true;                    // floating menu (true or false)*

  this.fadeInSpeed = 20;                    // fade-in speed (0 - 30; 0 = no fading)
  this.fadeOutSpeed = 10;                   // fade-out speed (0 - 30; 0 = no fading)
  this.fadeOutDelay = 20;                  // fade-out delay (1/1000 seconds)

  this.imgBlank = "blank.gif";              // path to blank image
  this.imgArrow = "arrow.gif";              // path to arrow image
  this.imgArrowWidth = 7;                   // arrow image width (pixels)

  // main menu configuration:

  this.mainTop = 0;                         // top position (pixels)
  this.mainLeft = 0;                        // left position (pixels)
  this.mainBGColor = "#406080";             // background color OR background image
  this.mainBorderWidth = 10;                // border width (pixels)
  this.mainArrows = true;                   // show sub menu arrows (true or false)
  this.mainOpacity = 100;                   // opacity (0 - 100)**

  this.mainItemWidth = 100;                 // item width (pixels)
  this.mainItemColor = "#6080A0";           // item color
  this.mainItemHilight = "#80A0C0";         // item hilight color
  this.mainItemFont = "Arial, Helvetica";   // font family (CSS-spec)
  this.mainItemFontColor = "white";         // font color
  this.mainItemFontSize = 15;               // font size (pixels)
  this.mainItemAlign = "center";            // text align (left / center / right)
  this.mainItemPadding = 4;                 // text padding (pixels)
  this.mainItemSpacer = 10;                 // space between items (pixels)
  this.mainItem3D = 2;                      // 3D border (pixels); NN4: not supported

  // sub menu(s) configuration:

  this.subBGColor = "#406080";              // background color OR background image
  this.subBorderWidth = 1;                  // border width (pixels)
  this.subArrows = true;                    // show sub menu arrows (true or false)
  this.subOpacity = 90;                     // opacity (0 - 100)**
  this.subOffsetLeft = 10;                  // left offset (pixels)

  this.subItemWidth = 100;                  // item width (pixels)
  this.subItemColor = "#E0F0FF";            // item color
  this.subItemHilight = "#C0D8F0";          // item hilight color
  this.subItemFont = "Arial, Helvetica";    // font family (CSS-spec)
  this.subItemFontColor = "#204060";        // font color
  this.subItemFontSize = 12;                // font size (pixels)
  this.subItemAlign = "left";               // text align (left / center / right)
  this.subItemPadding = 4;                  // text padding (pixels)
  this.subItemSpacer = 1;                   // space between items (pixels)
  this.subItem3D = 0;                       // 3D border (pixels); NN4: not supported

// *  With Safari 1 (Mac OS X) performance was poor, i.e. floating speed was slow. With IE 5 (Mac OS X)
//    floating didn't work properly.
//
// ** Opacity was successfully tested only on Windows XP with IE 6, NN 7 and Firefox 1; NN 7 showed
//    different results, though. It seems that other browsers and systems do not support this feature,
//    i.e. opacity will always be 100 percent.

//----------------------------------------------------------------------------------------------------
// Functions
//----------------------------------------------------------------------------------------------------

  this.mOver = false;
  this.mNr = this.iv = this.timer = 0;
  this.sections = new Array();
  this.items = new Array();
  this.targetWindow = 0;

  this.entry = function(level, height, text, url, target, onClick) {
    var nr = this.items.length;
    var parent = nr - 1;
    this.items[nr] = new makeItem(level, height, text, url, target, onClick);
    if(parent >= 0) {
      if(level == this.items[parent].level + 1) this.items[nr].parent = parent;
      else if(level == this.items[parent].level) this.items[nr].parent = this.items[parent].parent;
      else if(level < this.items[parent].level) {
        for(var i = parent; i >= 0; i--) {
          if(this.items[i].level == level) {
            this.items[nr].parent = this.items[i].parent;
            break;
          }
        }
      }
    }
  }

  this.getObj = function(id, cont) {
    var obj;
    if(DOM) obj = document.getElementById(id).style;
    else if(IE4) obj = document.all[id].style;
    else if(NN4) obj = cont ? document.layers[cont].document.layers[id] : document.layers[id];
    return obj;
  }

  this.getScrTop = function() {
    var scrTop = 0;
    if(document.body && document.body.scrollTop) scrTop = document.body.scrollTop;
    else if(window.pageYOffset) scrTop = window.pageYOffset;
    return scrTop;
  }

  this.setOpacity = function(nr, opacity) {
    if(!NN4) {
      var m = 'section' + this.mNr + '_' + nr;
      var obj = 0;
      if(DOM) obj = document.getElementById(m);
      else if(IE4) obj = document.all[m];
      if(obj) {
        obj.style.filter = 'alpha(opacity=' + opacity + ')';
        obj.style.mozOpacity = '.1';
        if(obj.filters) obj.filters.alpha.opacity = opacity;
        if(!IE4 && obj.style.setProperty) obj.style.setProperty('-moz-opacity', opacity / 100, '');
      }
    }
  }

  this.fadeIn = function(nr) {
    if(this.sections[nr].active) {
      var maxOp = (this.items[this.sections[nr].nr].level < 2) ? this.mainOpacity : this.subOpacity;
      if(this.fadeInSpeed && this.sections[nr].opacity < maxOp) {
        this.sections[nr].opacity += this.fadeInSpeed;
        if(this.sections[nr].opacity > maxOp) this.sections[nr].opacity = maxOp;
        this.setOpacity(nr, this.sections[nr].opacity);
        if(this.sections[nr].timer) clearTimeout(this.sections[nr].timer);
        this.sections[nr].timer = setTimeout('mObj[' + this.mNr + '].fadeIn(' + nr + ')', 1);
      }
      else {
        this.sections[nr].opacity = maxOp;
        this.setOpacity(nr, maxOp);
      }
    }
  }

  this.fadeOut = function(nr) {
    if(this.fadeOutSpeed && this.sections[nr].opacity > 0) {
      this.sections[nr].opacity -= this.fadeOutSpeed;
      if(this.sections[nr].opacity < 0) this.sections[nr].opacity = 0;
      this.setOpacity(nr, this.sections[nr].opacity);
      if(this.sections[nr].timer) clearTimeout(this.sections[nr].timer);
      this.sections[nr].timer = setTimeout('mObj[' + this.mNr + '].fadeOut(' + nr + ')', 1);
    }
    else {
      var obj = this.getObj('section' + this.mNr + '_' + nr);
      obj.visibility = NN4 ? 'hide' : 'hidden';
      this.sections[nr].opacity = 0;
    }
  }

  this.showMenu = function(nr) {
    var obj = this.getObj('section' + this.mNr + '_' + nr);
    if(!this.sections[nr].active) {
      if(this.floatMenu) this.sections[nr].y = this.getScrTop() + this.sections[nr].topY;
      if(IE4) obj.pixelTop = this.sections[nr].y;
      else obj.top = this.sections[nr].y + (DOM ? 'px' : '');
      obj.visibility = NN4 ? 'show' : 'visible';
      this.sections[nr].active = true;
      this.fadeIn(nr);
    }
  }

  this.hideMenu = function(nr) {
    var obj = this.getObj('section' + this.mNr + '_' + nr);
    if(this.sections[nr].active) {
      this.sections[nr].active = false;
      this.fadeOut(nr);
    }
  }

  this.hilight = function(section, item, color) {
    var obj = this.getObj('item' + this.mNr + '_' + item, 'section' + this.mNr + '_' + section);
    if(NN4) obj.bgColor = color;
    else obj.backgroundColor = color;
    if(color == this.subItemColor || color == this.mainItemColor) this.mOver = false;
    else this.mOver = true;
  }

  this.getMenu = function(item, section) {
    if(this.sections[section].active) {
      for(var i = section+1; i < this.sections.length; i++) {
        if(this.sections[i].nr == item) {
          if(!this.sections[i].active) this.showMenu(i);
        }
        else if(this.sections[i].active) this.hideMenu(i);
      }
    }
  }

  this.hideSubs = function(start) {
    if(!this.mOver) for(var i = start; i < this.sections.length; i++) {
      if(this.sections[i].active) this.hideMenu(i);
    }
    this.timer = 0;
  }

  this.jumpURL = function(item) {
    if(this.items[item].url) {
      if(this.items[item].target) {
        if(this.items[item].target.indexOf('parent.') == -1 && this.items[item].target.indexOf('top.') == -1) {
          if(this.targetWindow && !this.targetWindow.closed) this.targetWindow.location.href = this.items[item].url;
          else this.targetWindow = window.open(this.items[item].url, 'targetWindow');
          this.targetWindow.focus();
        }
        else eval(this.items[item].target + '.location.href = "' + this.items[item].url + '"');
      }
      else document.location.href = this.items[item].url;
    }
  }

  this.checkIt = function() {
    var active = false;
    var i;
    if(this.floatMenu) for(i = 0; i < this.sections.length; i++) {
      if(this.sections[i].active) this.floatIt(i, this.sections[i].topY);
    }
    if(!this.mOver && !this.timer) {
      for(i = 0; i < this.sections.length && !active; i++) {
        if(this.sections[i].active) active = true;
      }
      if(active) {
        if(this.fadeOutDelay) this.timer = setTimeout('mObj[' + this.mNr + '].hideSubs(1)', this.fadeOutDelay);
        else this.hideSubs(1);
      }
    }
  }

  this.floatIt = function(nr, topY) {
    var obj = this.getObj('section' + this.mNr + '_' + nr);
    if(obj.visibility == 'visible' || obj.visibility == 'show') {
      var scrTop = this.getScrTop() + topY;
      var elmTop = IE4 ? obj.pixelTop : parseInt(obj.top);
      if(elmTop != scrTop) this.smoothIt(obj, nr, scrTop);
    }
  }

  this.smoothIt = function(obj, nr, scrTop) {
    if(scrTop != this.sections[nr].y) {
      var percent = .1 * (scrTop - this.sections[nr].y);
      if(percent > 0) percent = Math.ceil(percent);
      else percent = Math.floor(percent);
      this.sections[nr].y += percent;
      if(IE4) obj.pixelTop = this.sections[nr].y;
      else if(NN4 || DOM) obj.top = this.sections[nr].y + (DOM ? 'px' : '');
    }
  }

  this.buildItems = function(parent, section) {
    var arrows, link, img, color, itemColor, itemHilight, itemAlign, left;
    var width, height, border, spacer, itemPadding, item3D, topY, clsItem, j;

    for(var i = cnt = 0; i < this.items.length; i++) {
      if(this.items[i].parent == parent) {
        if(this.items[i].level < 2) {
          border = this.mainBorderWidth;
          color = this.mainBGColor;
          spacer = this.mainItemSpacer;
          arrows = this.mainArrows;
          itemColor = this.mainItemColor;
          itemHilight = this.mainItemHilight;
          itemAlign = this.mainItemAlign;
          itemPadding = this.mainItemPadding;
          item3D = this.mainItem3D;
          clsItem = 'clsMainItem' + this.mNr;
          width = this.mainItemWidth + itemPadding*2;
          if(this.style == 'top') left = border + (width + item3D*2 + spacer) * cnt++;
          else left = border;
        }
        else {
          border = this.subBorderWidth;
          color = this.subBGColor;
          spacer = this.subItemSpacer;
          arrows = this.subArrows;
          itemColor = this.subItemColor;
          itemHilight = this.subItemHilight;
          itemAlign = this.subItemAlign;
          itemPadding = this.subItemPadding;
          item3D = this.subItem3D;
          clsItem = 'clsSubItem' + this.mNr;
          width = this.subItemWidth + itemPadding*2;
          left = border;
        }
        height = this.items[i].height + itemPadding*2;

        if(!topY) topY = border;
        link = 'javascript:mObj[' + this.mNr + '].jumpURL(' + i + ')';
        if(arrows && i+1 < this.items.length && this.items[i+1].level > this.items[i].level) img = this.imgArrow;
        else img = '';

        for(j = 0; j < this.sections.length; j++) {
          if(this.sections[j].nr == i+1) {
            this.sections[j].topY = this.sections[section].topY + topY;
            this.sections[j].y = this.sections[j].topY;
          }
        }

        if(IE4 || DOM) document.write('<div id="item' + this.mNr + '_' + i + '" style="position:absolute' +
                                      '; top:' + topY + 'px' +
                                      '; left:' + left + 'px' +
                                      '; width:' + (GKO ? width : width + item3D*2) + 'px' +
                                      '; height:' + (GKO ? height : height + item3D*2) + 'px' +
                                      (itemColor ? '; background-color:' + itemColor : '') +
                                      (item3D ? '; border:' + item3D + 'px outset white' : '') +
                                      '; z-index:1">');
        else if(NN4) document.write('<layer id="item' + this.mNr + '_' + i + '"' +
                                    ' top=' + topY +
                                    ' left=' + left +
                                    ' width=' + (GKO ? width : width + item3D*2) +
                                    ' height=' + (GKO ? height : height + item3D*2) +
                                    (itemColor ? ' bgcolor=' + itemColor : '') +
                                    ' z-index=1>');
        document.write('<table border=0 cellspacing=0 cellpadding=' + itemPadding +
                       ' width=' + width + ' height=' + height + '><tr>' +
                       '<td class="' + clsItem + '" align="' + itemAlign + '">' +
                       this.items[i].text + '</td>' +
                       (img ? '<td width=' + this.imgArrowWidth + ' align=right><img src="' + img + '" width=' + this.imgArrowWidth + '></td>' : '') +
                       '</tr></table>');
        if(IE4 || DOM) document.write('</div>');
        else if(NN4) document.write('</layer>');

        if(IE4 || DOM) document.write('<div style="position:absolute' +
                                      '; top:' + topY + 'px' +
                                      '; left:' + left + 'px' +
                                      '; z-index:2">');
        else if(NN4) document.write('<layer' +
                                    ' top=' + topY +
                                    ' left=' + left +
                                    ' z-index=2>');
        document.write('<a href="' + link + '" ' +
                       'onMouseOver="mObj[' + this.mNr + '].hilight(' + section + ', ' + i + ', \'' + itemHilight + '\'); ' +
                       'mObj[' + this.mNr + '].getMenu(' + (i+1) + ', ' + section + '); ' +
                       'window.status=\'' + this.items[i].url + '\'; return true" ' +
                       'onMouseOut="mObj[' + this.mNr + '].hilight(' + section + ', ' + i + ', \'' + itemColor + '\'); ' +
                       'window.status=\'\'" ' + (this.items[i].onClick ? 'onClick="' + this.items[i].onClick + '" ' : '') +
                       'onFocus="if(this.blur) this.blur()">' +
                       '<img src="' + this.imgBlank + '" border=0 width=' + (width + item3D*2) + ' height=' + (height + item3D*2) + '></a>');
        if(IE4 || DOM) document.write('</div>');
        else if(NN4) document.write('</layer>');

        if(this.items[i].level > 1 || this.style != 'top') topY += height + item3D*2 + spacer;
      }
    }
  }

  this.buildSections = function() {
    document.write('<style> ' +
                   '.clsMainItem' + this.mNr + ' { color:' + this.mainItemFontColor +
                   '; font-family:' + this.mainItemFont +
                   '; font-size:' + this.mainItemFontSize + 'px; } ' +
                   '.clsSubItem' + this.mNr + ' { color:' + this.subItemFontColor +
                   '; font-family:' + this.subItemFont +
                   '; font-size:' + this.subItemFontSize + 'px; } ' +
                   '</style>');

    var width, border, color, itemPadding, item3D, spacer, left, height, level, section, cnt, j;
    var mainHeight = 0;
    var bgImg = '';

    for(var i = 0; i < this.items.length; i++) {
      if(!i || this.items[i].level > this.items[i-1].level) {
        this.sections[this.sections.length] = new makeSection(i, this.items[i].level, this.mainTop);
      }
    }

    for(i = cnt = 0; i < this.sections.length; i++) {
      section = this.sections[i].nr;
      level = this.sections[i].level;
      if(level < 2) {
        border = this.mainBorderWidth;
        color = this.mainBGColor;
        itemPadding = this.mainItemPadding;
        item3D = this.mainItem3D;
        spacer = this.mainItemSpacer;
        width = (this.style == 'top') ? 0 : this.mainItemWidth + border*2 + itemPadding*2 + item3D*2;
        left = this.mainLeft;
      }
      else {
        border = this.subBorderWidth;
        color = this.subBGColor;
        itemPadding = this.subItemPadding;
        item3D = this.subItem3D;
        spacer = this.subItemSpacer;
        width = this.subItemWidth + border*2 + itemPadding*2 + item3D*2;
        if(this.style == 'top') {
          if(level == 2) for(j = cnt = 0; j < section; j++) {
            if(this.items[j].level == 1) cnt++;
          }
          left = this.mainLeft + this.mainBorderWidth + (this.mainItemWidth + this.mainItemPadding*2 + this.mainItem3D*2 + this.mainItemSpacer) * (cnt-1);
          left += (level-2) * (width - this.subOffsetLeft);
        }
        else left = this.mainLeft + this.mainItemWidth - this.subOffsetLeft + ((this.mainBorderWidth+this.mainItemPadding+this.mainItem3D)*2) + (level-2) * (width-this.subOffsetLeft);
      }
      height = 0;

      for(j = section; j < this.items.length; j++) {
        if(this.items[j].parent == this.items[section].parent) {
          if(level < 2 && this.style == 'top') {
            width += this.mainItemWidth + itemPadding*2 + item3D*2 + spacer;
            if(this.items[j].height > height) height = mainHeight = this.items[j].height;
          }
          else height += this.items[j].height + itemPadding*2 + item3D*2 + spacer;
        }
      }
      if(this.style == 'top') {
        if(level < 2) {
          width += border*2 - spacer;
          height += itemPadding*2 + item3D*2 + spacer;
          mainHeight += border + itemPadding*2 + item3D*2;
        }
        else if(level == 2) {
          this.sections[i].topY += mainHeight;
          this.sections[i].y = this.sections[i].topY;
        }
      }
      height += border*2 - spacer;

      if(color.search(/\.(jpg|jpeg|jpe|gif|png)$/i) != -1) {
        bgImg = color;
        color = '';
      }
      else bgImg = this.imgBlank;

      this.sections[i].width = width;
      this.sections[i].height = height;

      if(IE4 || DOM) document.write('<div id="section' + this.mNr + '_' + i + '" style="position:absolute' +
                                    '; top:' + this.sections[i].topY + 'px' +
                                    '; left:' + left + 'px' +
                                    '; width:' + width + 'px' +
                                    '; height:' + height + 'px' +
                                    (color ? '; background-color:' + color : '') +
                                    '; z-index:' + i +
                                    '; visibility:hidden">');
      else if(NN4) document.write('<layer id="section' + this.mNr + '_' + i + '"' +
                                  ' top=' + this.sections[i].topY +
                                  ' left=' + left +
                                  ' width=' + width +
                                  ' height=' + height +
                                  (color ? ' bgcolor=' + color : '') +
                                  ' z-index=' + i +
                                  ' visibility="hide">');

      document.write('<a href="#" onMouseOver="mObj[' + this.mNr + '].mOver=true" onMouseOut="mObj[' + this.mNr + '].mOver=false">' +
                     '<img src="' + bgImg + '" border=0 width=' + this.sections[i].width +
                     ' height=' + this.sections[i].height + '></a>');

      this.buildItems(section-1, i);

      if(IE4 || DOM) document.write('</div>');
      else if(NN4) document.write('</layer>');

      if(this.mainOpacity && level < 2) this.setOpacity(i, this.mainOpacity);
      else if(this.subOpacity && level > 1) this.setOpacity(i, this.subOpacity);
    }
  }

  this.create = function() {
    this.mNr = mObj.length;
    if(mObj[this.mNr] = this) {
      this.buildSections();
      this.showMenu(0);
      if(this.iv) clearInterval(this.iv);
      this.iv = setInterval('mObj[' + this.mNr + '].checkIt()', 1);
    }
    else alert("Could not create menu!");
  }

  //-------------------------------------------------------------------------------------
  // Arguments: position level 1, [position level 2], ... [position level n]
  // Example:   jumpTo(1, 3, 2, 1) ==> this jumps to menu item 1.3.2.1
  // Note:      does not work with NN 4 (who knows why?)
  //
  this.jumpTo = function() {
    var pos, aktPos;
    var item = 0;
    var level = 1;
    if(!arguments) var arguments = this.jumpTo.arguments;
    for(i = 0; i < arguments.length; i++, level++) {
      pos = arguments[i];
      for(aktPos = 0; item < this.items.length && aktPos < pos; item++) {
        if(this.items[item].level == level) aktPos++;
      }
    }
    if(item) {
      item--;
      if(this.items[item].onClick) eval(this.items[item].onClick);
      this.jumpURL(item);
    }
  }
  //-------------------------------------------------------------------------------------
}

function makeItem(level, height, text, url, target, onClick) {
  this.level = level;
  this.height = height;
  this.text = text;
  this.url = url;
  this.target = target;
  this.onClick = onClick;
  this.parent = -1;
}

function makeSection(nr, level, topY) {
  this.nr = nr;
  this.level = level;
  this.topY = topY;
  this.active = false;
  this.y = topY;
  this.width = 0;
  this.height = 0;
  this.timer = 0;
  this.opacity = 0;
}

//----------------------------------------------------------------------------------------------------


var menu1 = new MENU("top");
menu1.floatMenu = false;
menu1.mainArrows = false;
menu1.mainBGColor = "#D08080";
menu1.mainBorderWidth = 1;
menu1.mainItemWidth = 115;
menu1.mainItemFontSize = 12;
menu1.mainItem3D = 0;
menu1.mainItemColor = "#FFA0A0";
menu1.mainItemFontColor = "black";
menu1.mainItemHilight = "#FF8080";
menu1.subBGColor = "#D08080";
menu1.subItemWidth = 115;
menu1.subItemColor = "#FFA0A0";
menu1.subItemHilight = "#FF8080";
menu1.entry(1, 20, "Main Item 1");
menu1.entry(2, 20, "Sub Item 1.1");
menu1.entry(2, 20, "Sub Item 1.2");
menu1.entry(2, 20, "Sub Item 1.3");
menu1.create();

document.write('</div></td><td width=125><div style="position:relative">');

var menu2 = new MENU("top");
menu2.floatMenu = false;
menu2.mainArrows = false;
menu2.mainBGColor = "#60B060";
menu2.mainBorderWidth = 1;
menu2.mainItemWidth = 115;
menu2.mainItemFontSize = 12;
menu2.mainItem3D = 0;
menu2.mainItemColor = "#A0D0A0";
menu2.mainItemFontColor = "black";
menu2.mainItemHilight = "#80D080";
menu2.subBGColor = "#60B060";
menu2.subItemWidth = 115;
menu2.subItemColor = "#A0D0A0";
menu2.subItemHilight = "#80D080";
menu2.entry(1, 20, "Main Item 2");
menu2.entry(2, 20, "Sub Item 2.1");
menu2.entry(2, 20, "Sub Item 2.2");
menu2.entry(2, 20, "Sub Item 2.3");
menu2.create();

document.write('</div></td><td width=125><div style="position:relative">');

var menu3 = new MENU("top");
menu3.floatMenu = false;
menu3.mainArrows = false;
menu3.mainBGColor = "#80A0D0";
menu3.mainBorderWidth = 1;
menu3.mainItemWidth = 115;
menu3.mainItemFontSize = 12;
menu3.mainItem3D = 0;
menu3.mainItemColor = "#A0C0FF";
menu3.mainItemFontColor = "black";
menu3.mainItemHilight = "#90B0FF";
menu3.subBGColor = "#80A0D0";
menu3.subItemWidth = 115;
menu3.subItemColor = "#A0C0FF";
menu3.subItemHilight = "#90B0FF";
menu3.entry(1, 20, "Main Item 3");
menu3.entry(2, 20, "Sub Item 3.1");
menu3.entry(2, 20, "Sub Item 3.2");
menu3.entry(2, 20, "Sub Item 3.3");
menu3.create();

document.write('</div></td><td width=125><div style="position:relative">');

var menu4 = new MENU("top");
menu4.floatMenu = false;
menu4.mainArrows = false;
menu4.mainBGColor = "#C0C080";
menu4.mainBorderWidth = 1;
menu4.mainItemWidth = 115;
menu4.mainItemFontSize = 12;
menu4.mainItem3D = 0;
menu4.mainItemColor = "#E0E0A0";
menu4.mainItemFontColor = "black";
menu4.mainItemHilight = "#D0D080";
menu4.subBGColor = "#C0C080";
menu4.subItemWidth = 115;
menu4.subItemColor = "#E0E0A0";
menu4.subItemHilight = "#D0D080";
menu4.entry(1, 20, "Main Item 4");
menu4.entry(2, 20, "Sub Item 4.1");
menu4.entry(2, 20, "Sub Item 4.2");
menu4.entry(2, 20, "Sub Item 4.3");
menu4.create();
//-->
</script>

</div></td></tr></table>
</body>
</html>

R.K
0
 
LVL 13

Author Comment

by:samic400
ID: 17955200
Can I dump this into a file and it will work as is? I'm not sure what it is doing.
0
 
LVL 13

Author Comment

by:samic400
ID: 17955221
This works perfect. Thank you.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now