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

Last updated:9/18/2014 1:24:20 PM
Anonymous User

Anonymous User

I am a content writter !

0 Comments

Leave Comment