Q. How to Create Dynamic menu using css and sql server.

Step 1. Create Menu Table.

Step 2.Create Sub_Menu Table

Step 3. Create Child_Menu

Step 4. Create One Style Sheet Right Click on Solution Explorer and Select Add after that select New Folder name as CSS.

Step 5. Now right click on CSS Folder-> Add->Select StyleSheet

Write the bellow code.




<style>
        /* Base Styles */#cssmenu > ul, #cssmenu > ul li, #cssmenu > ul ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #cssmenu > ul
        {
            position: relative;
            z-index: 597;
        }
        #cssmenu > ul li
        {
            float: left;
            min-height: 1px;
            line-height: 1.3em;
            vertical-align: middle;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            position: relative;
            z-index: 599;
            cursor: default;
        }
        #cssmenu > ul ul
        {
            visibility: hidden;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 598;
            width: 100%;
        }
        #cssmenu > ul ul li
        {
            float: none;
        }
        #cssmenu > ul ul ul
        {
            top: 1px;
            left: 99%;
        }
        #cssmenu > ul li:hover > ul
        {
            visibility: visible;
        }
        /* Align last drop down RTL */#cssmenu > ul > li.last ul ul
        {
            left: auto !important;
            right: 99%;
        }
        #cssmenu > ul > li.last ul
        {
            left: auto;
            right: 0;
        }
        #cssmenu > ul > li.last
        {
            text-align: right;
        }
        /* Theme Styles */#cssmenu > ul
        {
            border-top: 4px solid #3fa338;
            font-family: Calibri, Tahoma, Arial, sans-serif;
            font-size: 14px;
            background: #1e1e1e;
            background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
            background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
            width: auto;
            zoom: 1;
        }
        #cssmenu > ul:before
        {
            content: '';
            display: block;
        }
        #cssmenu > ul:after
        {
            content: '';
            display: table;
            clear: both;
        }
        #cssmenu > ul li a
        {
            display: inline-block;
            padding: 10px 22px;
        }
        #cssmenu > ul > li.active, #cssmenu > ul > li.active:hover
        {
            background-color: #3fa338;
        }
        #cssmenu > ul > li > a:link, #cssmenu > ul > li > a:active, #cssmenu > ul > li > a:visited
        {
            color: #ffffff;
        }
        #cssmenu > ul > li > a:hover
        {
            color: #ffffff;
        }
        #cssmenu > ul ul ul
        {
            top: 0;
        }
        #cssmenu > ul li li
        {
            background-color: #ffffff;
            border-bottom: 1px solid #ebebeb;
            font-size: 12px;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            background-color: #F5F5F5;
        }
        #cssmenu > ul > li.hover, #cssmenu > ul > li:hover
        {
            background-color: #3fa338;
            -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
        }
        #cssmenu > ul a:link, #cssmenu > ul a:visited
        {
            color: #9a9a9a;
            text-decoration: none;
        }
        #cssmenu > ul a:hover
        {
            color: #9a9a9a;
        }
        #cssmenu > ul a:active
        {
            color: #9a9a9a;
        }
        #cssmenu > ul ul
        {
            border: 1px solid #CCC \9;
            -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            width: 150px;
        }
    </style>


Step 6. Add This library   
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

note:- Drag and drop your css file from css folder and put in header sections

    <link href="../CSS/StyleSheet.css" rel="stylesheet" />


Step 7. now Create your ASPX PAGE and give name as HOME.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HOME.aspx.cs" Inherits="Aqua_Demo.ASPX.HOME" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <link href="../CSS/StyleSheet.css" rel="stylesheet" />
</head>
<body>
    
    <form id="form1" runat="server">
    <div>
     <div id='cssmenu' runat="server">
        </div>
    </div>
    </form>
</body>
</html>

Step 8. Now go to code behind  and write the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;
using Business_Access_Layer;
namespace Aqua_Demo.ASPX
{
  
    public partial class HOME : System.Web.UI.Page
    {
        public string connectionstring = ConfigurationManager.ConnectionStrings["tute"].ToString();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GetMenuData();
            }
        }

        public void GetMenuData()
        {
            StringBuilder objstr = new StringBuilder();
            List<Business_Access_Layer.Menu> objpmenu = new List<Business_Access_Layer.Menu>();
            List<SubMenu> objsmenu = new List<SubMenu>();
            List<ChildSubMenu> objcmenu = new List<ChildSubMenu>();
            objpmenu = GetMenu();
            objsmenu = GetSubMenu();
            objcmenu = GetChildSubMenu();

            objstr.Append("<ul>");

            foreach (Business_Access_Layer.Menu _pitem in objpmenu)
            {
                objstr.Append("<li><a href='" + _pitem.MenuUrl + "'><span>" + _pitem.MenuName + "</span></a>");

                var subitem = objsmenu.Where(m => m.ParentId == _pitem.Id).ToList();
                if (subitem.Count > 0)
                {
                    objstr.Append("<ul>");
                    foreach (var _sitem in subitem)
                    {
                        objstr.Append("<li class='has-sub'><a href='" + _sitem.SubMenuUrl + "'><span>" + _sitem.SubMenuName + "</span></a>");

                        var childsubitem = objcmenu.Where(s => s.SubParentId == _sitem.Id).ToList();
                        if (childsubitem.Count > 0)
                        {
                            objstr.Append("<ul>");
                            foreach (var _citem in childsubitem)
                            {
                                objstr.Append("<li class='has-sub'><a href='" + _citem.ChildSubMenuUrl + "'><span>" + _citem.ChildSubMenuName + "</span></a></li>");
                            }
                            objstr.Append("</ul>");
                        }

                        objstr.Append("</li>");
                    }
                    objstr.Append("</ul>");
                }

                objstr.Append("</li>");
            }

            objstr.Append("</ul>");

            cssmenu.InnerHtml = objstr.ToString();
        }
        /// 
        /// Get Data from Menu table
        /// 

        /// 
        public List<Business_Access_Layer.Menu> GetMenu()
        {
            List<Business_Access_Layer.Menu> objmenu = new List<Business_Access_Layer.Menu>();
            DataTable _objdt = new DataTable();
            string querystring = "select * from Menu;";
            SqlConnection _objcon = new SqlConnection(connectionstring);
            SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            if (_objdt.Rows.Count > 0)
            {
                for (int i = 0; i < _objdt.Rows.Count; i++)
                {
                    objmenu.Add(new Business_Access_Layer.Menu { Id = (int)_objdt.Rows[i]["Id"], MenuName = _objdt.Rows[i]["MenuName"].ToString(), MenuUrl = _objdt.Rows[i]["MenuUrl"].ToString() });
                }
            }
            return objmenu;
        }
        /// 
        /// Get data from SubMenu table
        /// 

        /// 
        public List<SubMenu> GetSubMenu()
        {
            List<SubMenu> objmenu = new List<SubMenu>();
            DataTable _objdt = new DataTable();
            string querystring = "select * from SubMenu;";
            SqlConnection _objcon = new SqlConnection(connectionstring);
            SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            if (_objdt.Rows.Count > 0)
            {
                for (int i = 0; i < _objdt.Rows.Count; i++)
                {
                    objmenu.Add(new SubMenu { Id = (int)_objdt.Rows[i]["Id"], ParentId = (int)_objdt.Rows[i]["ParentId"], SubMenuName = _objdt.Rows[i]["SubMenuName"].ToString(), SubMenuUrl = _objdt.Rows[i]["SubMenuUrl"].ToString() });
                }
            }
            return objmenu;
        }
        /// 
        /// Get data from childSubmenu table
        /// 

        /// 
        public List<ChildSubMenu> GetChildSubMenu()
        {
            List<ChildSubMenu> objmenu = new List<ChildSubMenu>();
            DataTable _objdt = new DataTable();
            string querystring = "select * from ChildSubMenu;";
            SqlConnection _objcon = new SqlConnection(connectionstring);
            SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            if (_objdt.Rows.Count > 0)
            {
                for (int i = 0; i < _objdt.Rows.Count; i++)
                {
                    objmenu.Add(new ChildSubMenu { SubParentId = (int)_objdt.Rows[i]["SubParentId"], ChildSubMenuName = _objdt.Rows[i]["ChildSubMenuName"].ToString(), ChildSubMenuUrl = _objdt.Rows[i]["ChildSubMenuUrl"].ToString() });
                }
            }
            return objmenu;
        }
    }
}

Now your OutPut is ready