blog

Home / DeveloperSection / Blogs / Vertical Menu using BootStrap in ASP.Net

Vertical Menu using BootStrap in ASP.Net

Anonymous User17325 15-Jan-2014

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:- 

 

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Menu.aspx.cs"Inherits="Menu"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
    <title></title>
    <scriptsrc="Js/jquery-1.8.3.min.js"></script>
    <scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
    <linkhref="Bootstrap/jquery-ui-1.10.3.custom.css"rel="stylesheet"/>
</head>
<body>
    <formid="form1"runat="server">
        <div>
 
            <divclass="page-header">
                <h1>Menu</h1>
            </div>
            <ulid="menu">
                <li><ahref="#"id="ui-id-16">Indore</a></li>
                <li><ahref="#"id="ui-id-17">Ambala</a></li>
                <li><ahref="#"id="ui-id-18">Kanpur</a></li>
                <li><ahref="#"id="ui-id-19">Lucknow</a></li>
                <li>
                    <ahref="#"><span></span>Allahabad</a>
                    <ulstyle="display: none; top: 10010px; left: 593px;">
 
                        <li><ahref="#"id="ui-id-23">Prayag</a></li>
                        <li><ahref="#"id="ui-id-24">Mindstick</a></li>
                        <li><ahref="#"id="ui-id-25">Civil Lines</a></li>
                    </ul>
                </li>
                <li><ahref="#"id="ui-id-21">Vanaras</a></li>
                <li>
                    <ahref="#"id="ui-id-22"><span></span>Azamgarh</a>
                    <ulstyle="display: none; top: 10056px; left: 593px;">
                        <li>
                            <ahref="#"aria-haspopup="true"id="ui-id-26"><span></span>Sangam</a>
                            <ulstyle="display: none;">
                                <li><ahref="#"id="ui-id-29">Akbar Fort</a></li>
                                <li><ahref="#"id="ui-id-30">Army Camp</a></li>
                                <li><ahref="#"id="ui-id-31">Water Fall</a></li>
                            </ul>
                        </li>
                        <li>
                            <ahref="?Delphi"id="ui-id-27"><span></span>Fatehpur</a>
                            <ul>
                                <li><ahref="#"id="ui-id-32">Ada</a></li>
                                <li><ahref="#"id="ui-id-33">Saarland</a></li>
                                <li><ahref="#"id="ui-id-34">Salzburg</a></li>
                            </ul>
                        </li>
                        <li><ahref="#"id="ui-id-28">Perch</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </form>
</body>
</html>
<scripttype="text/javascript">
    $(document).ready(function () {
        $("#menu").menu();
    });
</script>

Use this BootStrap File :-
 
<scriptsrc="Js/jquery-1.8.3.min.js"></script>
<scriptsrc="Js/jquery-ui-1.9.2.custom.min.js"></script>
<linkhref="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 :- 

<scripttype="text/javascript">
 
    $(document).ready(function () {
        $("#menu").menu();
    });
</script>

 

OutPut

 Vertical Menu using BootStrap in ASP.Net

 in my next post i'll explain aboutHorizontalMenu using JQuery in ASP.Net


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By