Click here to Skip to main content
15,895,084 members
Articles / Web Development / HTML
Article

Very Compatible DHTML Menu ASP.NET User Control

Rate me:
Please Sign up or sign in to vote.
4.55/5 (42 votes)
10 Apr 20058 min read 401.8K   14.1K   169   51
An ASP.NET user control for a DHTML drop down menu, with high compatibility and customization features.

Sample Image of very compatible DHTML menu

Sample Image of very compatible DHTML menu

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:

ASP.NET
<%@ 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:

ASP.NET
<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.

SQL
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):

SQL
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer
Turkey Turkey
Bogac Guven

I love technology , programming, foreign languages...list goes on. I have a small office in Istanbul and providing software development services.

Comments and Discussions

 
QuestionMenu Position in Master Page Pin
Elie Sawma25-Oct-10 2:22
Elie Sawma25-Oct-10 2:22 
Questionhi Pin
Murat DOGANCAY14-Oct-09 6:41
Murat DOGANCAY14-Oct-09 6:41 
GeneralMy vote of 1 Pin
DotNetWise15-Jul-09 9:20
DotNetWise15-Jul-09 9:20 
QuestionHelp need on customizations Pin
Praveen Srinivas6-Dec-08 12:56
Praveen Srinivas6-Dec-08 12:56 
GeneralProblem of Inherits="CSSMenuNew.menu Pin
needhi_p22-Apr-08 2:27
needhi_p22-Apr-08 2:27 
GeneralRe: Problem of Inherits="CSSMenuNew.menu Pin
ravi.g18-Nov-08 21:23
ravi.g18-Nov-08 21:23 
Questionupdated for sql but needing recompile ? Pin
Voxan Rider4-Nov-07 19:27
Voxan Rider4-Nov-07 19:27 
GeneralSource Code Pin
Lu5ck6-Nov-06 16:21
Lu5ck6-Nov-06 16:21 
Generalplease give me the code for using the menu with sql server database Pin
indrani2215-Oct-06 23:28
indrani2215-Oct-06 23:28 
GeneralRe: please give me the code for using the menu with sql server database Pin
Voxan Rider5-Nov-07 4:27
Voxan Rider5-Nov-07 4:27 
Hi,

here is what i did for the menu.ascx.vb file but i think there is still a problem with the DLL based in the bin folder...

Basically the line that you should change (to get the same error as i do now)
is
strConnect = System.Configuration.ConfigurationManager.ConnectionStrings("CnnTextes").ToString

where you replace CnnTextes by the name of your connection string locaed in your webconfig file.

<br />
Imports System<br />
Imports System.Data<br />
'Imports System.Data.OleDb<br />
Imports System.Drawing<br />
Imports System.Web<br />
Imports System.Web.UI.WebControls<br />
Imports System.Web.UI.HtmlControls<br />
Imports System.Text<br />
Imports System.Data.Sql<br />
Imports System.Data.SqlClient<br />
<br />
' CSSMenu user control implementation of Sylvain Machefert’s DTML menu<br />
' His website at http://iubito.free.fr<br />
' ASP .Net Codding by Bogac Guven<br />
' bogacmx@yahoo.com<br />
<br />
<br />
Public Class menu<br />
    Inherits System.Web.UI.UserControl<br />
<br />
    Private _cssFile As String<br />
    Private _vert As String<br />
    Private _diffWidth As String<br />
    Private _defWidthValue As Integer<br />
    Private _defHeightValue As Integer<br />
    Private _centerMenu As String<br />
    Private _follScroll As String<br />
    Private _hrImg As String<br />
<br />
#Region " Properties "<br />
<br />
<br />
    'By defining properties we are able to get variables that change our menu look<br />
    'from menu's tag in aspx page. Menu tag's attribute with same name to this property <br />
    'gets given value.<br />
    Public Property CSSFile() As String<br />
        Get<br />
            Return _cssFile<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            If Value = "" Then<br />
                _cssFile = "default.css"<br />
            End If<br />
            _cssFile = Value<br />
        End Set<br />
    End Property<br />
<br />
    Public Property Vertical() As String<br />
        Get<br />
            Return _vert<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            If Value.ToLower <> "true" And Value.ToLower <> "false" Then<br />
                _vert = "false"<br />
            Else<br />
                _vert = Value.ToLower<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property DiffWidth() As String<br />
        Get<br />
            Return _diffWidth<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            If Value.ToLower <> "true" And Value.ToLower <> "false" Then<br />
                _diffWidth = "true"<br />
            Else<br />
                _diffWidth = Value.ToLower<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property DefaultWidth() As Integer<br />
        Get<br />
            Return _defWidthValue<br />
        End Get<br />
        Set(ByVal Value As Integer)<br />
            If IsNumeric(Value) Then<br />
                _defWidthValue = CInt(Value)<br />
            Else<br />
                _defWidthValue = 95<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property DefaultHeight() As Integer<br />
        Get<br />
            Return _defHeightValue<br />
        End Get<br />
        Set(ByVal Value As Integer)<br />
            If IsNumeric(Value) Then<br />
                _defHeightValue = CInt(Value)<br />
            Else<br />
                _defHeightValue = 25<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property CenterMenu() As String<br />
        Get<br />
            Return _centerMenu<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            If Value.ToLower <> "true" And Value.ToLower <> "false" Then<br />
                _centerMenu = "false"<br />
            Else<br />
                _centerMenu = Value.ToLower<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property FollowScroll() As String<br />
        Get<br />
            Return _follScroll<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            If Value.ToLower <> "true" And Value.ToLower <> "false" Then<br />
                _follScroll = "true"<br />
            Else<br />
                _follScroll = Value.ToLower<br />
            End If<br />
        End Set<br />
    End Property<br />
<br />
    Public Property HRImage() As String<br />
        Get<br />
            Return _hrImg<br />
        End Get<br />
        Set(ByVal Value As String)<br />
            _hrImg = Value<br />
        End Set<br />
    End Property<br />
<br />
#End Region<br />
<br />
    Public Sub New()<br />
        Me._cssFile = "lookxp.css"<br />
        Me._vert = "true"<br />
        Me._diffWidth = "false"<br />
        Me._defWidthValue = 95<br />
        Me._defHeightValue = 25<br />
        Me._centerMenu = "false"<br />
        Me._follScroll = "true"<br />
        Me._hrImg = "lookxphr.gif"<br />
    End Sub<br />
<br />
#Region " Web Form Designer Generated Code "<br />
<br />
<br />
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()<br />
<br />
    End Sub<br />
    Protected WithEvents menuLiteral As System.Web.UI.WebControls.Literal<br />
<br />
    'NOTE: The following placeholder declaration is required by the Web Form Designer.<br />
    'Do not delete or move it.<br />
    Private designerPlaceholderDeclaration As System.Object<br />
<br />
    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init<br />
        'CODEGEN: This method call is required by the Web Form Designer<br />
        'Do not modify it using the code editor.<br />
        InitializeComponent()<br />
    End Sub<br />
<br />
#End Region<br />
<br />
#Region "DataSetHelper Class"<br />
    'Puclic Class DataSetHelper is as in article HOW TO: Implement a DataSet SELECT DISTINCT Helper Class in Visual C# .NET<br />
    'by Microsoft, with Article ID: 326176<br />
    'http://support.microsoft.com/default.aspx?scid=kb;en-us;326176<br />
    'Author made a Shared version of functions (as used in this code) and that code can be reached at:<br />
    'http://codebetter.com/blogs/sahil.malik/archive/2004/12/26/39040.aspx<br />
    'Converted to VisualBasic.Net from C# by VBNET Translator at:<br />
    'http://authors.aspalliance.com/aldotnet/examples/translate.aspx<br />
    '<br />
    'We are using SelectDistinct method defined here in BuildMenu() function below, that builds our menu,<br />
    ' to get distinct main menu titles when our database stored procedure reads every sub-menu item.<br />
    Public Class DataSetHelper<br />
<br />
        Private Shared Function ColumnEqual(ByVal A As Object, ByVal B As Object) As Boolean<br />
<br />
            ' Compares two values to see if they are equal. Also compares DBNULL.Value.<br />
            ' Note: If your DataTable contains object fields, then you must extend this<br />
            ' function to handle them in a meaningful way if you intend to group on them.<br />
            If A Is DBNull.Value And B Is DBNull.Value Then '  both are DBNull.Value<br />
                Return True<br />
            End If<br />
            If A Is DBNull.Value Or B Is DBNull.Value Then '  only one is DBNull.Value<br />
                Return False<br />
            End If<br />
            Return A.Equals(B) ' value type standard comparison<br />
        End Function 'ColumnEqual<br />
<br />
        Public Shared Function SelectDistinct(ByVal TableName As String, ByVal SourceTable As DataTable, ByVal FieldName As String) As DataTable<br />
            Dim dt As New DataTable(TableName)<br />
            dt.Columns.Add(FieldName, SourceTable.Columns(FieldName).DataType)<br />
<br />
            Dim LastValue As Object = DBNull.Value<br />
            Dim dr As DataRow<br />
            For Each dr In SourceTable.Select("", FieldName)<br />
                If LastValue Is Nothing Or Not ColumnEqual(LastValue, dr(FieldName)) Then<br />
                    LastValue = dr(FieldName)<br />
                    dt.Rows.Add(New Object() {LastValue})<br />
                End If<br />
            Next dr<br />
            Return dt<br />
        End Function 'SelectDistinct<br />
<br />
    End Class 'DataSetHelper<br />
#End Region<br />
<br />
    Dim myConnection As SqlConnection<br />
<br />
<br />
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load<br />
<br />
        'Dim dataBaseFileName As String = "databases/cssmenudb.mdb"<br />
        Dim strConnect As String<br />
        'Dim FileName As String = Server.MapPath(dataBaseFileName)<br />
        'strConnect = "Provider=Microsoft.Jet.OLEDB.4.0; " & "Data Source=" & FileName<br />
        strConnect = System.Configuration.ConfigurationManager.ConnectionStrings("CnnTextes").ToString<br />
        Try<br />
<br />
            myConnection = New SqlConnection(strConnect)<br />
            myConnection.Open()<br />
        Catch ex As Exception<br />
            menuLiteral.Text = ex.Message<br />
        End Try<br />
        ' Construction of the menu from database for the first time<br />
        ' or from the version which is already in session (if loaded previously for that session)<br />
        If Session("menuString") Is Nothing Then<br />
            menuLiteral.Text = BuildMenu()<br />
        Else<br />
            menuLiteral.Text = Session("menuString").ToString()<br />
        End If<br />
<br />
        myConnection.Close()<br />
<br />
    End Sub<br />
<br />
<br />
    Private Function BuildMenu() As String<br />
<br />
        Dim ulOpened As Boolean = False<br />
        Dim myAdapter As SqlDataAdapter<br />
        Dim myTable As DataTable<br />
<br />
        Dim OleDbCmdAllMenu As New SqlCommand("sp_CreateMenu", myConnection)<br />
        OleDbCmdAllMenu.CommandType = CommandType.StoredProcedure<br />
<br />
        myAdapter = New SqlDataAdapter(OleDbCmdAllMenu)<br />
<br />
<br />
        Dim menuId As Integer<br />
        'nbMenus is the number of top-level menus<br />
        Dim nbMenus As Integer = 0<br />
        'menu0 is a dummy variable to check menu titles with new ones when a new one added<br />
        Dim menu0 As String = ""<br />
<br />
        Dim imageOption As String<br />
        Dim urlOption As String<br />
        'If exist some arguments a new window will be opened. So onClick variable shall be filled and added to anchor tag <br />
        Dim onClick As String<br />
        'mySt is the string that contains all HTML code of menu<br />
        Dim mySt As New StringBuilder<br />
<br />
<br />
        myTable = New DataTable<br />
<br />
        myAdapter.Fill(myTable)<br />
<br />
        myAdapter.Dispose()<br />
<br />
        imageOption = ""<br />
<br />
<br />
        Dim myRow As DataRow<br />
<br />
<br />
        'myMainMenuURL will keep URL that redirects when a main menu title clicked<br />
        Dim myMainMenuURL As String<br />
<br />
        ' A dummy data table to hold all distinct main menu titles available in<br />
        ' myTable data table variable. This is needed because in the stored procedure that<br />
        ' returns all menu information every meu item holds it's parent menu id.<br />
        ' Meaning in that table main menu items exist more than once.<br />
        Dim mainMenuTitles As DataTable<br />
        mainMenuTitles = DataSetHelper.SelectDistinct("MainMenuTitles", myTable, "mainMenuTitle")<br />
<br />
        nbMenus = mainMenuTitles.Rows.Count<br />
<br />
        'varCenterAll is the string that holds javascript line for variable defining if menu centered or not.<br />
        '(If vertical vertically centered, if horizontal horizontally centered)<br />
        Dim varCenterAll As String = "var centrer_menu = " & CenterMenu & ";"<br />
<br />
        Dim varMainWidth As String = ""<br />
        Dim varMainHeight As String = ""<br />
<br />
        'Dummy string variable mainTitleDum will be used to check in For loop<br />
        'to see if current main menu title is the same as one cheked in previous<br />
        'itteration of for loop. If it's not then it means it's a distinct main menu title<br />
        'and previous paragraph tag <P> needs to be closed and new one needs to be opened.<br />
        Dim mainTitleDum As String = ""<br />
<br />
        'ATTENTION: even though it's called DiffWidth property as short for Different Width<br />
        'this variable actually says if we are going to use different values for main<br />
        'menu titles' widths if menu in horizontal mode, or, different height values if menu<br />
        'in vertical mode.<br />
        If DiffWidth = "true" And Vertical <> "true" Then<br />
            'For horizontal menu with different width option of main menu titles choosen<br />
            'instead of using one width value we have to use an array of values.<br />
            varMainWidth = "var largeur_menu = new Array("<br />
<br />
            For Each myRow In myTable.Rows<br />
                If myRow("mainMenuTitle") <> mainTitleDum Then<br />
                    'You can use a different multiplier instead of 10. This function gives<br />
                    '10 pixels of width for each letter in ain menu title which is enough<br />
                    'for given style sheets. If you use larger fonts in your style sheets<br />
                    'you better increase the multiplier. It's a try and see thing.<br />
                    varMainWidth &= (myRow("mainMenuTitle").ToString.Length * 10).ToString & ","<br />
                    mainTitleDum = myRow("mainMenuTitle")<br />
                End If<br />
            Next<br />
            'last coma needs to be deleted at the end of string that defines javascript array holding<br />
            'width variables.<br />
            varMainWidth = varMainWidth.Remove(varMainWidth.Length - 1, 1)<br />
            varMainWidth &= ");"<br />
<br />
        ElseIf DiffWidth = "true" And Vertical = "true" Then<br />
            'For vertical menu with different height option of main menu titles choosen<br />
            'instead of using one height value we have to use an array of values.<br />
            varMainWidth = "var largeur_menu = " & DefaultWidth.ToString & ";"<br />
<br />
            Dim dumyStr As String<br />
<br />
            Dim largeur As Integer 'largeur means width in French<br />
<br />
            'I wanted to keep width of main menu titles at times of 10<br />
            'because in given CSS files (example css files given with this project)<br />
            'each letter is as big to fit in 10 pixels area.<br />
            'That will be our starting point for the calculations we are about to make.<br />
            'If you consider using larger font sizes in your CSS files, you might need to consider<br />
            'greater values than 10.<br />
            'DefaultWidth property is supposed to hold a value enough to keep an average<br />
            'main menu title plus some free space on the sides.<br />
            largeur = Math.Floor(DefaultWidth / 10) * 10<br />
<br />
            varMainHeight = "var hauteur_menu = new Array("<br />
            Dim hautDummy As Integer<br />
            Dim hautonethird As Integer = Math.Floor(DefaultHeight / 3)<br />
<br />
            For Each myRow In myTable.Rows<br />
                If myRow("mainMenuTitle") <> mainTitleDum Then<br />
                    'Lets say if main menu title is larger than number of letters * 10 plus<br />
                    '50 pixels, it means that it can't fit in an average title box, so<br />
                    'we have to make a second line. Some words in the title will hopefully<br />
                    'written in second line and it will look neat.<br />
                    If largeur + 50 < myRow("mainMenuTitle").ToString.Length * 10 Then<br />
                        'Because of extra space, multiplying default height would give too<br />
                        'big menu title box. I came up with this formula.<br />
                        hautDummy = DefaultHeight * 2 - Math.Floor(hautonethird * 2)<br />
                        varMainHeight &= hautDummy.ToString & ","<br />
                    Else<br />
                        'If numer of letter * 10 + 50 pixels can keep the title<br />
                        'then why to bother with calculating a new value?<br />
                        'Use default height.<br />
                        varMainHeight &= DefaultHeight.ToString & ","<br />
                    End If<br />
                    mainTitleDum = myRow("mainMenuTitle")<br />
                End If<br />
            Next<br />
            'We have to delete last coma and write ); instead<br />
            varMainHeight = varMainHeight.Remove(varMainHeight.Length - 1, 1)<br />
            varMainHeight &= ");"<br />
        Else<br />
            'If DiffWidth property set to false, then we just use default width and<br />
            'height values.<br />
            varMainWidth = "var largeur_menu = " & DefaultWidth.ToString & ";"<br />
            varMainHeight = "var hauteur_menu = " & DefaultHeight.ToString & ";"<br />
        End If<br />
<br />
        'Now its time to write all those variable we defined in javascript before<br />
        'we call our menu.<br />
        mySt.Append("<script language=""javascript"" type=""text/javascript"">" & ControlChars.Lf)<br />
        mySt.Append(ControlChars.Tab & varMainWidth & ControlChars.Lf)<br />
        mySt.Append(ControlChars.Tab & varMainHeight & ControlChars.Lf)<br />
        mySt.Append(ControlChars.Tab & varCenterAll & ControlChars.Lf)<br />
        mySt.Append(ControlChars.Tab & "</script>")<br />
<br />
        'rest of javascript functions and variables are in menu.js file. We call that.<br />
        mySt.Append(String.Format("<script language=""javascript"" type=""text/javascript"" src=""menu/menu.js""></script>" & ControlChars.Lf))<br />
<br />
        'Here we use css file name we received from menu's property named CSSFile<br />
        'We can use an If statement to check if css file name is defined.<br />
        'If not a default one can be implemented.<br />
        'Up to you to code.<br />
        mySt.Append(String.Format("<link rel=""stylesheet"" type=""text/css"" href=""menu/{0}"">" & ControlChars.Lf, CSSFile))<br />
<br />
        'We start the creation of menu here<br />
        mySt.Append("<div id=""conteneurmenu"">" & ControlChars.Lf)<br />
        mySt.Append("<script language=""Javascript"" type=""text/javascript""" & ">" & ControlChars.Lf)<br />
        ' Number of main menu items is needed for javascript code to work properly.<br />
        'Some other variables defined in menu control's properties are defined here<br />
        'in javascript variables.<br />
        mySt.Append("var nbmenu=" & nbMenus & ";" & ControlChars.Lf)<br />
        mySt.Append("var suivre_le_scroll=" & FollowScroll & ";" & ControlChars.Lf)<br />
        mySt.Append("var vertical=" & Vertical & ";" & ControlChars.Lf)<br />
        mySt.Append("preChargement();" & ControlChars.Lf)<br />
        mySt.Append("</script>" & ControlChars.Lf)<br />
<br />
        menuId = 0<br />
        'menuId=0 is to check first execution of for loop which will construct the menu.<br />
        'If menuId is not 0 that means we read some data in a previous execution of the loop<br />
        'therefore we must write closing HTML tags.<br />
<br />
        ' Construction of menu mainly done in this for loop.<br />
        For Each myRow In myTable.Rows<br />
            If myRow("mainMenuTitle").ToString() <> menu0 Then<br />
<br />
                'If this is not first read, that means we must close tags of previous execution.<br />
                If menuId <> 0 And ulOpened = True Then<br />
                    mySt.Append(ControlChars.Tab & ControlChars.Tab & "</ul>" & ControlChars.Lf)<br />
                    ulOpened = False<br />
                End If<br />
                'Here we get URLs of main menu titles<br />
                Dim mySqlMainMenuCmd As New SqlCommand("sp_mainMenuURL", myConnection)<br />
                mySqlMainMenuCmd.CommandType = CommandType.StoredProcedure<br />
                mySqlMainMenuCmd.Parameters.Add("mainMenuTitleArg", SqlDbType.NVarChar, 60).Value = myRow("mainMenuTitle").ToString()<br />
                'ExecuteScalar reads only one item from data table (first row, first column), which we know that we only have an URL for given<br />
                'main menu title<br />
                If mySqlMainMenuCmd.ExecuteScalar Is DBNull.Value Then<br />
                    myMainMenuURL = ""<br />
                Else<br />
                    myMainMenuURL = mySqlMainMenuCmd.ExecuteScalar<br />
                End If<br />
<br />
                menuId += 1<br />
<br />
<br />
                If myRow("subMenuTitle") Is DBNull.Value Then<br />
<br />
                    'Main menu (top-menu) items are held in paragraph HTML tags <P><br />
                    mySt.Append(String.Format(ControlChars.Tab & "<p id=""menu{0}"" class=""menu"">" & ControlChars.Lf, menuId))<br />
                    If Not myMainMenuURL = "" Then<br />
                        mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & "<a href=""{1}"" >{0}<span> :</span></a>" & ControlChars.Lf, myRow("mainMenuTitle").ToString(), myMainMenuURL))<br />
                    Else<br />
                        mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & "<a href=""javascript:void(0);"" >{0}<span> :</span></a>" & ControlChars.Lf, myRow("mainMenuTitle").ToString()))<br />
                    End If<br />
<br />
                    mySt.Append(ControlChars.Tab & "</p>" & ControlChars.Lf)<br />
<br />
                Else<br />
<br />
                    'Main menu (top-menu) items are held in paragraph HTML tags <P><br />
                    mySt.Append(String.Format(ControlChars.Tab & "<p id=""menu{0}"" class=""menu"" onmouseover=""MontrerMenu('ssmenu{0}');"" onmouseout=""CacherDelai();"">" & ControlChars.Lf, menuId))<br />
                    If Not myMainMenuURL = "" Then<br />
                        mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & "<a href=""{2}"" onfocus=""MontrerMenu('ssmenu{0}');"">{1}<span> :</span></a>" & ControlChars.Lf, menuId, myRow("mainMenuTitle").ToString(), myMainMenuURL))<br />
                    Else<br />
                        mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & "<a href=""javascript:void(0);"" onfocus=""MontrerMenu('ssmenu{0}');"">{1}<span> :</span></a>" & ControlChars.Lf, menuId, myRow("mainMenuTitle").ToString(), myMainMenuURL))<br />
                    End If<br />
<br />
                    mySt.Append(ControlChars.Tab & "</p>")<br />
<br />
                    'Sub-menu items are grouped in unnumbered list tags below their top-menu titles<br />
                    mySt.Append(String.Format(ControlChars.Lf & ControlChars.Tab & ControlChars.Tab & "<ul id=""ssmenu{0}"" class=""ssmenu"" onmouseover=""AnnulerCacher();"" onmouseout=""CacherDelai();"" onfocus=""AnnulerCacher();"" onblur=""CacherDelai();"">" & ControlChars.Lf, menuId))<br />
                    ulOpened = True<br />
                End If<br />
<br />
                menu0 = myRow("mainMenuTitle").ToString()<br />
            End If<br />
<br />
            If myRow("subMenuTitle") Is DBNull.Value Then<br />
                'Do Nothing<br />
            Else<br />
                If myRow("iconImage").ToString().Length <> 0 Then<br />
                    imageOption = myRow("iconImage").ToString()<br />
                Else<br />
                    imageOption = "lookxpvide.gif"<br />
                End If<br />
<br />
                'To avoid "Page Cannot Be Shown" error when there is no URL entered in database,<br />
                'instead of writing empty string we use Javascript's void function.<br />
                'Otherwise we write appropriate URL.<br />
                If myRow("URL").ToString().Length <> 0 Then<br />
                    urlOption = myRow("URL").ToString()<br />
                Else<br />
                    urlOption = "javascript:void(0);"<br />
                End If<br />
<br />
<br />
                'If we have new window arguments in database, we hold them in urlOption variable.<br />
                'this variable like imageOption which holds icon image filename,<br />
                'will be added to string that forms each submenu item, just in the lines to follow.<br />
                If myRow("newWinArgs").ToString().Length <> 0 Then<br />
                    onClick = " onClick=""Javascript:window.open('" & urlOption & "','window','" & myRow("newWinArgs").ToString() & "'); return false;"" "<br />
                Else<br />
                    onClick = ""<br />
                End If<br />
<br />
                'If icon image of given sub menu item is same with menu property HRImage,<br />
                'It means we are supposed to see just a horizontal ruler image that seperates<br />
                'two submenu items and not a real menu title text or menu icon image.<br />
                If myRow("iconImage").ToString() = HRImage Then<br />
                    mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & ControlChars.Tab & "<img src=""menu/{0}"" class =""hr"" align=""absmiddle"" alt=""""/>" & ControlChars.Lf, imageOption))<br />
                Else<br />
                    'Each submenu item is a HTML list item, we add here all their variables and form full<br />
                    'list item html string.<br />
                    mySt.Append(ControlChars.Tab & ControlChars.Tab & ControlChars.Tab & "<li>" & ControlChars.Lf)<br />
                    mySt.Append(String.Format(ControlChars.Tab & ControlChars.Tab & ControlChars.Tab & ControlChars.Tab & "<a href=""{0}"" {1}><img src=""menu/{2}"" align=""absmiddle"" alt=""""/> {3} <span> ;</span></a>" & ControlChars.Lf, urlOption, onClick, imageOption, myRow("subMenuTitle").ToString()))<br />
                    mySt.Append(ControlChars.Tab & ControlChars.Tab & ControlChars.Tab & "</li>" & ControlChars.Lf)<br />
                End If<br />
<br />
            End If<br />
<br />
        Next myRow<br />
<br />
        If ulOpened = True Then<br />
            'We close our menu<br />
            mySt.Append(ControlChars.Tab & ControlChars.Tab & "</ul>" & ControlChars.Lf)<br />
            ulOpened = False<br />
        End If<br />
<br />
        mySt.Append("</div>" & ControlChars.Lf)<br />
        mySt.Append("<script language=""Javascript"" type=""text/javascript"">Chargement();</script>" & ControlChars.Lf)<br />
<br />
        Session("menuString") = mySt.ToString()<br />
        Return mySt.ToString()<br />
    End Function 'BuildMenu <br />
<br />
End Class<br />

GeneralMenu Appearance Pin
meerak2-Aug-06 23:31
meerak2-Aug-06 23:31 
GeneralRe: Menu Appearance Pin
Imparatorvolkan17-Oct-06 8:36
Imparatorvolkan17-Oct-06 8:36 
QuestionRe: Menu Appearance Pin
yejivanhai22-Mar-07 7:18
yejivanhai22-Mar-07 7:18 
GeneralIE Crashes with smartnav on Pin
dbaser9-May-06 4:35
dbaser9-May-06 4:35 
GeneralMenu position Pin
mburagohain27-Feb-06 23:36
mburagohain27-Feb-06 23:36 
GeneralRemove image boxes from the sub-menus Pin
BryanSherlock30-Jan-06 10:39
BryanSherlock30-Jan-06 10:39 
GeneralHorizontal Menu Pin
Richard T.14-Dec-05 18:44
Richard T.14-Dec-05 18:44 
GeneralSub menu problem Pin
Ganesh M10-Nov-05 21:16
Ganesh M10-Nov-05 21:16 
GeneralMenu appearance problem in Safari on Mac OS Pin
NazM5-Oct-05 20:26
NazM5-Oct-05 20:26 
GeneralRe: Menu appearance problem in Safari on Mac OS Pin
praveen_4569820-Sep-07 19:54
praveen_4569820-Sep-07 19:54 
QuestionCould we use in our site? Pin
aminey16-Sep-05 9:57
aminey16-Sep-05 9:57 
QuestionVery Nice control but can you change the background color? Pin
dan1808817-Aug-05 8:17
dan1808817-Aug-05 8:17 
GeneralAvoid Wrapping around Pin
rfalagan1-Aug-05 5:49
rfalagan1-Aug-05 5:49 
GeneralRe: Avoid Wrapping around Pin
scubaduba6-Aug-05 8:29
scubaduba6-Aug-05 8:29 
GeneralDrop down List Pin
3-Jun-05 5:04
suss3-Jun-05 5:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.