JQuery实例3：横向纵向菜单

最新推荐文章于 2016-01-23 11:41:04 发布

wm9901

最新推荐文章于 2016-01-23 11:41:04 发布

阅读量782

点赞数

分类专栏： .NET 文章标签： asp.net html jquery CSS 实例

本文链接：https://blog.csdn.net/wm9901/article/details/22433881

版权

.NET 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

♢ 最终运行的结果：

♢ css文件夹下的menu.css文件代码：

ul, li
{
    /*清除ul和li上默认的小圆点*/
    list-style: none;
}

ul
{
    /*清除子菜单的缩进值*/
    padding: 0;
    margin: 0;
}

.main, .hmain
{
    background-image: url(../images/title.gif);
    background-repeat: repeat-x;
    width: 120px;
}

li
{
    background-color: #eeeeee;
}
a
{
    /*取消所有的下划线*/
    text-decoration: none;
    padding-left: 20px;
    display: block;
    display: inline-block;
    width: 100px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.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-right: 1px;
}

♢ images文件夹下的三个图片：

分别是：title.gif，collapsed.gif，expanded.gif （见下方）

♢ js文件夹下的menu.js文件代码：

$(document).ready(function () {
    //页面中的DOM已经装载完成时，执行的代码
    $(".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("slow");//slow normal fast
        //ulNode.hide();

        //ulNode.toggle();

        //ulNode.slideDown("slow");
        //ulNode.slideUp();

        ulNode.slideToggle();
        changeIcon($(this));
    });

    //    $(".hmain > a").hover(function () {
    //        $(this).next("ul").slideDown();
    //    }, function () {
    //        var ulNode = $(this).next("ul");
    //        var timeoutId = setTimeout(function () {
    //            ulNode.slideUp();
    //        }, 300);
    //        ulNode.hover(function () {
    //            clearTimeout(timeoutId);
    //        }, function () {
    //            $(this).slideUp();
    //        });
    //    });

    $(".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) {
        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')")
        }
    }
}

♢ js文件夹下jquery.js文件：

http://download.csdn.net/detail/wm9901/7113527

♢ menu.html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>JQuery实战</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/menu.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
</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 />
    <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>