JQuery-纵向菜单及横向菜单

最新推荐文章于 2021-08-26 22:09:00 发布

hxy87

最新推荐文章于 2021-08-26 22:09:00 发布

阅读量995

点赞数

分类专栏： JQuery 文章标签： class function stylesheet xhtml url html

本文链接：https://blog.csdn.net/hxy87/article/details/5878137

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Menu.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="Web.Three.Menu" %>

<!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>JQuery实践-菜单效果</title>
<link href="../CSS/menu.css" rel="Stylesheet" type="text/css" />

</head>
<body>
    <ul>
        <li class="main"><a href="#">菜单项1</a>
            <ul>
                <li><a href="#">子菜单项11</a> </li>
                <li><a href="#">子菜单项12</a></li>
            </ul>
        </li>
        <li class="main"><a href="#">菜单项2</a>
            <ul>
                <li><a href="#">子菜单项21</a> </li>
                <li><a href="#">子菜单项22</a> </li>
            </ul>
        </li>
        <li class="main"><a href="#">菜单项3</a>
            <ul>
                <li><a href="#">子菜单项31</a> </li>
                <li><a href="#">子菜单项32</a> </li>
            </ul>
        </li>
    </ul>

    <br />
    <br />
    <ul>
        <li class="hmain"><a href="#">菜单项1</a>
            <ul>
                <li><a href="#">子菜单项11</a> </li>
                <li><a href="#">子菜单项12</a></li>
            </ul>
        </li>
        <li class="hmain"><a href="#">菜单项2</a>
            <ul>
                <li><a href="#">子菜单项21</a> </li>
                <li><a href="#">子菜单项22</a> </li>
            </ul>
        </li>
        <li class="hmain"><a href="#">菜单项3</a>
            <ul>
                <li><a href="#">子菜单项31</a> </li>
                <li><a href="#">子菜单项32</a> </li>
            </ul>
        </li>
    </ul>
</body>
</html>

menu.css代码如下:

ul,ui
{
/*清除ul和li上默认的小圆点*/
list-style:none;
}
ul
{
/*清除子菜单的缩进值*/
padding:0;

margin:0;
}
.main,.hmain
{
background-image:url(../image/menu.jpg);
background-repeat:repeat-x;
width:120px;
}
li
{
background-color:#eeeeee;
}
a
{
text-decoration:none;
padding-left :20px;
display:inline-block;
width:100px;
padding-top:1px;
padding-bottom:1px;

}
.main a, .hmain a
{
color:White ;
background-image:url(../image/closed.gif);
background-repeat:no-repeat ;
background-position :1px center;
}
.main li a,.hmain li a
{
color:Black ;
background-image:none;
}
.main ul,.hmain ul
{
display:none ;
}
.hmain
{
float :left ;
margin-right:1px;
}

menu.js代码如下:

$(document ).ready(function(){
    //页面中的DOM已经闭幕完成时，执行的代码
    $(".main >a ,.hmain >a").click(function(){
        //找到主菜单单项对应的子菜单项
        var ulNode = $(this).next("ul");
        /*
        if(ulNode .css("display") == "none"){
            ulNode .css("display","block");

        }else
        {
            ulNode .css("display","none");
        }
        */

      /* ulNode .toggle();*/
      ulNode .slideToggle();
      changeIcon ($(this) );
    });

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

/**
*修改主菜单的指示图标
*closed.gif 是未展开的图片，expanded.gif是展开的图片
*/
function changeIcon(mainNode){
    if(mainNode ){
        if(mainNode .css("background-image").indexOf("colsed.gif") >=0){
            mainNode .css("background-image","url('../image/expanded.gif')");
        }else {
            mainNode .css("background-image","url('../image/colsed.gif')");
        }
    }
}