孙肖宁

具有动态效果的下拉菜单
描述:鼠标放在一级导航的时候。二级导航缓慢显示。鼠标离开之后,二级导航缓慢隐藏。鼠标经过的时候,如果二级菜单还没有...
扫描右侧二维码阅读全文
11
2018/05

具有动态效果的下拉菜单

描述:鼠标放在一级导航的时候。二级导航缓慢显示。鼠标离开之后,二级导航缓慢隐藏。鼠标经过的时候,如果二级菜单还没有完全打开或者隐藏,则或停止当前动画。使用的jQuery的版本是1.8的。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓慢下拉菜单</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/libg.jpg);
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
        $(window).ready(function () {
            var jqli = $(".wrap>ul>li");
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(200);
            });
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(200);
            });
        })
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
Last modification:May 11th, 2018 at 03:06 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment