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>
Join the conversation! Your thoughts help the community grow.