How to create Menu with SubMenus as a dynamic Dropdown using C# in ASP.Net

Last Reply on Feb 06, 2017 03:58 AM By AnandM

Posted on Feb 06, 2017 01:55 AM

 

 <style>
        /* ul */
        .submenu
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #428bca;
        }
        
        .submenu li
        {
            float: left;
        }
        
        .submenu li a, .dropbtn
        {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 12px 36px;
            text-decoration: none;
        }
        
        .submenu li a:hover, .dropdown:hover .dropbtn
        {
            background-color: inherit;
        }
        
        .submenu li.dropdown
        {
            display: inline-block;
        }
        
        .submenu .dropdown-content
        {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        
        .submenu .dropdown-content a
        {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }
        
        .submenu .dropdown-content a:hover
        {
            background-color: #f1f1f1;
        }
        
        .submenu .dropdown:hover .submenu .dropdown-content
        {
            display: block;
        }
        
    </style>

 

 <div class="Container">
            <ul class="submenu" id="topicmenu" runat="server">
            <li class="dropdown"></li>
            </ul>
        </div>

 

 private void fillMenu()
    {
        clsTopic objTopic = new clsTopic(true);
        objTopic.SelectAll();

        clsArtical objArtical = new clsArtical(true);
        objArtical.SelectAll();

        string str = string.Empty;
        int i = 0;
        int j = 0;

        for (i = 0; i < objTopic.ListclsTopic.Count; i++)
        {
            str += @"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>" + objTopic.ListclsTopic[i].TopicName + @"</a>";

            for (j = 0; j < objArtical.ListclsArtical.Count; j++)
            {
                if (objArtical.ListclsArtical[j].TopicID == objTopic.ListclsTopic[i].TopicID)
                {
                    str += @"<div class='dropdown-content'><a href='#'>" + objArtical.ListclsArtical[j].ArticalName + "</a></div></li>";
                }
            }
        }
        topicmenu.InnerHtml = str;
    }

This my dynamic coding code

 

 <style>
        ul
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #428bca;
        }
        
        li
        {
            float: left;
        }
        
        li a, .dropbtn
        {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        
        li a:hover, .dropdown:hover .dropbtn
        {
            background-color: inherit;
        }
        
        li.dropdown
        {
            display: inline-block;
        }
        
        .dropdown-content
        {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        
        .dropdown-content a
        {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }
        
        .dropdown-content a:hover
        {
            background-color: #f1f1f1;
        }
        
        .dropdown:hover .dropdown-content
        {
            display: block;
        }
    </style>

 

<body>
    <form id="form1" runat="server">
    <ul>
        <li class="dropdown"><a href="#" class="dropbtn">MY ARTICLES</a>
            <div class="dropdown-content">
                <a href="#">Aapnu Surat</a> <a href="#">ચોકલેટી અભિનેતા વિનોદ મેહરા</a> <a href="#">
                    ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a>
            </div>
        </li>
        <li class="dropdown"><a href="#" class="dropbtn">MY PRESENTATIONS</a>
            <div class="dropdown-content">
                <a href="#">Safaltani Sargam Part I</a> <a href="#">Safaltani Sargam Part II</a>
                <a href="#">The Art Of Illusion</a> <a href="#">100 Years Of Indian Cinema - Part I
                    Silent Film Era</a>
            </div>
        </li>
        <li class="dropdown"><a href="#" class="dropbtn">DRAMA</a>
            <div class="dropdown-content">
                <a href="#">Result Of SMC Drama Contest</a> <a href="#">RESULTS OF 39th SMC DRAMA CONTEST</a>
                <a href="#">The Result Of SMC Drama Contest 2012</a> <a href="#">An Enemy Of The People</a>
            </div>
            </div> </li>
        <li class="dropdown"><a href="#" class="dropbtn">GUJARAT</a>
            <div class="dropdown-content">
                <a href="#">Link 1વી ધ પીપલ ઓફ ગુજરાત</a>
        </li>
        <li class="dropdown"><a href="#" class="dropbtn">INDIAN CULTURE</a>
            <div class="dropdown-content">
                <a href="#">The Vedic Culture - Guj</a>
            </div>
        </li>
    </ul>
    </form>
</body>

this are static code

Posted on Feb 06, 2017 03:58 AM
jordan says:
private void fillMenu()
   {
       clsTopic objTopic = new clsTopic(true);
       objTopic.SelectAll();
 
       clsArtical objArtical = new clsArtical(true);
       objArtical.SelectAll();
 
       string str = string.Empty;
       int i = 0;
       int j = 0;
 
       for (i = 0; i < objTopic.ListclsTopic.Count; i++)
       {
           str += @"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>" + objTopic.ListclsTopic[i].TopicName + @"</a>";
 
           for (j = 0; j < objArtical.ListclsArtical.Count; j++)
           {
               if (objArtical.ListclsArtical[j].TopicID == objTopic.ListclsTopic[i].TopicID)
               {
                   str += @"<div class='dropdown-content'><a href='#'>" + objArtical.ListclsArtical[j].ArticalName + "</a></div></li>";
               }
           }
       }
       topicmenu.InnerHtml = str;
   }

 replace above code with below

private void fillMenu()
{
    clsTopic objTopic = new clsTopic(true);
    objTopic.SelectAll();

    clsArtical objArtical = new clsArtical(true);
    objArtical.SelectAll();

    string str = string.Empty;
    int i = 0;
    int j = 0;

    for (i = 0; i < objTopic.ListclsTopic.Count; i++)
    {
        str += @"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>" + objTopic.ListclsTopic[i].TopicName + @"</a><div class='dropdown-content'>";

        for (j = 0; j < objArtical.ListclsArtical.Count; j++)
        {
            if (objArtical.ListclsArtical[j].TopicID == objTopic.ListclsTopic[i].TopicID)
            {
                str += @"<a href='#'>" + objArtical.ListclsArtical[j].ArticalName + "</a>";
            }
        }

        str += "</div></li>";
    }
    topicmenu.InnerHtml = str;
}

and you need to use below css

<style type="text/css">
    ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #428bca;
    }
        
    li
    {
        float: left;
    }
        
    li a, .dropbtn
    {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
        
    li a:hover, .dropdown:hover .dropbtn
    {
        background-color: inherit;
    }
        
    li.dropdown
    {
        display: inline-block;
    }
        
    .dropdown-content
    {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
        
    .dropdown-content a
    {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
        
    .dropdown-content a:hover
    {
        background-color: #f1f1f1;
    }
        
    .dropdown:hover .dropdown-content
    {
        display: block;
    }
</style>

And if you want to use your css then you need to make changes in the code behind by applying your css logic.