Create Navigation left menu in ASP NET | bootstrap | jQuery
rashid@rashicode.com
0 Comments
asp.net, asp.net core navigation menu, asp.net master page navigation menu, bootstrap, bootstrap 4 sidebar, bootstrap 4 sidebar and navbar, bootstrap 4 sidebar collapse, bootstrap 4 sidebar dropdown, bootstrap 4 sidebar menu, bootstrap 4 sidebar menu responsive, bootstrap 4 sidebar menu toggle, bootstrap 4 sidebar nav, bootstrap 4 sidebar nav collapse, bootstrap 4 sidebar navigation, bootstrap 4 sidebar responsive, bootstrap 4 sidebar tutorial, bootstrap in asp.net, bootstrap scrollspy left menu, bootstrap sidebar, create menu using bootstrap and partial view, Create Navigation left menu in ASP NET | bootstrap | jQuery, create navigation left menu of master page in asp net, dropdown menu in asp.net, how to create a dropdown menu bar in asp.net, how to create menu bar in asp.net, how to create navigation bar in asp.net using bootstrap, menu, responsive menu bar in asp.net using bootstrap, sidebar, sidebar navigation menu, using bootstrap in asp.net
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