Multilevel Dynamic CSS3 Dropdown Menu in asp .net

In this article we will learn how to create dynamic Multilevel HTML and CSS3 dropdown menu using asp .net. This menu is very useful when we create dynamic websites [CMS websites] where administrator has option to add N number of new pages. So if there is an option to create N number of pages we also need navigation menu which can work accordingly.  

In this article we will learn following things :

1. How to create database table to support Multilevel parent child relationship.

2. How to create User interface to create Multiple level parent child relationship.

3. How to create HTML and CSS3 dropdown menu which can work for N levels.

 

Disclaimer: HTML and CSS3 for dropdown menu is designed by Red-Team-Design.  I have converted static dropdown menu to database driven dynamic dropdown menu for learning purpose only. For more information on CSS3 dropdown menu designed by RTD you can visit here.

 
Database Structure
 
Dynamic-Mulitple-Level-HTML-Menu-in-asp-net
 
CREATE TABLE [dbo].[Menu](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[ParentId] [int] NULL,
	[MenuName] [nvarchar](200) NULL,
	[URL] [nvarchar](500) NULL,
	[CreatedOn] [datetime] NULL,
 CONSTRAINT [PK_Menu] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object:  Default [DF_Menu_CreatedOn]    Script Date: 04/05/2014 13:17:33 ******/
ALTER TABLE [dbo].[Menu] ADD  CONSTRAINT [DF_Menu_CreatedOn]  DEFAULT (getdate()) FOR [CreatedOn]
 
HTML Structure
 
 
Parent
Name
URL
 
 
Output:
 
Dynamic-Mulitple-Level-HTML-Menu-in-asp-net
 
bindParentItems() Method
Method to bind parent items into parent dropdownlist.
 
//===== Method to bind items into parent Dropdownlist.
    public void bindParentItems()
    {
        using (dynamicMenuEntities context = new dynamicMenuEntities())
        {
            ddlParent.DataSource = (from r in context.Menus
                                    select new { r.Id, r.MenuName }).ToList();
            ddlParent.DataTextField = "MenuName";
            ddlParent.DataValueField = "Id";
            ddlParent.DataBind();


            //==== Insert Default value.
            ddlParent.Items.Insert(0, new ListItem("Select Parent", "-1"));
            ddlParent.Items.Insert(1, new ListItem("Default (Level 0)", "0"));

        }
    }
 
Call bindParentItems() from Page_Load
 
protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            //==== Bind parent dropdownlist
            bindParentItems();

        }
    }
 
Dynamic-Mulitple-Level-HTML-Menu-in-asp-net
 
Button Click Event
 
//===== Button to add new menu items.
    protected void btnAddMenuItem_Click(object sender, EventArgs e)
    {
        using (dynamicMenuEntities context = new dynamicMenuEntities())
        {
            Menu obj = new Menu();
            obj.MenuName = txtName.Text.Trim();
            obj.ParentId = Convert.ToInt32(ddlParent.SelectedItem.Value);
            obj.URL = txtURL.Text.Trim();
            context.Menus.Add(obj);
            context.SaveChanges();

            //==== Rebind parent drop down with new values.
            bindParentItems();

            //==== Clear Form Fields.
            clearFormFields();

            //==== Rebind Menu.
            generateDynamicMenu();

            //--- Show Success message.
            lblConfirmationMessage.Text = "Menu item saved successfully.";
        }

    }
 
ClearFormFields() Method
Mehtod to reset form fields to original state.
 
 //==== Method to clear input fields.
    public void clearFormFields()
    {
        txtURL.Text = string.Empty;
        txtName.Text = string.Empty;
        ddlParent.ClearSelection();
    }
 
DIV to place HTML menu
 
 
 
 
generateDynamicMenu() Method
This method will read data recursively form database and generate HTML for dropdown menu and bind into DIV "divToSHowMenu".
 
 //==== Method to create dynamic menu.
    public void generateDynamicMenu()
    {
        StringBuilder sbMenu = new StringBuilder();

        //==== Created first ul element of the unordered list to generate menu also assigned id="menu" as our entire css is based on this id.
        sbMenu.Append(" 
    "); //==== Call recursive method to get all child elements according to parents. //=== We we pass 0 as argument as 0 is id of default parent. string childItems = getMenuItems(0); sbMenu.Append(childItems); //==== Close dynamic menu unordered list. sbMenu.Append("
"); //==== Show generated menu inside div. divToShowMenu.InnerHtml = sbMenu.ToString(); }
 
 //==== Recrusive method.
    StringBuilder sbMenu = new StringBuilder();
    int childCount = 0;
    public string getMenuItems(int parentId)
    {
        using (dynamicMenuEntities context = new dynamicMenuEntities())
        {
            var menuObj = from r in context.Menus
                          where r.ParentId == parentId
                          select new { r.MenuName, r.URL, r.Id };
            foreach (var obj in menuObj)
            {
                childCount = context.Menus.Count(r => r.ParentId == obj.Id);
                if (childCount > 0)
                {
                    sbMenu.Append("
  • " + obj.MenuName + ""); return sbMenu.ToString(); }
  •  
    Call bindParentItems() from Page_Load
    To bind menu on page load.
     
     protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //==== Bind parent dropdownlist
                bindParentItems();
    
                //==== Bind Menu.
                generateDynamicMenu();
            }
        }
    
     
    CSS
    courtesy of Red-Team-Design
    body {
        width: 960px;
        margin: 40px auto;
    }
    
    /* Main menu */
    
    #menu {
        width: 100%;
        margin: 0;
        padding: 10px 0 0 0;
        list-style: none;
        background: #111;
        background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
        background: -webkit-linear-gradient(#444, #111);
        background: -o-linear-gradient(#444, #111);
        background: -ms-linear-gradient(#444, #111);
        background: linear-gradient(#444, #111);
        -moz-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 2px 1px #9c9c9c;
        -webkit-box-shadow: 0 2px 1px #9c9c9c;
        box-shadow: 0 2px 1px #9c9c9c;
    }
    
        #menu li {
            float: left;
            padding: 0 0 10px 0;
            position: relative;
            line-height: 0;
        }
    
        #menu a {
            float: left;
            height: 25px;
            padding: 0 25px;
            color: #999;
            text-transform: uppercase;
            font: bold 12px/25px Arial, Helvetica;
            text-decoration: none;
            text-shadow: 0 1px 0 #000;
        }
    
        #menu li:hover > a {
            color: #fafafa;
        }
    
        *html #menu li a:hover /* IE6 */ {
            color: #fafafa;
        }
    
        #menu li:hover > ul {
            display: block;
        }
    
        /* Sub-menu */
    
        #menu ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
            position: absolute;
            top: 35px;
            left: 0;
            z-index: 99999;
            background: #444;
            background: -moz-linear-gradient(#444, #111);
            background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
            background: -webkit-linear-gradient(#444, #111);
            background: -o-linear-gradient(#444, #111);
            background: -ms-linear-gradient(#444, #111);
            background: linear-gradient(#444, #111);
            -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
            -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
            box-shadow: 0 0 2px rgba(255,255,255,.5);
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
    
            #menu ul ul {
                top: 0;
                left: 150px;
            }
    
            #menu ul li {
                float: none;
                margin: 0;
                padding: 0;
                display: block;
                -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
                -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
                box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
            }
    
                #menu ul li:last-child {
                    -moz-box-shadow: none;
                    -webkit-box-shadow: none;
                    box-shadow: none;
                }
    
            #menu ul a {
                padding: 10px;
                height: 10px;
                width: 130px;
                height: auto;
                line-height: 1;
                display: block;
                white-space: nowrap;
                float: none;
                text-transform: none;
            }
    
            *html #menu ul a /* IE6 */ {
                height: 10px;
            }
    
            *:first-child + html #menu ul a /* IE7 */ {
                height: 10px;
            }
    
                #menu ul a:hover {
                    background: #0186ba;
                    background: -moz-linear-gradient(#04acec, #0186ba);
                    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
                    background: -webkit-linear-gradient(#04acec, #0186ba);
                    background: -o-linear-gradient(#04acec, #0186ba);
                    background: -ms-linear-gradient(#04acec, #0186ba);
                    background: linear-gradient(#04acec, #0186ba);
                }
    
            #menu ul li:first-child > a {
                -moz-border-radius: 5px 5px 0 0;
                border-radius: 5px 5px 0 0;
            }
    
                #menu ul li:first-child > a:after {
                    content: '';
                    position: absolute;
                    left: 30px;
                    top: -8px;
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 8px solid #444;
                }
    
            #menu ul ul li:first-child a:after {
                left: -8px;
                top: 12px;
                width: 0;
                height: 0;
                border-left: 0;
                border-bottom: 5px solid transparent;
                border-top: 5px solid transparent;
                border-right: 8px solid #444;
            }
    
            #menu ul li:first-child a:hover:after {
                border-bottom-color: #04acec;
            }
    
            #menu ul ul li:first-child a:hover:after {
                border-right-color: #04acec;
                border-bottom-color: transparent;
            }
    
    
            #menu ul li:last-child > a {
                -moz-border-radius: 0 0 5px 5px;
                border-radius: 0 0 5px 5px;
            }
    
        /* Clear floated elements */
        #menu:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
    
    * html #menu {
        zoom: 1;
    }
    /* IE6 */
    *:first-child + html #menu {
        zoom: 1;
    }
    
    
     
     
    Final output
     
    Dynamic-Mulitple-Level-HTML-Menu-in-asp-net

     

     

    Hope you enjoyed this tutorial, don't forget to leave a comment!

    Best quality Asp .Net Ajax Control Toolkit tutorials.
    sooooooooooooooooooooooo much nice thanks bro
    31-May-2014 From  sonustar
    Thanks Sonustar
    4-Jun-2014 From  Anuj
    Its Really Helpful also give some clear stuff regarding Dataset as you use in back side.
    12-Dec-2014 From  Sagar
    Really Nice, This is what am looking. Created a menu list from DB based on user role , so Home, change password and Log off is default for all the menus. How to add a default menu other than menu list in the above code.
    22-Apr-2021 From  Dia

    Give your valuable comments.

    Name
    Email
    Comment
    2 + 4 =
     

    About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
    50+ C# Programs for beginners to practice