jq实现浮动的下拉菜单

最新推荐文章于 2022-09-12 01:08:12 发布

iteye_17543

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量129

点赞数

分类专栏： jquery 文章标签： CSS HTML

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery3-菜单效果</title>
    <link type="text/css" rel="stylesheet" href="css/menu.css">
    <script type="text/javascript" src="js/jquery-1.3.2.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 />

<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>

js代码


$(function() {
    $(".main > a").click(function() {
        //找到主菜单项对应的子菜单项
        //next:寻找当前节点指定名称的兄弟节点。
        var ulNode = $(this).next("ul");
        /* if (ulNode.css("display") == "none") {
         ulNode.css("display", "block");
         } else {
         ulNode.css("display", "none");
         }*/

        //ulNode.show();
        //ulNode.hide();
        //自动判断，如果是合并的就打开，如果是打开的就合并
        //ulNode.toggle();

        //卷帘效果
        //ulNode.slideDown();
        //ulNode.slideUp();
        //卷帘效果的自动判断
        ulNode.slideToggle();
        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) {
        if (mainNode.css("background-image").indexOf("closed.gif") >= 0) {
            mainNode.css("background-image", "url(image/open.gif)");
        } else {
            mainNode.css("background-image", "url(image/closed.gif)");
        }

    }
}


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

ul {
/*清除缩进*/
    padding: 0;
    margin: 0;
}

.main,.hmain{
    background-image: url("../image/title.jpg");
    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("../image/closed.gif");
    background-repeat: no-repeat;
    background-position: 5px center;
}

.main li a, .hmain li a{
    color: black;
    background-image: none;
}
/*将所有子菜单隐藏*/
.main ul,.hmain ul{
    display:none;
}
.hmain{
    float:left;
    margin-left:1px;
}