Web Application Development Advice & How To
Active Server Pages Development Advice & How To

Shining Star Services LLC
 
Shining Star Services
Articles
ASP.NET
ASP.net Articles
ASP, DHTML, HTML
HTML Tutorial
Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!
ASP Driven DHTML Slider Menus REVISITED One Year Later! Part II
ASP Driven DHTML Slider Menus
ASP Driven HTML Outlines
Reusing Code with ASP Include Files and Subroutines
Security
Hacker Query Check
.htr IIS Security Issue
Databases, Cookies
Functions to Open a Database Connection and Record Set
Setting Up and Using OraSession to Manage Your Oracle Database Objects
Storing Non-Durable Data for Cookie-less Sessions
Javascript
Smart Popups
Javascript: Validate Numeric Fields
Javascript Confirm Form Submission
Javascript Dynamic Text Area Counter
Javascript: Check All and Uncheck All Check Boxes
Javascript Field Validations -- Client Side Scripting
Miscellaneous
Tree Select Demo
Adobe Extension Manager
Scandisk & Defrag Pointers
Standards & Style
Setting Up Your Own ASP Development Templates
Creating a Project Template for Estimations of Time, Tasks, and Resources
To Host or Not To Host
ASP Naming Conventions
HTML Naming Conventions & Visual Interdev HTML Generation
Working with and in spite of the Visual Interdev Design Mode
Commenting Your ASP Source Code
Letters!
Reader Letters

Articles Home

Shining Star Services

 
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:
ASP Driven DHTML Slider Menus Revisited! -- A Year Later

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.

Newest Articles!
 Hacker Query Check
 Tree Select Demo
 Adobe Extension Manager
 Scandisk & Defrag Pointers
 .htr IIS Security Issue
Articles: ASP, DHTML, HTML
 HTML Tutorial
 Auto-select an Element from a Menu or Scrolling List & Save Keystrokes!
 ASP Driven DHMTL Slider Menus REVISITED One Year Later! Part II
 ASP Driven DHMTL Slider Menus
 ASP Driven HTML Outlines
 Reusing Code with ASP Include Files and Subroutines
 .htr IIS Security Issue
Articles: Databases, Cookies
 Functions to Open a Database Connection and Record Set
 Setting Up and Using OraSession to Manage Your Oracle Database Objects
 Storing Non-Durable Data for Cookie-less Sessions
Articles: JavaScripting with ASP
 Smart Popups
 JavaScript: Validate Numeric Fields
 Javascript Confirm Form Submission
 JavaScript: Dynamic Text Area Counter
 JavaScript: Check and Uncheck All Checkboxes
 JavaScript Field Validations -- Client Side Scripting
Articles: Miscellaneous Topics
 Scandisk & Defrag Pointers
Articles: Programming Standards, Style, & Processes
 Setting Up Your Own ASP Development Templates
 Creating a Project Template for Estimations
 To Host or Not To Host -- Service Provider vs. Purchasing Your Own
 ASP Naming Conventions
 HTML Naming Conventions & Visual Interdev HTML Generation
 Working with and in spite of the Visual Interdev Design Mode
 Commenting Your ASP Source Code
Web Sites by Nannette
 Christian Singles Dating
 Gifted Church
 Techno Geek Wannabees - Computer How To and Source Code
 BBS Door Games & Utilities
 Shining Star Book Store
 Wichita SDA Church
 Kids Karnival - Stories, Games, and Fun for the Kids!
Home
 The ASP Warrior Home Page
 Shining Star Services


First off: Folks, don't track me down and ask me questions. I'm sorry, but I just don't have time for one on one help.

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 function 
That 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.



ChristianSinglesDating

ShiningStar.net | ShiningStarSingles.com | Christian911.com