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
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
Output:
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();
}
}
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(" ");
//==== 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
Hope you enjoyed this tutorial, don't forget to leave a comment!