Solved

hover over image, create a drop down list in javascript

Posted on 2006-11-15
3
225 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

739 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