Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How we can Create Cascading Menu in web application.

Author: DevASP
Download Source Code : 602_Menu.zip

This article is about how you can create a multilevel cascading menu for navigation in web application. Menus have borders, highlight colors and are positioned relative to one another on the fly. You

Steps you will do.

 

Start visual studio and create a new window application. Open the HTML design of your web page and before closing the head tag add the following JavaScript tag and functions.

 

 

<script language="JavaScript">

 

var isDOM = (document.getElementById ? true : false);

var isIE4 = ((document.all && !isDOM) ? true : false);

var isNS4 = (document.layers ? true : false);

function getRef(id) {

if (isDOM) return document.getElementById(id);

if (isIE4) return document.all[id];

if (isNS4) return document.layers[id];

}

function getSty(id) {

return (isNS4 ? getRef(id) : getRef(id).style);

}

 

var popTimer = 0;

 

var litNow = new Array();

function popOver(menuNum, itemNum) {

clearTimeout(popTimer);

hideAllBut(menuNum);

litNow = getTree(menuNum, itemNum);

changeCol(litNow, true);

targetNum = menu[menuNum][itemNum].target;

if (targetNum > 0) {

thisX = parseInt(menu[menuNum][0].ref.left) + parseInt(menu[menuNum][itemNum].ref.left);

thisY = parseInt(menu[menuNum][0].ref.top) + parseInt(menu[menuNum][itemNum].ref.top);

with (menu[targetNum][0].ref) {

left = parseInt(thisX + menu[targetNum][0].x);

top = parseInt(thisY + menu[targetNum][0].y);

visibility = 'visible';

      }

   }

}

function popOut(menuNum, itemNum) {

if ((menuNum == 0) && !menu[menuNum][itemNum].target)

hideAllBut(0)

else

popTimer = setTimeout('hideAllBut(0)', 500);

}

function getTree(menuNum, itemNum) {

 

 

itemArray = new Array(menu.length);

 

while(1) {

itemArray[menuNum] = itemNum;

 

if (menuNum == 0) return itemArray;

itemNum = menu[menuNum][0].parentItem;

menuNum = menu[menuNum][0].parentMenu;

   }

}

 

 

function changeCol(changeArray, isOver) {

for (menuCount = 0; menuCount < changeArray.length; menuCount++) {

if (changeArray[menuCount]) {

newCol = isOver ? menu[menuCount][0].overCol : menu[menuCount][0].backCol;

 

with (menu[menuCount][changeArray[menuCount]].ref) {

if (isNS4) bgColor = newCol;

else backgroundColor = newCol;

         }

      }

   }

}

function hideAllBut(menuNum) {

var keepMenus = getTree(menuNum, 1);

for (count = 0; count < menu.length; count++)

if (!keepMenus[count])

menu[count][0].ref.visibility = 'hidden';

changeCol(litNow, false);

}

 

 

 

function Menu(isVert, popInd, x, y, width, overCol, backCol, borderClass, textClass) {

 

this.isVert = isVert;

 

this.popInd = popInd

 

this.x = x;

this.y = y;

this.width = width;

 

this.overCol = overCol;

this.backCol = backCol;

 

this.borderClass = borderClass;

this.textClass = textClass;

 

this.parentMenu = null;

this.parentItem = null;

 

this.ref = null;

}

 

function Item(text, href, frame, length, spacing, target) {

this.text = text;

this.href = href;

this.frame = frame;

this.length = length;

this.spacing = spacing;

this.target = target;

this.ref = null;

}

 

function writeMenus() {

if (!isDOM && !isIE4 && !isNS4) return;

 

for (currMenu = 0; currMenu < menu.length; currMenu++) with (menu[currMenu][0]) {

 

var str = '', itemX = 0, itemY = 0;

 

for (currItem = 1; currItem < menu[currMenu].length; currItem++) with (menu[currMenu][currItem]) {

var itemID = 'menu' + currMenu + 'item' + currItem;

 

var w = (isVert ? width : length);

var h = (isVert ? length : width);

 

 

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 = '#336699', defBack = '#003366';

var defLength = 22;

menu[0] = new Array();

menu[0][0] = new Menu(false, '', 5, 0, 17, '#669999', '#006666', '', 'itemText');

menu[0][1] = new Item('  File', '#', '', 40, 10, 1);

menu[0][2] = new Item('  Edit', '#', '', 40, 10, 2);

menu[0][3] = new Item('  Help', '#', '', 40, 10, 3);

menu[0][4] = new Item('  Site', 'http://gusnz.cjb.net', '_new', 40, 10, 0);

menu[1] = new Array();

menu[1][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');

menu[1][1] = new Item('Open', '#', '', defLength, 0, 0);

menu[1][2] = new Item('Save', '#', '', defLength, 0, 0);

menu[1][3] = new Item('Reopen', '#', '', defLength, 0, 4);

menu[1][4] = new Item('Exit', '#', '', defLength, 0, 0);

menu[2] = new Array();

menu[2][0] = new Menu(true, '>', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');

menu[2][1] = new Item('Cut', '#', '', defLength, 0, 0);

menu[2][2] = new Item('Copy', '#', '', defLength, 0, 0);

menu[2][3] = new Item('Paste', '#', '', defLength, 0, 0);

menu[3] = new Array();

menu[3][0] = new Menu(true, '<', 0, 22, 80, defOver, defBack, 'itemBorder', 'itemText');

menu[3][1] = new Item('Contents', '#', '', defLength, 0, 0);

menu[3][2] = new Item('Index', '#', '', defLength, 0, 0);

menu[3][3] = new Item('About', '#', '', defLength, 0, 5);

menu[4] = new Array();

menu[4][0] = new Menu(true, '>', 85, 0, 120, '#333366', '#666699', 'crazyBorder', 'crazyText');

menu[4][1] = new Item('Recent Doc 1:<br>Schedule', '#', '', 36, 4, 0);

menu[4][2] = new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7, 0);

menu[4][3] = new Item('Etc. etc...', '#', '', defLength, 0, 0);

menu[5] = new Array();

menu[5][0] = new Menu(true, '>', -85, -17, 80, defOver, defBack, 'itemBorder', 'itemText');

menu[5][1] = new Item('Leftwards!<br>And up!', '#', '', 40, 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);

}

 

 

function moveRoot()

{

 with(menu[0][0].ref) left = ((parseInt(left) < 100) ? 100 : 5);

}

 

</script> 

 

Now add the following style tag.

 

<style>

.itemBorder { border: 1px solid black }

.itemText { text-decoration: none; color: #FFFFFF; font: 12px Arial, Helvetica }

.crazyBorder { border: 2px outset #663399 }

.crazyText { text-decoration: none; color: #FFCC99; font: Bold 12px Arial, Helvetica }

</style>

 

Now add the following HTML code to design your web page and call the above functions.

 

 

<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="writeMenus()" onResize="if (isNS4) nsResizeHandler()">

 

<table bgcolor="#006666" width="100%" border="0" cellpadding="0" cellspacing="0">

<tr><td height="17"><font size="1"> </font></td></tr></table>

 

<p><center>

<font face="arial, helvetica" size"-2">Dont forget to visit Devasp<br>

<a href="http://www.devasp.com">www.devasp.com</a></font>

</center><p>

 

</html>

 

Run your application and check the menu. 

Article Comments
It's Good and useful to me

Posted on 5/13/2010 11:46:25 PM by sureshkumar

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How can we Center Expands the web form.

Disclaimer - Privacy
© 2002-2017 DevASP.net