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

  Modified On Sep-18-2014 01:24:20 PM

Leave Comment