Very Compatible DHTML Menu ASP.NET User Control

• Download source project - 74 Kb
• Download HTML example - 202 Kb

Introduction

A DHTML menu is something many web developers use these days as those provide a friendly and hierarchical interface for users. In a project I’m working on, I need one of those, and I searched the web to find an ASP.NET control. There are some good examples of menu controls but none of them gives what really I want (cross-browser, VB.NET, code available, free, and with possibilities for nice styles). Then I found Sylvain Machefert’s work (in French). He is a web developer with good CSS, JavaScript and cross browser issues knowledge, who made a very compatible DHTML menu and released it to public. The menu even works on text based browsers, reading technologies for visually impaired considered, and the menu is not visible when printing your page. Also, it can be customized in many ways and it supports icon images. The list of compatible browsers:

• Internet Explorer 5/5.5/6 Windows 98/2000/XP;
• JAWS Vocal Synthesis in IE6 Windows XP;
• MyIE2;
• Netscape 7 Windows;
• Netscape 6.2;
• Mozilla 1.4+ Windows 2000/XP;
• FireFox 0.9+;
• Opera 7 Windows and Linux;
• Lynx (text browser)
• Encompass 0.5 et Dillo 0.8 (non CSS browsers) Linux (Debian);
• Epiphany 1.2 Linux (Debian);
• Galéon 1.2;
• Konqueror Linux (Knoppix);
• Mozilla Linux (Knoppix);
• Internet Explorer 5 Mac;
• Safari 1.0 MacOS X 10.2.8;
• Safari 1.1 MacOS X 10.3;
• Camino MacOS X;
• Firebird MacOS X;
• OmniWeb MacOS X;
• Mozilla 1.6 Mac;
• NeoPlanet 5.1;

Because Sylvain doesn’t have enough knowledge in .NET programming (at the time of this writing at least) he couldn’t release an ASP.NET custom control. There has been a previous example of a user control with Sylvain’s menu, made by guys at Sokhar (a web development company). However, there were a few issues with that one which didn’t go well with my project:

• They used an old version of Sylvain's code, so less compatibility.
• Their code is in C#, my project is in VB.NET, because I needed some changes it didn't work out.
• I thought some improvements could be made besides multi browser issues, such as adding links to main menu titles, a bit improved HTML output, and the ability to change the looks of menu in each page of your project by using the control's properties.
• Access database idea was great but I needed to implement it to my SQL project.

The only downside for some might be that the menu only supports one level branching. This is no problem for me because I believe more than two levels already messes up the looks of the page (and also I read an article on that matter).

I thank first Sylvain for his great work, and then Sokhar for their contribution; it was an important influence for my code.

Background

This is the first update of this DHTML menu user control. In this release, I made some improvements I was planning after I made the first release.

Well, what does the user control I made do? It reads which CSS file to use from the control property “CSSFile” as defined in your tag definition of the menu control in the aspx page and other properties that tweak menu looks. It loads menu data from an Access file and prepares a nice HTML output which is to be placed in the output of your aspx page. I used Access stored procedures to retrieve some data. I use stored procedures when I work with SQL, and as far as I know, stored procedures are a better way of dealing with data than using strings as command parameters. For those who don’t know about procedures, my code can be a good example work. It was, for me, an educative task as well, because Access (Microsoft Jet Engine, what Access uses as SQL implementation) procedures are defined a bit different than SQL Server ones. I learned about that during this work. My example project is ready for a vertical menu, centered vertically and with gradient filled menu backgrounds. There is also a CSS file included in the first release in the menu folder, so if you want, by changing properties (especially CSSFile property), you can get a different look with the example project. I translated the JavaScript file's comments to ease your way when improving my code or changing menu attributes. Code is heavily commented so I believe you won't have much to miss there. Feel free to ask if you don't understand something.

Using the code

Because I send .vb code pages as well, you can improve this control. Implementation is actually easy. First, create a “databases” folder in your project (right click the project name in your Visual Studio Solution Explorer window, not the solution name, solution name is the one at the top; Add >> New Folder, rename it to “databases”), then right click on the “databases” folder in your Visual Studio Solution Explorer window, Add >> Add Existing Item. You select in the file selection window your Access database file named “cssmenudb.mdb” (or edit the one I’m sending and select that). Be careful with “File Type” in selection window, it must be “All Files” or you won’t see the database file. Now create a folder named “menu” in your project folder (again by right clicking on the project name in the Solution Explorer). Use right click Add >> Add Existing Item method on “menu” folder to add menu.ascx and menu.ascx.vb files from my project (you can select more than one file on that window). You also need to add JavaScript CSS and icon images as well in that folder. Then the menu user control has to be registered in the page you want it to be implemented, by adding the line:

<%@ Register TagPrefix="userCtrl" TagName="CSSMenu" Src="menu/menu.ascx" %>

on top of the aspx page in HTML view, just below the Page directive. Now, you can add your menu’s tag in the HTML view, as in:

<userCtrl:CSSMenu id="Menu1" runat="server" HRImage="lookxphr.gif" 
      FollowScroll="false" CenterMenu="true" DefaultHeight="25" DefaultWidth="95" 
      Vertical="true" DiffWidth="true" CSSFile="vertical.css">
</userCtrl:CSSMenu>

I recommend you to put it above the form tag that is created automatically by Visual Studio in every aspx page. That’s it. You are ready to go.

Let's examine the properties of menu control:

• HRImage

  If a submenu item has an image file with the same name of the value held in this property, then that menu item is considered as a horizontal ruler (separator). Image is loaded as a separator and tiled horizontally. Nothing more is printed for that menu item. Takes a string for filename of horizontal ruler image.

• FollowScroll

  This boolean value of "True" or "False" describes whether menu should stay back when page moves forward when scrolled (if page is larger than standard window area) or follow the scroll and be visible all times.

• CenterMenu

  Boolean value and its name tells all. If menu is in vertical mode (defined by Vertical property) and this property has value "True" then menu is centered vertically, and horizontally if menu is in horizontal mode.

• Vertical

  Another boolean value. "True" for a vertical menu, "False" for horizontal.

• DefaultHeight

  An integer number for main menu items' default height in pixels.

• DefaultWidth

  An integer number for main menu items' default width in pixels.

• DiffWidth

  The name should not confuse you. This boolean value property defines if main menu items are in different widths according to the number of letters in their title if they are in horizontal mode, or if main menu items are in different heights if they are in vertical mode.

• CSSFile

  This string valued property keeps the name of the CSS file.

Points of Interest

This is one of the two stored procedures used in the Access database. As you can see (if you are familiar with this concept), the syntax is a bit different from SQL's one.

PROCEDURE sp_mainMenuURL
PARAMETERS mainMenuTitleArg Text ( 255 );
SELECT  tblMainMenu.mainURL
FROM tblMainMenu
WHERE  tblMainMenu.mainMenuTitle = mainMenuTitleArg;

mainMenuTitleArg is the argument this procedure takes to find which main menu item's URL we want to fetch from the database. Once the procedure is created in Access database (in Queries section, we prepare this code), it automatically deletes the first line with PROCEDURE statement.

For those of you unfamiliar with SQL procedures, here is the stored procedure above in TSQL (SQL implementation of Microsoft SQL Server 2000):

PROCEDURE sp_mainMenuURL
CREATE PROCEDURE sp_mainMenuURL
@mainMenuTitleArg NvarChar (255)
AS
SELECT mainURL
FROM tblMainMenu
WHERE mainMenuTitle=@mainMenuTitleArg;
GO

What to do next?

I made many improvements in this release I wanted to after I made version 1.0. Now I think it's time to give the users the facility to have more than one menu in their project. Consider a case where some users (let's say customers) are supposed to get different main menu and submenu items and other users (let's say employees) other items. Of course, in that case, security and more database tables come into consideration.

History

• Version 1.4
  • Bug fix: Page refresh doesn't invalidate JavaScript and stylesheet anymore which used to happen in some cases before.
  • Everything to be written in HTML is kept in one ASP literal.
  • A constructor is added with default values of properties in case user forgets defining them in tag.
  • Seven new properties added for easier menu customization. No need to modify JavaScript file.
• Version 1.0
  • First release.