Construct and Display Unlimeted Dynamic Menu (English & Arabic)






1.80/5 (6 votes)
Sep 25, 2005

33110

908
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