Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dropdown menu in javascript/css

Status
Not open for further replies.

800320

Technical User
May 26, 2003
14
MY
Hi. I'm using javascript to do menu but it cannot appear on the top of image. Here is the code:
<style>
img.j { position:absolute; top: 200; left:200; z-index:1; }
.menu {position:absolute; top:200; left:200; z-index: 2; }
</style>
<script>
function writeMenus() {
if (!isDOM && !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {
var str = '', itemX = 5, itemY=0;
for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + currMenu + 'item' + currItem;

var w = (isVert ? height : length);
var h = (isVert ? length : height);

if (isDOM || isIE4) {
str += '<div id="' + itemID + '" style="position: absolute; left: ' + itemX + '; top: ' + itemY + '; width: ' + w + '; height: ' + h + '; visibility: inherit; ';
if (backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if (isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX + '" top="' + itemY + '" width="' + w + '" height="' + h + '" visibility="inherit" ';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) str += 'class="' + borderClass + '" ';

str += 'onMouseOver="popOver(' + currMenu + ',' + currItem + ')" onMouseOut="popOut(' + currMenu + ',' + currItem + ')">';

str += '<table width="' + (w - 8) + '" border="0" cellspacing="0" cellpadding="' + (!isNS4 && borderClass ? 3 : 0) + '"><tr><td align="left" height="' + (h - 7) + '">' + '<a class="' + textClass + '" href="' + href + '"' + (frame ? ' target="' + frame + '">' : '>') + text + '</a></td>';
if (target > 0) {

menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

if (popInd) str += '<td class="' + textClass + '" align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? '</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += length + spacing;
}
if (isDOM) {
var newDiv = document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML = str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 'hidden';
}

if (isIE4) {
document.body.insertAdjacentHTML('beforeEnd', '<div id="menu' + currMenu + 'div" ' + 'style="position: absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + currMenu + 'div');
}

if (isNS4) {
ref = new Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref = ref.document[itemName];
}
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 'visible';
}
}

var menu = new Array();
var defOver = '#cccccc', defBack = '#666666';
var defLength = 22;
menu[0] = new Array();

for(i=0;i<=2;i++) {
menu[0] = new Array();
menu[0][0] = new Menu(true, '<', 190, 200, 100, defOver, defBack, 'itemBorder', 'itemText');
menu[0] = new Menu(true, '', 190, 200, 100, '#cccccc', '#666666', '', 'itemText');
menu[0] = new Menu(true, '', 190, 200,100, '#cccccc', '#666666', '', 'itemText');
}

menu[0][1] = new Item('Business_Management', '#', '', 25,0, 1);
menu[0][2] = new Item(' Document__Handling', '#', '',25,0, 2);
menu[0][3] = new Item(' Communication', '#', '', 25, 0, 3);

menu[1] = new Array();
menu[1][0] = new Menu(true, '>', 145, 0, 100, defOver, defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('Form Download ', '#', '', defLength, 0, 0);
menu[1][2] = new Item('Registration', '#', '', defLength, 0, 0);
menu[1][3] = new Item('General Info', '#', '', defLength, 0, 4);

menu[2] = new Array();
menu[2][0] = new Menu(true, '<', 136, 0, 100, defOver, defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('Incoming Doc.', '#', '', defLength, 0, 0);
menu[2][2] = new Item('Outgoing Doc.', '#', '', defLength, 0, 0);
menu[2][3] = new Item('Insisting Doc.', '#', '', defLength, 0, 0);

menu[3] = new Array();
menu[3][0] = new Menu(true, '<', 102, 0, 100, defOver, defBack, 'itemBorder', 'itemText');
menu[3][1] = new Item('Messaging', '#', '', defLength, 0, 0);
menu[3][2] = new Item('IP Fax', '#', '', defLength, 0, 0);
menu[3][3] = new Item('SMS', '#', '', defLength, 0, 0);
menu[3][4] = new Item('Instant Messaging', '#', '', defLength, 0, 0);
menu[4] = new Array();
menu[4][0] = new Menu(true, '>', 95, 0, 70, '#cccccc', '#666666', 'crazyBorder', 'crazyText');
menu[4][1] = new Item('Travellers', '#', '', 25, 0, 0);
menu[4][2] = new Item('Traders', '#', '', 25, 0, 0);

var popOldWidth = window.innerWidth;

nsResizeHandler = new Function('if (popOldWidth != window.innerWidth) location.reload()');

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = clickHandle;

function clickHandle(evt)
{
if (isNS4) document.routeEvent(evt);
hideAllBut(0);
}
</script>
<BODY marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">
<img class="j" src="images/barbelow.jpg">
</body>


Thank you.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top