In this blog, I’m explaining how to make vertical menu using Bootstrap in ASP.Net
Example :-
In This Example we Create vertical menu Using BootStrap File
Form Design:-
<%@ Page Language='C#' AutoEventWireup='true' CodeFile='Menu.aspx.cs' Inherits='Menu' %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat='server'>
<title></title>
<script src='Js/jquery-1.8.3.min.js'></script>
<script src='Js/jquery-ui-1.9.2.custom.min.js'></script>
<link href='Bootstrap/jquery-ui-1.10.3.custom.css' rel='stylesheet' />
</head>
<body>
<form id='form1' runat='server'>
<div>
<div class='page-header'>
<h1>Menu</h1>
</div>
<ul id='menu'>
<li><a href='#' id='ui-id-16'>Indore</a></li>
<li><a href='#' id='ui-id-17'>Ambala</a></li>
<li><a href='#' id='ui-id-18'>Kanpur</a></li>
<li><a href='#' id='ui-id-19'>Lucknow</a></li>
<li>
<a href='#'><span></span>Allahabad</a>
<ul style='display: none; top: 10010px; left: 593px;'>
<li><a href='#' id='ui-id-23'>Prayag</a></li>
<li><a href='#' id='ui-id-24'>Mindstick</a></li>
<li><a href='#' id='ui-id-25'>Civil Lines</a></li>
</ul>
</li>
<li><a href='#' id='ui-id-21'>Vanaras</a></li>
<li>
<a href='#' id='ui-id-22'><span></span>Azamgarh</a>
<ul style='display: none; top: 10056px; left: 593px;'>
<li>
<a href='#' aria-haspopup='true' id='ui-id-26'><span></span>Sangam</a>
<ul style='display: none;'>
<li><a href='#' id='ui-id-29'>Akbar Fort</a></li>
<li><a href='#' id='ui-id-30'>Army Camp</a></li>
<li><a href='#' id='ui-id-31'>Water Fall</a></li>
</ul>
</li>
<li>
<a href='?Delphi' id='ui-id-27'><span></span>Fatehpur</a>
<ul>
<li><a href='#' id='ui-id-32'>Ada</a></li>
<li><a href='#' id='ui-id-33'>Saarland</a></li>
<li><a href='#' id='ui-id-34'>Salzburg</a></li>
</ul>
</li>
<li><a href='#' id='ui-id-28'>Perch</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
<script type='text/javascript'>
$(document).ready(function () {
$('#menu').menu();
});
</script>
Use this BootStrap File :-
<script src='Js/jquery-1.8.3.min.js'></script>
<script src='Js/jquery-ui-1.9.2.custom.min.js'></script>
<link href='Bootstrap/jquery-ui-1.10.3.custom.css' rel='stylesheet' />
Download and add the above three files into your projects because it’s mandatory for using the bootstrap libraries and methods.
Use slider Method :-
<script type='text/javascript'>
$(document).ready(function () {
$('#menu').menu();
});
</script>
OutPut
in my next post i'll explain about Horizontal Menu using JQuery in ASP.Net
Last updated:9/18/2014 1:24:20 PM
Anonymous User
Good Blog.