Skip to main content

ASP.NET menu control – A great looking alternative

ASP.NET menu control – A great looking alternative

ASP.NET menu control provides very limited functionality in context to a great looking website. Using the web’s most popular open-source HTML, CSS, and JS framework – The one and only Bootstrap you can create a great looking website in minutes. So here’s a example on how you can integrate a html side bar menu in your ASP.NET website project.

Please note that the Original code for this sidebar menu can be found on Start Bootstrap.

CSS

In your project make a new folder named css and make a new css file named simple-sidebar.css

simple-sidebar.css :


/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
This is a modified style-sheet by Parallelcodes.com. To view the original style-sheet and original post please visit : 
SOURCE http://startbootstrap.com/template-overviews/simple-sidebar
GITHUB URL https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
BOOTSTRAP http://getbootstrap.com/components/
 */

/* Toggle Styles */

#profilediv
{
 background-color: Blue;
 height: 100px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 width: 100px;
 box-shadow: 0 0 0 2px crimson;
}

#wrapper
{
 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

#wrapper.toggled
{
 padding-left: 250px;
}

#sidebar-wrapper
{
 z-index: 1000;
 position: fixed;
 left: 250px;
 width: 0;
 height: 100%;
 margin-left: -250px;
 overflow-y: auto;
 background: #000000;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper
{
 width: 250px;
}

#page-content-wrapper
{
 width: 100%;
 position: absolute;
 padding: 15px;
}

#wrapper.toggled #page-content-wrapper
{
 position: absolute;
 margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav
{
 position: absolute;
 top: 0;
 width: 250px;
 margin: 0;
 padding: 0;
 list-style: none;
}

.sidebar-nav li
{
 text-indent: 20px;
 line-height: 40px;
}

.sidebar-nav li a
{
 display: block;
 text-decoration: none;
 color: #fff;
}

.sidebar-nav li a:hover
{
 text-decoration: none;
 color: #ffff80;
 font-weight:bold;
 background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active, .sidebar-nav li a:focus
{
 text-decoration: none;
}

.sidebar-nav > .sidebar-brand
{
 height: 65px;
 font-size: 18px;
 font-family:Arial;
 line-height: 60px;
}

.sidebar-nav > .sidebar-brand a
{
 color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover
{
 color: #fff;
 background: none;
}

@media (min-width:768px)
{
 #wrapper
 {
 padding-left: 250px;
 }

 #wrapper.toggled
 {
 padding-left: 0;
 }

 #sidebar-wrapper
 {
 width: 250px;
 }

 #wrapper.toggled #sidebar-wrapper
 {
 width: 0;
 }

 #page-content-wrapper
 {
 padding: 20px;
 position: relative;
 }

 #wrapper.toggled #page-content-wrapper
 {
 position: relative;
 margin-right: 0;
 }

}

ASPX page :


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleSideBar.aspx.cs" Inherits="SimpleSideBar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="">
 <meta name="author" content="">
 <%--SOURCE http://startbootstrap.com/template-overviews/simple-sidebar/--%>
 <%--GITHUB URL https://github.com/IronSummitMedia/startbootstrap-simple-sidebar--%>
 <title>Simple ASP.NET Sidebar</title>
 <!-- Bootstrap Core CSS -->
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <!-- Custom CSS -->
 <link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
 <form id="form1" runat="server">
 <div id="wrapper">
 <!-- Sidebar -->
 <div id="sidebar-wrapper">
 <ul class="sidebar-nav">
 <br />
 <li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
 <li><a href="Music.aspx"><span class="glyphicon glyphicon-music"></span>&nbsp;&nbsp;Music</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;Search</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Contacts</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;Delete it!</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-cloud"></span>&nbsp;&nbsp;Cloud</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;Refresh</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-print"></span>&nbsp;&nbsp;Printing</a>
 </li>
 <li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;Logout !!!!</a>
 </li>
 </ul>
 </div>
 <div id="page-content-wrapper">
 <div class="container-fluid">
 <div class="row">
 <div class="col-lg-12" style="color:#000">
 <h1>
 <a href="#"><span class="glyphicon glyphicon-th-list" id="menu-toggle"></span>&nbsp;&nbsp;A
 simple ASP.NET Sidebar</a>
 </h1>
 </div>
 </div>
 </div>
 </div>
 </div>
 <%--This is a modified Page by Parallelcodes.com. To view the original style-sheet and original post please visit : 
SOURCE http://startbootstrap.com/template-overviews/simple-sidebar
GITHUB URL https://github.com/IronSummitMedia/startbootstrap-simple-sidebar
 --%>

 <script src="js/jquery.js"></script>

 <script src="js/bootstrap.min.js"></script>

 <script>
 $("#menu-toggle").click(function(e) {
 e.preventDefault();
 $("#wrapper").toggleClass("toggled");
 });
 </script>

 </form>
</body>
</html>

This will create design like below :
simple2