Click here to Skip to main content
14,302,993 members

Construct and display dynamic unlimited levels of menu

Rate this:
2.88 (8 votes)
Please Sign up or sign in to vote.
2.88 (8 votes)
3 Oct 2005
This article provides developers and non-developers with a module that builds and displays dynamic unlimited levels of menu [English and Arabic].


This code is a .NET project that when installed will provide you with three web pages: the first allows you to construct your menu using a tree view as Windows Explorer, you can create unlimited submenus; the second page displays the menu in a left to right manner for an English web site; and the third page displays the menu in a right to left manner for Arabic sites. Now a web site developer need not worry about menus. Just use the first page to construct the menu online, and use one of the other pages to display a menu from the database. They can now create and display menus with unlimited submenus. This module contains JavaScript and CSS code copyright to Bluegrass Technologies.

Using the code


Your machine should have:

  1. .NET Framework v 1.1
  2. SQL Server 2000
  3. IIS 5.0


  1. Run the file webcontrol/iewebcon.msi.
  2. Run file setup.exe (websetup1/debug/setup.exe).
  3. Run the script file dbscript.sql in your SQL Server to create a table menu.
  4. Make the authentication in your SQL Server mixed.
  5. Change the connection string to that for your SQL Server in the file data/sqlconnection.txt.
  6. It will create an application in your IIS called dynamicmenu.

You will find three pages in the application:

  1. english.aspx to display the left to right menu.

    Image 1

  2. arabic.aspx to display the right to left menu.

    Image 2

  3. menuadmin.aspx to construct your menu.

    Image 3

Note: the table menu contains some items, you can remove them.

How to construct a menu

  1. Go to http://localhost/dynamicmenu.aspx.
  2. You will find a tree with a node called menu selected.
  3. Write name and URL of the menu item and press Add, the item will be created and selected.
  4. Select the node where you want to add the menu and repeat step 3.

How to delete a menu item

You are not allowed to delete an item from the database. But alternatively you can make it hidden or visible by selecting it and pressing the appropriate button.

Image 4

Note: the menu item will be hidden from the English or Arabic display not from the menu admin tree.

How to change display settings

In the file res/css/english.css or arabic.css, you can change the width of the menu, the image of the arrow, and the color settings.

    width: 230px; ////////width of the menu
    border: solid 1px #cccc99;
    border-top: solid 5px #cccc99;
    border-left: solid 2px #cccc99;
    padding: 0px;

li ul
    display: none;
    position: absolute;
    margin-right: 260px; //// should be 2*width-5
    margin-top: -30px;
    width: 230px; //////width of the menu
    border: solid 1px #cccc99;
    border-top: solid 5px #cccc99;
    border-right: solid 2px #cccc99;
    padding: 0px;

li ul
    display: none;
    position: absolute;
    margin-left: 225px;///////should be width-5
    margin-top: -25px;

In the display page, you will find the stylesheet to change the font, color and hover of the menu.

Points of Interest

I think that the added value is the ability to display unlimited subitems of the menu from the database using recursive functions, and to provide a tree view to build the menu.


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


About the Author

Abdelmoniem Hafez
Web Developer
Egypt Egypt
No Biography provided

Comments and Discussions

GeneralArabic text in aspx Pin
alasaadi29-Oct-06 18:52
memberalasaadi29-Oct-06 18:52 
GeneralNot working in Fire Fox Pin
tuannq29-May-06 0:07
membertuannq29-May-06 0:07 
GeneralI like your menu control like Windows Explorer Pin
Li Xiaojian(China)21-May-06 22:34
memberLi Xiaojian(China)21-May-06 22:34 
GeneralRedundency Pin
malharone12-Nov-05 4:49
membermalharone12-Nov-05 4:49 
GeneralRe: Redundency Pin
Bahadir Cambel28-Dec-05 11:58
memberBahadir Cambel28-Dec-05 11:58 
GeneralRe: Redundency Pin
Bahadir Cambel28-Dec-05 13:08
memberBahadir Cambel28-Dec-05 13:08 
GeneralRe: Redundency Pin
malharone28-Dec-05 16:40
membermalharone28-Dec-05 16:40 
GeneralI like your menu system Pin
IPhibbs8-Oct-05 1:09
memberIPhibbs8-Oct-05 1:09 
GeneralRe: I like your menu system Pin
gxdata20-Oct-05 19:34
membergxdata20-Oct-05 19:34 
GeneralTree view of the entire solution Pin
sachinkalse3-Oct-05 21:38
membersachinkalse3-Oct-05 21:38 

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.

Posted 30 Sep 2005


39 bookmarked