Dynamic Menu and Submenu with Cache Memory

Introduction

This blog will explain how to show Dynamic menu and submenu binding in ASP.Net. For the design part, create a CSS file.

Css Page

/* Start Menu */

nav {
	position: relative;
	width: 360px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li {
	/* Sub Menu */
}

nav ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	-ms-transition: 0.2s linear;
	-o-transition: 0.2s linear;
	transition: 0.2s linear;
	background: #379add;
}

nav ul li a:hover {
	background: #1d4f71;
	color: #fff;
}

nav ul li a .fa {
	width: 16px;
	text-align: center;
	margin-right: 5px;
	float: right;
}

nav ul ul {
	background: rgba(0, 0, 0, 0.2);
}

nav ul li ul li a {
	border-left: 4px solid transparent;
	padding: 10px 20px;
}

nav ul li ul li a:hover {
	border-left: 4px solid #3498db;
}


.chevron-down::before {
	border-style: solid;
	border-width: 0.15em 0.15em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
	top: 0;
	transform: rotate(135deg);
	margin-top: 2px;
	margin-left: 5px;
}

.chevron-up::before {
	border-style: solid;
	border-width: 0.15em 0.15em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
	top: 0;
	margin-top: 6px;
	margin-left: 5px;
}

/* End Menu */

Aspx page

The menu and submenu show dynamically with the help of cache memory use. Only one-time database call.

<script src = "../Js/jquery-3.4.1.min.js" > < /script>

	<script type = "text/javascript" >
	$(document).ready(function() {
		$('.sub-menu ul').hide();
		$(".sub-menu a").click(function() {
			$(this).parent(".sub-menu").children("ul").slideToggle("100");
			$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
			$(this).find(".arrow").toggleClass("chevron-up chevron-down");
		});
	}); 
	
</script>

<nav class = "animated bounceInDown bg-dark" >
<ul >
	<asp: Repeater ID = "RptMainMenu"
runat = "server"
OnItemDataBound = "RptMainMenu_ItemDataBound" >
	<ItemTemplate >
	<li class = "sub-menu " > < a href = "#" > < % # Eval("MenuName") % > < span id = "UpDownArrow"
class = "chevron-down arrow" > < /span><div class="fa fa-caret-down right"></div > < /a> <
ul style = "display:none;" >
	<asp: Repeater ID = "RptSubMenu"
runat = "server" >
	<ItemTemplate >
	<li > < a href = '<%# Eval("FormUrl").ToString().Replace("~", "")%>' > < % # Eval("MenuName") %> < /a></li >
	</ItemTemplate> 
	</asp:Repeater> 
	<asp: HiddenField ID = "hfMainMenuId"
runat = "server"
Value = '<%# Eval("ID") %>' / >
	</ul>
	</li> 
	</ItemTemplate> 
	</asp:Repeater> 
	</ul> 
	</nav>