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

Construct and Display Unlimeted Dynamic Menu (English & Arabic)

Rate this:
1.80 (6 votes)
Please Sign up or sign in to vote.
1.80 (6 votes)
25 Sep 2005
the article provide an admin module to construct unlimeted menu in db and code to display this menu


This code is a .net project that when installed provide you with 3 web pages, the first allow you to construct
your menu using tree view as microsoft windows, you can create unlimeted submenus, the second display the menu in
left to right manner for english web site, and the third page display the menu in right to left manner for Arabic sites
now web site developer need not to worry about your menus, just they will use the first page to construct the menu online
, and use one of other pages source code in thier web site to display the menu from the database. they now can create and display
unlimeted menu.
this module contains javascript and css code copyright to Bluegrass Technologies

Using the code

your machine should has:

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 fil dbscript.sql inyour sql server to create table menu
4- make authontication in yuor sql server mixed
5-change connection string to your sql in the file data/sqlconnection.txt
6-it will create application in your IIS called dynamicmenu
you will find 3 pages
    1- english.aspx to display left to right menu
    2- arabic.aspx to display right to left menu
    3- menuadmin.aspx to construct your menu

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

how to construct menu
1- goto http://localhost/dynamicmenu.aspx
2- you will find a tree with a node called menu selected
3- write name & url of menu item and press add , the item will be created and selected 
4- select the node where you want to add menu and repeate 3

how to delete menu item
you not allowed to delete item from database , but alternatively you can make it hidden or visible 
by selecting it and press the aprpriate button

note : the menu item will be hidden from the english or arabic display not from menuadmin tree

How to change display settings
in the file res/css/english.css or arabic.css you can change 
the width of menu,the image of 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 stylesheet to change font, color,and hover of the menu

Points of Interest

I think that my added value is to display unlimetd subitems of menu from database using recursive function and to provide 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

-- There are no messages in this forum --
Posted 25 Sep 2005


21 bookmarked