横向纵向菜单制作 Jquery

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_34033624

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yuzhengdong/p/3350161.html

本文介绍了一种使用jQuery实现的横向和纵向下拉菜单的方法。通过点击或悬停显示子菜单，并利用slideToggle进行平滑过渡。同时，通过更改图标展示菜单的展开状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
    <title>横向纵向菜单</title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".main > a").click(function () {
                var ulNode = $(this).next("ul");
                /*
                if (ulNode.css("display") == "none") {
                ulNode.css("display", "block");
                } else {
                ulNode.css("display", "none");
                }
                */
                //ulNode.show("normal"); //slow,fast
                //ulNode.toggle("normal");//自行判断是否隐藏还是。。
                ulNode.slideToggle(400);
                changeIcon($(this));
            });

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


        });

        function changeIcon(mainNode) {
            if (mainNode) {
                //alert(mainNode.css("background-image"));
                if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
                    mainNode.css("background-image", "url('../images/expanded.gif')");
                } else {
                    mainNode.css("background-image", "url('../images/collapsed.gif')");
                }
            }   
        }
    </script>
    <style type="text/css">
        ul,li
        {
            list-style:none;
            /*cursor:pointer;*/
        }
        ul
        {/*去掉子菜单的缩进*/
            padding:0;
            margin:0;
        }
        .main,.hmain
        {
            background-image:url(../images/title.gif);
            background-repeat:repeat-x;
            width:100px;
        }
        li
        {
            background-color:#EEEEEE;
        }
        a
        {
            text-decoration:none;
            padding-left:20px;
            display:block;/*块级元素，让a标签填充整个区域*/
            padding-top:3px;
            padding-bottom:3px;
           /* direction:inline-block;IE6*/
        }
        .main a,.hmain a
        {
            color:White;
            background-image:url(../images/collapsed.gif);
            background-repeat:no-repeat;
            background-position:3px center;
        }
        .main li a,.hmain li a
        {
            color:Black;
            background-image:none;
        }
        .main ul,.hmain ul
        {
            display:none;
        }
        .hmain
        {
            float:left;
            margin-left:1px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="main"><a href="#">菜单项1</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
        <li class="main"><a href="#">菜单项2</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
        <li class="main"><a href="#">菜单项3</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
    </ul>
        <br />
        <br />
    <ul>

        <li class="hmain"><a href="#">菜单项1</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
        <li class="hmain"><a href="#">菜单项2</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
        <li class="hmain"><a href="#">菜单项3</a><ul><li><a href="#">子菜单1</a></li><li><a href="#">子菜单2</a></li></ul></li>
    </ul>
</body>

</html>