Vertical Menu using BootStrap in ASP.Net

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

Anonymous User

I am a content writter !

1 Comments

Leave Comment