Vertical Menu using BootStrap in ASP.Net
In this blog, I’m explaining how to make vertical menu using Bootstrap in ASP.Net
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>
in my next post i'll explain about Horizontal Menu using JQuery in ASP.Net