Home > DeveloperSection > Blogs > Horizontal Menu using JQuery in ASP.Net

Horizontal Menu using JQuery in ASP.Net


JQuery JQuery 
Ratings:
0 Comment(s)
 5763  View(s)
Rate this:

Horizontal Menu using JQuery in ASP.Net

In this blog, I’m explaining how to make horizontal menu using jquery in ASP.Net

Example  :-

In This Example we Create horizontal menu Using jquery

Form Design:-

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HorizontalMenu.aspx.cs" Inherits="HorizontalMenu" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="JS/jquery.js"></script>

    <script src="JS/menu.js"></script>

    <link href="CSS/menu.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">

        <div id="menu">

            <ul class="menu">

                <li><a href="#"><span>Home</span></a>

                    <div>

                        <ul>

                            <li><a href="#"><span>Sub Item 1</span></a></li>

                            <li><a href="#"><span>Sub Item 2</span></a></li>

                            <li><a href="#"><span>Sub Item 3</span></a></li>

                        </ul>

                    </div>

                </li>

                <li><a href="#"><span>Product Info</span></a>

                    <div>

                        <ul>

                            <li><a href="#"><span>Sub Item 1</span></a></li>

                            <li><a href="#"><span>Sub Item 2</span></a></li>

                            <li><a href="#"><span>Sub Item 3</span></a></li>

                            <li><a href="#"><span>Sub Item 4</span></a></li>

                        </ul>

                    </div>

                </li>

                <li><a href="#"><span>Help</span></a>

                    <div>

                        <ul>

                            <li><a href="#"><span>Sub Item 1</span></a></li>

                            <li><a href="#"><span>Sub Item 2</span></a></li>

                            <li><a href="#"><span>Sub Item 3</span></a></li>

                        </ul>

                    </div>

                </li>

                <li><a href="#"><span>Contacts</span></a>

                   <div>

                        <ul>

                            <li><a href="#"><span>Sub Item 1</span></a></li>

                            <li><a href="#"><span>Sub Item 2</span></a></li>

                            <li><a href="#"><span>Sub Item 3</span></a></li>

                        </ul>

                    </div>

                </li>

            </ul>

        </div>

        <div id="copyright"><a href="http://apycom.com/"></a></div>

    </form>

</body>

</html>

Use this jquery File :-

 

 

<script src="JS/jquery.js"></script>

<script src="JS/menu.js"></script>

<link href="CSS/menu.css" rel="stylesheet" />

Download and add the above three files into your projects because it’s mandatory for using the jquery libraries .

 

OutPut

 

 

 in my next post i'll explain about Slider using BootStrap in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick