|
ASP Driven DHTML Slider Menus By Nannette Thacker - 08/19/2000
This article has now been updated. Since it was written in 1999, many
changes have been made to the source code. Please see the UPDATED PART II
article: This article remains for reference purposes only. -- Nannette How would you like to create a slick DHTML menu like this for your web site? As I was surfing the net, I found a cool DHTML menu at: http://www.association.org/Start/dynamic.asp. (It's no longer there folks.) I snagged the javascript functions and the cascading style sheets and decided to revamp the code with some VBScript functions to make it fully customizable and ASP driven.
DHTML is browser dependent. Sorry, folks, but Netscape's support of DHTML is stinky, so I'm only showing how to support this in IE. The the first thing you will need to do is check your browser version:
<%
if Session("DHTML") <> 1 and Session("DHTML") <> 2 then
Dim bc
Set bc = Server.CreateObject("MSWC.BrowserType")
if bc.Browser <> "IE" then
Session("DHTML") = 2
else
if bc.Majorver >= 4 then
Session("DHTML") = 1
else
Session("DHTML") = 2
end if
end if
Set bc = Nothing
end if
%>
If the Session("DHTML") variable hasn't been populated yet, this will
check the browser version and set whether the browser supports DHTML or not.Next, you will need a body tag which utilizes the Session("DHTML") variable, such as this:
<%
if Session("DHTML") = 1 then
Dim intMaxMenus, intMenuSubMax, intLineDepth, intClearDepth
Dim intContainerDepth, intMenuWidth, intContainerWidth
intMaxMenus = 2 ' start at 0 count
intMenuSubMax = 10 ' start at 1 count
intLineDepth = 18 ' if view fonts medium, 18 is good
' depth to clear at bottom of the menu, add 1 for intMaxMenu start with 0
intClearDepth = intLineDepth * (intMenuSubMax + (intMaxMenus + 1))
' how deep should the container be? add 10 gutter
intContainerDepth = intClearDepth + 10
intMenuWidth = 375
intContainerWidth = intMenuWidth + 12
%>
<!--#include VIRTUAL ="/articles/include/dhtmlmenu_include.asp" -->
<!--#include VIRTUAL ="/articles/include/dhtmlmenu_ASPfuncs.asp" -->
<link rel="stylesheet" href="/articles/include/lnkstyle.css">
<BODY background="/images/bg.gif" onload="Setup();"
link="#FF8000" vlink="#DAA520" alink="#FF8000"
TEXT="#000000">
<%else%>
<BODY background="/images/bg.gif"
link="#FF8000" vlink="#DAA520" alink="#FF8000"
TEXT="#000000">
<%end if%>
In the above code, you set your default values to be used by your menu. If you have more than
one menu on your site, you can change the default values for the menu, and use the same
include files shown, without making any alterations to the functions.intMaxMenus defines how many headers are in your main menu. Mine has 3, so I set it to 2. The count starts at 0, and is used in Javascript for setting up the arrays. intMenuSubMax defines the maximum number of submenus under one header. At the time of this writing, my largest menu had 10 submenus, so I've set the intMenuSubMax count to 10. This count starts at 1. intLineDepth sets the leading or depth between lines. I've set this to 18, which looks good if the "View Fonts" setting is set to "Medium." intClearDepth, intContainerDepth, and intContainerWidth are calculations which should not require alteration, but are dependent upon your previous values entered. intMenuWidth is the width of the menu. I don't want my text to wrap, so I've set my menu rather wide. If you are using a menu with only a few words, you'll want to set this much smaller. You will then want to define your menu items based on if the browser accepts DHTML or not.
<%
if Session("DHTML") = 1 then
%>
<!--#include VIRTUAL ="/articles/include/dhtml_menu.asp" -->
<%
else
%>
<!--#include VIRTUAL ="/articles/include/html_menu.asp" -->
<%
end if
%>
The dhtml_menu.asp file includes the setup of your menu items:
<div id="idMenuContainer" class="mnContainer" style="width:<%=intContainerWidth%>;height:<%=intContainerDepth%>;"> <% Dim NewWin NewWin = "true" ' open in new window Dim SameWin SameWin = "false" ' open in same window Response.write PrintMenuHeader(1,"Articles by Nannette") Response.write PrintMenuSub(1,1,"/path/file.asp","Name to Display",SameWin) Response.write PrintMenuSub(1,2,"/path/file.asp","Name to Display",SameWin) Response.write PrintMenuSub(1,3,"/path/file.asp","Name to Display",SameWin) PrintMenuLoop 1,4 'displays blanks to the max Response.Write "</div>" Response.write PrintMenuHeader(2,"Web Sites by Nannette") Response.write PrintMenuSub(2,1,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,2,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,3,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,4,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,5,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,6,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,7,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,8,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,9,"http://www.site.com","Web Site Name",NewWin) Response.write PrintMenuSub(2,10,"http://www.site.com","Web Site Name",NewWin) Response.Write "</div>" Response.write PrintMenuHeader(3,"Home") Response.write PrintMenuSub(3,1,"/articles/","Home",SameWin) Response.write PrintMenuSub(3,2,"http://www.shiningstar.net/","Shining Star Home",NewWin) PrintMenuLoop 3,3 ' start at 3 and print blanks to the max Response.Write "</div>" Response.Write "</div>" %>First, you have created the container class for your menu. It will use the container width and depth variables which were previously defined for determining the size. Next you will call the PrintMenuHeader() function and pass the menu number, along with the menu header to display. Notice this is where our setup variables are used to build the menu. In the actual code included at the bottom of this page, the strPrintThis line is only on two lines. The code is the same, however, I broke it on multiple lines to make it readable in your browser.
Function PrintMenuHeader(intMenuNum,strMenuName)
Dim strPrintThis
Dim intIndex
intIndex = intMenuNum + 2
Dim intTop ' where is the top
intTop = ((intMenuNum - 1) * intLineDepth)+ 4
strPrintThis = "<div id=""id" & intMenuNum & "_Container"" "
strPrintThis = strPrintThis & "class=""mnSection"" style=""width:"
strPrintThis = strPrintThis & intMenuWidth & ";top:" & intTop
strPrintThis = strPrintThis & ";left:0;z-index:" & intIndex
strPrintThis = strPrintThis & ";"" onclick=""showMenu(" & Cint(intMenuNum)-1 & ");"">"
strPrintThis = strPrintThis & "<div id=""idMn" & intMenuNum
strPrintThis = strPrintThis & "_"" class=""mnTitle"" style=""width:"
strPrintThis = strPrintThis & intMenuWidth & ";top:0;left:5;"">"
strPrintThis = strPrintThis & strMenuName & "</div>"
PrintMenuHeader = strPrintThis
end function
The PrintMenuHeader function will create two lines that looks like this:
<div id="id1_Container" class="mnSection" style="width:375;top:4;left:0;z-index:3;" onclick="showMenu(0);"> <div id="idMn1_" class="mnTitle" style="width:375;top:0;left:5;">Articles by Nannette</div>Then you will call the PrintMenuSub() function, passing the menu number, the sub menu number, the URL, the Name to Display, and whether this is to be opened in a New Window or the Same Window.
Function PrintMenuSub(intMenuNum,intSubNum,strUrl,strMenuName,bNewWin)
Dim strPrintThis
strPrintThis = "<div id=""id" & intMenuNum & "_"
strPrintThis = strPrintThis & intSubNum & """ class=""mnItem"" style=""width:"
strPrintThis = strPrintThis & intMenuWidth & ";top:"
strPrintThis = strPrintThis & Cint(intLineDepth) * Cint(intSubNum) & ";left:5;"""
strPrintThis = strPrintThis & "onmouseover=""mOver(this);"" onmouseout=""mOut(this);"""
strPrintThis = strPrintThis & "onclick=""navTo(this,'" & strUrl & "'," & bNewWin
strPrintThis = strPrintThis & ");""> " & strMenuName & "</div>"
PrintMenuSub = strPrintThis
end function
The PrintMenuSub function will create one line that looks like this:
<div id="id1_1" class="mnItem" style="width:375;top:18;left:5;"onmouseover="mOver(this);" onmouseout="mOut(this);"onclick="navTo(this,'/path/usingtemplates.asp',false);"> Setting Up Your Own ASP Development Templates</div>For each menu, if the submenu does not go to the maximum defined, you will need to call the PrintMenuLoop, passing the menu number, and the next sub menu number. The PrintMenuLoop will automatically create a submenu for each blank menu up to the maximum.
Sub PrintMenuLoop(intMenuNum,intSubNum) Dim ctr ctr = intSubNum Do while ctr <= intMenuSubMax Response.write PrintMenuBlank(intMenuNum,ctr) ctr=ctr + 1 Loop End Sub Function PrintMenuBlank(intMenuNum,intSubNum) Dim strPrintThis strPrintThis="<div id=" "id" & intMenuNum & "_" & _ intSubNum & """ class mnItemBlank"" style width:" & _ intMenuWidth & ";top:" & Cint(intLineDepth) * Cint(intSubNum) & _ ";left:5""></div>" PrintMenuBlank="strPrintThis" End functionThat is all you need to know to get started. Here are the contents of the #include files with .txt extensions so they will display. Rename the files as shown below. Please use the code in the text files, rather than on this page in case I formatted them incorrectly while attempting to display them. dhtmlmenu_ASPfuncs.asp - developed by Nannette. dhtmlmenu_include.asp - originally found at http://www.association.org/Start/dynamic.asp with ASP values added by Nannette. lnkstyle.css - found at http://www.association.org/Start/dynamic.asp with minor changes made by Nannette.* *The cascading style for the menu container came with the .mnContainer POSITION set to absolute. I altered this to make the POSITION relative. This allows me to insert it at a given position on the page.
.mnContainer
{
BACKGROUND-COLOR: #c3c3c3;
LEFT: 11px;
POSITION: relative;
TOP: 15px;
Z-INDEX: 2
}
If you want to see straight Javascript without ASP,
all you have to do is view the source.
|
|
