jQuery实现横向纵向菜单

效果图如下：

JScript.js Code:

$(document).ready(function() {
    $(".ulcss > a,.hulcss > a").click(function() {
        var ChildrenNode = $(this).next("ul");
        //实现方法一
        //        if (ChildrenNode.css("display") == "none") {
        //            ChildrenNode.css("display", "block");
        //        }
        //        else {
        //            ChildrenNode.css("display", "none");
        //        }
        //实现方法二
        //        ChildrenNode.show(500);
        //        ChildrenNode.hide(500);
        //实现方法三
        //        ChildrenNode.toggle(500);
        //实现方法四
        //        ChildrenNode.slideDown();
        //        ChildrenNode.slideUp();
        //实现方法五
        ChildrenNode.slideToggle();

    });

    $(".hulcss").hover(
    function() {
    $(this).children("ul").slideDown();
    },
    function() {
    $(this).children("ul").slideUp();
    }
    );
})

StyleSheet.css Code:

body {
}
li,ul
{ list-style:none;/*去掉Ul,LI前面的小圆点*/
}
ul
{
    padding:0;/*使父菜单和子菜单并列，IE8以及其它浏览器可以达到，但IE6,IE7达不到效果*/
    margin:0;/*解决IE7,IE6下父菜单和子菜单不能并列同级问题*/
}
.ulcss,.hulcss
{
background-image:url(../IMAGE/Jquery.jpg);
background-repeat:repeat-x;
width:120px;
padding-left:10px; /*向左缩进十个像素*/
}
li
{
background-color:Silver;
width:120px;
}
a
{ text-decoration:none;
display:block; /*让整个区域显示手的形势，在IE6里面不能达到效果*/
width:120px; /*解决IE6下问题*/
display:inline-block;
}
.ulcss a, .hulcss a /*控制ulcss样式下面的链接文字颜色为白色*/
{
     color:White;
}
.ulcss li a, .hulcss li a /*控制ulcss样式下面的li的链接文字颜色为白色*/
{
     color:Black;
}

.ulcss ul,.hulcss ul
{
display:none;
}
.hulcss
{
    float:left;
}
body {
}
li,ul
{ list-style:none;/*去掉Ul,LI前面的小圆点*/
}
ul
{
padding:0;/*使父菜单和子菜单并列，IE8以及其它浏览器可以达到，但IE6,IE7达不到效果*/
margin:0;/*解决IE7,IE6下父菜单和子菜单不能并列同级问题*/
}
.ulcss,.hulcss
{
background-image:url(../IMAGE/Jquery.jpg);
background-repeat:repeat-x;
width:120px;
padding-left:10px; /*向左缩进十个像素*/
}
li
{
background-color:Silver;
width:120px;
}
a
{ text-decoration:none;
display:block; /*让整个区域显示手的形势，在IE6里面不能达到效果*/
width:120px; /*解决IE6下问题*/
display:inline-block;
}
.ulcss a, .hulcss a /*控制ulcss样式下面的链接文字颜色为白色*/
{
color:White;
}
.ulcss li a, .hulcss li a /*控制ulcss样式下面的li的链接文字颜色为白色*/
{
color:Black;
}

.ulcss ul,.hulcss ul
{
display:none;
}
.hulcss
{
float:left;
}

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="CSS/StyleSheet.css" mce_href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
    <mce:script language="javascript" type="text/javascript" src="JavaScript/jquery-1.3.2.js" mce_src="JavaScript/jquery-1.3.2.js"></mce:script>
    <mce:script language="javascript" type="text/javascript" src="JavaScript/JScript.js" mce_src="JavaScript/JScript.js"></mce:script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <ul >
        <li class="ulcss"><a href="#" mce_href="#" >菜单一</a>
            <ul>
              <li><a href="#" mce_href="#">菜单</a> </li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
        <li class="ulcss"><a href="#" mce_href="#">菜单二</a>
             <ul>
              <li><a href="#" mce_href="#">菜单</a></li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
        <li class="ulcss"><a href="#" mce_href="#"> 菜单三</a>
              <ul>
              <li><a href="#" mce_href="#">菜单</a></li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
     </ul>
    </div>
    <hr />
    <div>
     <ul >
        <li class="hulcss"><a href="#" mce_href="#" >菜单一</a>
            <ul>
              <li><a href="#" mce_href="#">菜单</a> </li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
        <li class="hulcss"><a href="#" mce_href="#">菜单二</a>
             <ul>
              <li><a href="#" mce_href="#">菜单</a></li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
        <li class="hulcss"><a href="#" mce_href="#"> 菜单三</a>
              <ul>
              <li><a href="#" mce_href="#">菜单</a></li>
              <li><a href="#" mce_href="#">菜单</a></li>
            </ul>
        </li>
     </ul>
    </div>
    </form>
</body>
</html>

(责任编辑：admin)

Jquery之Ajax运用_学习运用篇	AJAX的整个页面过程
jQuery与prototype(ajaxpro)冲突的解决方法	四种局部刷新技术的比较
Ajax无刷新实现图片切换特效	利用XMLHTTP实现无刷新数据的查询
用AJAX编写一个简单的相册	Ajax提示框
ConfirmButton:带有确认功能的按钮	Sys.WebForms与服务端协同工作以及Sys.Application下的属性
使用Ajax和Jquery实现GridView的展开、合并	在asp.ent写简单ajax功能
jQuery实现横向纵向菜单	jQuery上传插件Uploadify使用详解
JQuery RadioButtonList	AjaxPro实现无刷新翻页效果及数据库分页技术介绍
Ajax开发模式	AjaxPro.dll控件实现异步刷新页面

ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

热门标签

jQuery实现横向纵向菜单

Tags：jQuery菜单