Create Navigation left menu in ASP NET | bootstrap | jQuery
Create Navigation left menu or sidebar of Master Page in ASP NET | bootstrap | jQuery
Hi, in this article, you will learn how to add sidebar, Navigation left toggle menu in Master Page in asp.net webforms using Html, css, Bootstrap, jQuery .
Code Behind
Step 1. add the following code in master page
<html lang="en">
<head runat="server">
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="vendor/StyleSheet1.css" rel="stylesheet" />
<%-- https://rashicode.com--%>
</head>
<body>
<form runat="server">
<div class="d-flex" id="wrapper">
<div class="bg-light border-light" id ="sidebar-wrapper">
<div class="sidebar-heading">RashiCode</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Blog</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Overview</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Profile</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Portfolio</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Events</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Aboutus</a>
<a href="#" class="list-group-item list-group-item-action bg-light">Contect us</a>
</div>
</div>
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button type="button" id="menu-toggle" class="btn btn-primary">
<i class="fa fa-bars"></i>
<span class="sr-only">Toggle Menu</span>
</button>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<p>
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© RashiCode.com <%: DateTime.Now.Year %> - My ASP.NET Application Simple Sidebar</p>
</footer>
</div>
</form>
</body>
</html>
Step 2 : add new style sheet and paste the code below
/*!
* Licensed(https://rashicode.com)
*/
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -14rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading
{
padding:0.880rem 1.26rem;
font-size:1.264rem;
}
#sidebar-wrapper .list-group
{
width:15rem;
}
#page-content-wrapper
{
min-width:100vw;
}
#wrapper.toggled #sidebar-wrapper{
margin-left:0;
}
@media(min-width:768px)
{
#sidebar-wrapper{
margin-left:0;
}
#page-content-wrapper
{
min-width:0;
width:100%;
}
#wrapper.toggled #sidebar-wrapper{
margin-left:-15rem;
}
}
Video Tutorial
Source Code
Thanks for visiting us. Please don’t forget to subscribe our official YouTube Channel RashiCode