Generate Server Side Dropdown Menues By Robbe D. Morris Printer Friendly Version

Robbe & Melisa Morris

There a dozens of examples of how to create client side drop down menus in JavaScript.  At EggHeadCafe.com, we really needed a simpler version that we could generate from server side ASP code.  The code example you see below could easily be modified to pull the menu items out of a database file or XML.  Since our values are fairly static, we hard coded the array values.

Feel free to take the code and modify it to fit your needs...

<% Response.Buffer = True Response.AddHeader "cache-control", "private" Response.AddHeader "pragma", "no-cache" Response.ExpiresAbsolute = #January 1, 1990 00:00:01# Response.Expires=0 Sub WriteTopMenuDropDown(sURL,nListNum) dim sArray dim nTot Select Case nListNum Case 1 nTot = 5 Redim sArray(1,nTot) sArray(0,1) = sURL & "/default.asp" sArray(1,1) = "Home Page" sArray(0,2) = sURL & "/aboutus.asp" sArray(1,2) = "About Us" sArray(0,3) = sURL & "/login/default.asp" sArray(1,3) = "Create/Update Profile" sArray(0,4) = sURL & "/services.asp" sArray(1,4) = "Development Services" sArray(0,5) = sURL & "/searchcontent.asp" sArray(1,5) = "Search Content" Case 2 nTot = 2 Redim sArray(1,nTot) sArray(0,1) = sURL & "/webservices.asp" sArray(1,1) = "Web Services" sArray(0,2) = sURL & "/notificationservicesubscribe.asp" sArray(1,2) = "Critical Updates" Case 3 nTot = 5 Redim sArray(1,nTot) sArray(0,1) = sURL & "/articles.asp" sArray(1,1) = "Articles" sArray(0,2) = sURL & "/codeexamples.asp" sArray(1,2) = "Code Examples" sArray(0,3) = sURL & "/tipstricks.asp" sArray(1,3) = "Tips & Tricks" sArray(0,4) = sURL & "/reviews.asp" sArray(1,4) = "Reviews" sArray(0,5) = sURL & "/software.asp" sArray(1,5) = "Software" Case 4 nTot = 5 Redim sArray(1,nTot) sArray(0,1) = sURL & "/forums/default.asp" sArray(1,1) = "Forum Listing" sArray(0,2) = sURL & "/forums/forumtree.asp?ID=2" sArray(1,2) = "C#" sArray(0,3) = sURL & "/forums/forumtree.asp?ID=3" sArray(1,3) = "JavaScript" sArray(0,4) = sURL & "/forums/forumtree.asp?ID=4" sArray(1,4) = "XML/XSL" sArray(0,5) = sURL & "/forums/forumtree.asp?ID=5" sArray(1,5) = "ASP" End Select WriteTopMenuList "TopList",nListNum,sArray,nTot End Sub Sub WriteTopMenu(fIncludeURL) dim sURL dim sT1 sT1 = "<td align=left valign=top><a href=# target=_self onMouseOver=ShowMenuList" if fIncludeURL = 1 then sURL = "http://www.eggheadcafe.com" RW vbcrlf & vbcrlf & vbcrlf & vbcrlf & vbcrlf RW "<table id=tblTopMenu width='70%' border=0 cellspacing=0 cellpadding=0 bgcolor=#FFFFFF height=5 align=center>" RW "<tr bgcolor=#858BFD>" RW sT1 & "(event,1); ><img id=imgTop_1 src=" & sURL & "/images/top_main.jpg border=0></a></td>" RW sT1 & "(event,2); ><img id=imgTop_2 src=" & sURL & "/images/top_services.jpg border=0></a></td>" RW sT1 & "(event,3); ><img id=imgTop_3 src=" & sURL & "/images/top_resources.jpg border=0></a></td>" RW sT1 & "(event,4); ><img id=imgTop_4 src=" & sURL & "/images/top_forums.jpg border=0></a></td>" RW "</tr>" RW "</table>" WriteTopMenuDropDown sURL,1 WriteTopMenuDropDown sURL,2 WriteTopMenuDropDown sURL,3 WriteTopMenuDropDown sURL,4 RW vbcrlf & vbcrlf & vbcrlf & vbcrlf & vbcrlf End Sub Sub WriteTopMenuList(sListName,nListNum,sArray,nTot) Dim nCnt RWJS "<div id=Menu_" & sListName & "_" & nListNum RW " style='visibility:hidden;position:absolute; left:0;top:0;z-index:99' >" RWJS "<table width=160 cellspacing=0 cellpadding=0 align=left bgcolor=#858BFD " RWJS " id=tblMainList_" & nListNum & " bordercolor=#C5C8FE border=1" RWJS " onMouseOut=HideMenuListItem('" & nListNum & "'); " RWJS " onMouseOver=ShowMenuListItem('" & nListNum & "'); " RW " >" RW "<TR><TD ALIGN=LEFT>" RW "<table width=160 cellspacing=0 cellpadding=0 align=left bgcolor=#858BFD id=tblList_" & nListNum & " >" For nCnt = 1 To nTot RW "<tr><td align=left > " RW "<a href=" & sArray(0,nCnt) & " target=_self class=dropdownroll > " RW sArray(1,nCnt) & "</a> " RW "</td></tr>" Next RW "</table>" RW "</td></tr></table>" RW "</div>" End Sub Sub RW(sVal) Response.Write sVal & vbcrlf End Sub Sub RWJS(sVal) Response.Write sVal End Sub Sub WriteTopMenuJS() RWJS "<SCRIPT language=JavaScript>" RWJS " function ShowMenuList(evt,nListNum) " RWJS " { " RWJS " var sList = 'Menu_TopList_' + nListNum; " RWJS " var sMenu = 'divTop_' + nListNum; " RWJS " var src = event.srcElement; " RWJS " var y = src.offsetTop + src.offsetHeight; " RWJS " var x = window.event.x; " RWJS " if (x > 100) { x = x-30;} " RWJS " if (document.getElementById(sList).style.visibility == 'visible') " RWJS " { document.getElementById(sList).style.visibility = 'hidden'; } " RWJS " else " RWJS " { " RWJS " if (nListNum == 1) { x=110;} " RWJS " if (nListNum == 2) { x=275;} " RWJS " if (nListNum == 3) { x=395;} " RWJS " if (nListNum == 4) { x=544;} " RWJS " document.getElementById(sList).style.visibility = 'visible'; " RWJS " document.getElementById(sList).style.posLeft = x; " RWJS " document.getElementById(sList).style.posTop = y +1; " RWJS " } " RWJS " HideMenuLists(nListNum); " RWJS " }" RWJS " function HideMenuListItem(nListNum) " RWJS " { document.getElementById('Menu_TopList_' + nListNum).style.visibility = 'hidden'; } " RWJS " function ShowMenuListItem(nListNum) " RWJS " { document.getElementById('Menu_TopList_' + nListNum).style.visibility = 'visible'; } " RWJS " function HideMenuLists(nListNum) " RWJS " { for (i=1;i<=4;i++) " RWJS " { if (i != nListNum) { HideMenuListItem(i); } }" RWJS " }" RWJS "</SCRIPT>" End Sub ' Test page code begins here...You may take this out for your pages... RW "<html>" RW "<LINK href=/eggheadcafe.css rel=Stylesheet>" RW "<BODY bottomMargin=0 bgColor=#ffffff leftMargin=0 topMargin=0 rightMargin=0 marginwidth=0 marginheight=0>" RW "<TABLE cellSpacing=0 cellPadding=0 width=770 border=0 >" RW "<tr><td align=center width='100%' bgColor=#858BFD valign=bottom >" WriteTopMenuJS WriteTopMenu 1 RW "</TD></tr>" RW "</table>" RW "</BODY>" RW "</HTML>" %>

	Robbe has been a Microsoft MVP in C# since 2004.  He is also the co-founder of EggHeadCafe which provides .NET articles, book reviews, software reviews, and software download and purchase advice.