Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Construct and Display Unlimeted Dynamic Menu (English & Arabic)

0.00/5 (No votes)
25 Sep 2005 1  
the article provide an admin module to construct unlimeted menu in db and code to display this menu

Introduction

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

steps

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


//////Arabic.aspx///////////////////

ul
{
    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;
}
////////////////////english.aspx///////////////

ul
{
    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.

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