locked
how to create dynamic menu from database RRS feed

  • Question

  • User-2025489615 posted

    I want to develop asp.net application which contains menu but menu items should be generated from database. My intension is that Administrator can change menu items by working only on database, no need to change front end any how.

    For example: Web page contains Menu as 

    1. Home
    2. About Us
    3. Contact Us

      So if Administrator wants can change  About Us menu to Our Clients menu, so administrator only need to modify in database don't touch front end any how.

      Any small help also appreciated.
      Thanks in advance.
      Dilip Kumar Vishwakarma
      Programmer
      .Net Consulting
    Tuesday, January 22, 2008 4:05 AM

Answers

  • User1702256038 posted

    Hi 

    . But in article http://aspalliance.com/822 it uses Asp:menu control, i have different need  in that  it shouldn't use asp:menu control or any of the server side control. If anyone of you have any idea or article please send me.

    Base on your description, you want to create dynamic menu without server said control? You want to create it with HTML?

    I would give you a suggestion, but it maybe not a ideal solution.

    You can use  javeascript and css and the html tag:<a> to construct a menu.

    1. The javascript code:

    <script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();
    var currentOpenItemName="";
    function showHide(theid)
    {
        if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
        if (document.getElementById)
        {
           var switch_id = document.getElementById(theid);
            if(menu_status[theid] != 'show')
            {
               switch_id.className = 'show';
               menu_status[theid] = 'show';
               currentOpenItemName = theid;
            }
            else
            {
               switch_id.className = 'hide';
               menu_status[theid] = 'hide';
               currentOpenItemName = "";
            }
        }
    }

    //-->
    </script>

    2. the css code:
     <style type="text/css">
    .menu1{
    background-image:url(images/menudiv1bg.gif);
    margin-left:25px;
    padding-left:20px;
    padding-top:2px;
    padding-bottom: 2px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 20px;
    }
    .submenu{
    background-image: url(images/submenu.gif);
    display: block;
    height: 19px;
    margin-left: 38px;
    padding-top: 2px;
    padding-left: 7px;
    color: #333333;
    }

    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    </style>

    3. Below is the html code to construct the menu control, but you can generate this html code according to database data to create menu control.

    <div>
        <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="defaut" class="submenu">Link One here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Two here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Three here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Four here</a>
        </div>

    </div>

     

    Hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2008 3:52 AM

All replies

  • User1734617369 posted

    Hi,

    Maybe this article can help you: http://aspalliance.com/822

     

    Tuesday, January 22, 2008 4:46 AM
  • User2008424322 posted

    Hi,

    Create a table which is having your menu items names.

    Fetch all the items from the table and assign it to the menu control.

    Tuesday, January 22, 2008 4:51 AM
  • User-2025489615 posted

    hi virendra & valuja,<o:p></o:p>

    first of all thanks for your support. I find your article interesting which solve almost all of my doubts. But in article http://aspalliance.com/822 it uses Asp:menu control, i have different need  in that  it shouldn't use asp:menu control or any of the server side control. If anyone of you have any idea or article please send me.<o:p></o:p>

    Thanks for your support.<o:p></o:p>

    Dilip Kumar Vishwakarma
    Programmer
    .Net Consulting

     

    Thursday, January 24, 2008 1:51 AM
  • User1702256038 posted

    Hi 

    . But in article http://aspalliance.com/822 it uses Asp:menu control, i have different need  in that  it shouldn't use asp:menu control or any of the server side control. If anyone of you have any idea or article please send me.

    Base on your description, you want to create dynamic menu without server said control? You want to create it with HTML?

    I would give you a suggestion, but it maybe not a ideal solution.

    You can use  javeascript and css and the html tag:<a> to construct a menu.

    1. The javascript code:

    <script language="JavaScript" type="text/JavaScript">
    <!--
    menu_status = new Array();
    var currentOpenItemName="";
    function showHide(theid)
    {
        if(currentOpenItemName!="" && theid!=currentOpenItemName) showHide(currentOpenItemName);
        if (document.getElementById)
        {
           var switch_id = document.getElementById(theid);
            if(menu_status[theid] != 'show')
            {
               switch_id.className = 'show';
               menu_status[theid] = 'show';
               currentOpenItemName = theid;
            }
            else
            {
               switch_id.className = 'hide';
               menu_status[theid] = 'hide';
               currentOpenItemName = "";
            }
        }
    }

    //-->
    </script>

    2. the css code:
     <style type="text/css">
    .menu1{
    background-image:url(images/menudiv1bg.gif);
    margin-left:25px;
    padding-left:20px;
    padding-top:2px;
    padding-bottom: 2px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 20px;
    }
    .submenu{
    background-image: url(images/submenu.gif);
    display: block;
    height: 19px;
    margin-left: 38px;
    padding-top: 2px;
    padding-left: 7px;
    color: #333333;
    }

    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    </style>

    3. Below is the html code to construct the menu control, but you can generate this html code according to database data to create menu control.

    <div>
        <a class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="defaut" class="submenu">Link One here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Two here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Three here</a>
            <a href="http://forums.asp.net/AddPost.aspx?ReplyToPostID=2129389&Quote=False#" class="submenu">Link Four here</a>
        </div>

    </div>

     

    Hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 24, 2008 3:52 AM
  • User-2025489615 posted

     hi Amanda,

        i would like to thank you for the response that you showed.i will try out your given solution and will feedback for your response.

    Thank you
    Dilip Kumar Vishwakarma
    Programmer
    [url=http://www.intelcs.com].Net Consulting[/url]

    Friday, January 25, 2008 8:02 AM