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

Leave Comment