Dynamic Mega Menu With Asp.Net with c#,java script and Sql Server.

Introduction:

In this article you’ll see how to Create dynamic  Mega Menu in asp.net .Having a menu and sub menus with links is very normal in a Web application. Typically, we create static menu and menu items. But sometimes we need dynamic mega menu when we do not know what the menu names and links will be called.

Mega menus are a growing trend in web design . For sites that involve a lot of pages and/or products, a mega menu may be able to improve navigation and usability.
Dynamic Mega Menu with ASP.NET, C#, jQuery and SQL Server solution that I would like to share with others puzzled with the same as was one of my website development i was having a tough time creating a Mega menu from database.

Step1  Database: 

I have 4 table category,subcategory  subcategory2 and  Brand 

GO

/****** Object:  Table [dbo].[tbl_Category]    Script Date: 07/30/2015 08:03:43 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tbl_Category](
[Cat_Id] [int] IDENTITY(1,1) NOT NULL,
[Cat_Name] [varchar](100) NULL,
[Cat_Description] [varchar](max) NULL,
[Cat_Image] [varchar](150) NULL,
[Cat_Status] [bit] NULL,
[Cat_Deleted_At] [bit] NULL,
[Cat_Created_At] [datetime] NULL,
[Cat_Updated_At] [datetime] NULL,

 CONSTRAINT [PK_tbl_Category] PRIMARY KEY CLUSTERED
(
[Cat_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] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO



GO

/****** Object:  Table [dbo].[tbl_SubCategory]    Script Date: 07/30/2015 08:04:38 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tbl_SubCategory](
[SubCat_Id] [int] IDENTITY(1,1) NOT NULL,
[Cat_Id] [int] NULL,
[Cat_Name] [nvarchar](100) NULL,

[Cat_Image] [varchar](150) NULL,
[Cat_Status] [bit] NULL,

[Cat_Deleted_At] [bit] NULL,
[Cat_Created_At] [datetime] NULL,
[Cat_Updated_At] [datetime] NULL,

 CONSTRAINT [PK_tbl_SubCategory] PRIMARY KEY CLUSTERED
(
[SubCat_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] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO




GO

/****** Object:  Table [dbo].[tbl_SubCategory2]    Script Date: 07/30/2015 08:05:20 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tbl_SubCategory2](
[SubCat_Id2] [int] IDENTITY(1,1) NOT NULL,
[SubCat_Id] [int] NULL,
[Cat_Name] [nvarchar](100) NULL,

[Cat_Image] [varchar](150) NULL,
[Cat_Status] [bit] NULL,

[Cat_Deleted] [bit] NULL,
[Cat_CreatedAt] [datetime] NULL,
[Cat_UpdatedAt] [datetime] NULL,

 CONSTRAINT [PK_tbl_SubCategory2] PRIMARY KEY CLUSTERED
(
[SubCat_Id2] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO


GO

/****** Object:  Table [dbo].[tbl_Brand]    Script Date: 07/30/2015 08:06:07 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

SET ANSI_PADDING ON
GO

CREATE TABLE [dbo].[tbl_Brand](
[Brand_Id] [int] IDENTITY(1,1) NOT NULL,
[SubCat_Id] [int] NULL,
[Cat_Name] [nvarchar](100) NULL,

[Cat_Image] [varchar](150) NULL,
[Cat_Status] [bit] NULL,

[Cat_Deleted] [bit] NULL,
[Cat_CreatedAt] [datetime] NULL,
[Cat_UpdatedAt] [datetime] NULL,

 CONSTRAINT [PK_tbl_Brand] PRIMARY KEY CLUSTERED
(
[Brand_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] TEXTIMAGE_ON [PRIMARY]

GO

SET ANSI_PADDING OFF
GO

Step 2 :

Create Aspx page and add css ,javascript file ,Repeater and Datalist control the main task of java script file is to Make multicolumn(Same Field) and Visible sumbmenu ,sumbmenu2 and Brand based on which catgory you are on mousehover.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Megamenu.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
            <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400' rel='stylesheet'
        type='text/css'>
    <link href="megamenu.css" rel="stylesheet" />
 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="menu">

<div class="container">
<ul class="megamenu ">

    <asp:Repeater  ID="Manincategoryrptr" runat="server" OnItemDataBound="Repeater1_ItemDataBound">

<ItemTemplate>
     <li class="grid">
          <asp:Label ID="lblid" runat="server" Text='<%#Eval("Cat_Id") %>'  Visible="false"/>
     
            <a  href="#"><%# Eval("Cat_Name") %>&nbsp;<i class="fa caret  pull-right"></i> </a>
  <div class="megapanel">
<div class="col1">
<div class="h_nav">
   <div class="menusec">



    <asp:Datalist  ID="subcategorydatalist"   RepeatDirection="Horizontal" Visible="True" RepeatLayout="Table" runat="server"  OnItemDataBound="Repeater2_ItemDataBound1"   >
                         
           
                            <ItemTemplate>
                         
                           
                                <h2><asp:Label ID="lblid" runat="server" Text='<%#Eval("SubCat_Id") %>'  Visible="false"/>

            <a  href="#"><%# Eval("Cat_Name") %> </a>
  </h2>
                          <ul>
             <asp:Datalist ID="subcategory2ddatalist"  RepeatLayout="Table" runat="server" RepeatColumns="1" RepeatDirection="Vertical" >
                 <HeaderTemplate></HeaderTemplate>
               <ItemTemplate>
                     <li>
                       
                       
            <a  href="#"><%# Eval("Cat_Name") %>

                     </a></li>
                 </ItemTemplate>
                         
                       
                        </asp:Datalist>
             
             </ul>
             </ItemTemplate>
           </asp:Datalist>

    </div>
</div>

<div class="h_nav brandse">
<h2>Brand</h2>
<ul>
    <asp:DataList ID="branddatalist" runat="server" RepeatLayout="flow" OnItemDataBound="DataList1_ItemDataBound" OnItemCreated="DataList1_ItemCreated"  RepeatDirection="Vertical"  >
             <HeaderTemplate>
             
             </HeaderTemplate>
               <ItemTemplate>
                     <li>
            <a  href="#"><%# Eval("Cat_Name") %>

                     </a></li>
                   
                 </ItemTemplate>
                         
                       
                        </asp:DataList>
                         


</ul>

</div>
   <div class="clearfix"></div>
</div>
             



</li>            
       
</ItemTemplate>
</asp:Repeater>

</ul>

</div>
</div>
    </div>
         <script src="/js/megamenu.js"></script>
        <script src="megamenu.js"></script>
   <script>$(document).ready(function () { $(".megamenu").megamenu(); });</script>
        <script>
         
    </script>

    </form>
</body>
</html>

Step 3: 

Add connection in Webconfig

   <connectionStrings>
    <add name="ErpConnection" connectionString="Data Source=PATEL\SQLEXPRESS;Initial Catalog=megamenudatabase;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>

 

Step 4: 

Add c# code

using System;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if(!IsPostBack)

        {

            Manincategoryrptr.DataSource = CategoryData();

            Manincategoryrptr.DataBind();

        

        }

    }

    protected void DataList1_ItemDataBound(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)

    {

    }

    protected void DataList1_ItemCreated(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)

    {

      

    }

   

    protected void Repeater2_ItemDataBound1(object sender, System.Web.UI.WebControls.DataListItemEventArgs e)

    {

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

        {

            Label lblid = (Label)e.Item.FindControl("lblid");

            DataRowView drv = (DataRowView)e.Item.DataItem;

            int SubCat_Id = Convert.ToInt32(drv["SubCat_Id"]);

            DataList subcategory2ddatalist = (DataList)e.Item.FindControl("subcategory2ddatalist");

            subcategory2ddatalist.DataSource = subcategory2(Convert.ToInt32(lblid.Text));

            subcategory2ddatalist.DataBind();

        }

    }

    private DataTable CategoryData()

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ErpConnection"].ToString()); con.Open();

        string sql = "select  * from tbl_Category where Cat_Status='True' ";

        SqlCommand cmd = new SqlCommand(sql, con);

        SqlDataAdapter da = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();

        da.Fill(dt);

        con.Close();

        return dt;

    }

    private DataTable subcategory(int categoryID)

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ErpConnection"].ToString());

        con.Open();

        string sql = "select  SubCat_Id,Cat_Name from tbl_SubCategory where Cat_Status='True'  and  Cat_Id=" + categoryID;

        SqlCommand cmd = new SqlCommand(sql, con);

        SqlDataAdapter da = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();

        da.Fill(dt);

        con.Close();

        return dt;

    }

    private DataTable bindbrand(int categoryID)

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ErpConnection"].ToString());

        con.Open();

        string sql = "select  top(8) tb.Brand_Id, tb.Cat_Name from tbl_Brand  tb inner join tbl_SubCategory ts on ts.SubCat_Id=tb.SubCat_Id where   tb.Cat_Status='True'   and ts.Cat_Id=" + categoryID;

        SqlCommand cmd = new SqlCommand(sql, con);

        SqlDataAdapter da = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();

        da.Fill(dt);

        con.Close();

        return dt;

    }

    private DataTable subcategory2(int SubCat_Id)

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ErpConnection"].ToString());

        con.Open();

        string sql = "select  SubCat_Id2,Cat_Name from tbl_SubCategory2 where  Cat_Status='True'  and SubCat_Id=" + SubCat_Id;

        SqlCommand cmd = new SqlCommand(sql, con);

        SqlDataAdapter da = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();

        da.Fill(dt);

        con.Close();

        return dt;

    }

    protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)

    {

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)

        {

            Label lblid = (Label)e.Item.FindControl("lblid");

            DataRowView drv = (DataRowView)e.Item.DataItem;

            int categoryID = Convert.ToInt32(drv["Cat_Id"]);

            DataList subcategorydatalist = (DataList)e.Item.FindControl("subcategorydatalist");

            subcategorydatalist.DataSource = subcategory(Convert.ToInt32(lblid.Text));

            subcategorydatalist.DataBind();

            DataList branddatalist = (DataList)e.Item.FindControl("branddatalist");

            branddatalist.DataSource = bindbrand(Convert.ToInt32(lblid.Text));

            branddatalist.DataBind();

        }

    }

}

                                        Snapshot

when mousehover on  Electronics category

when mousehover on  Women category