jq的二级导航效果

最新推荐文章于 2022-03-21 19:39:19 发布

苏幕遮。

最新推荐文章于 2022-03-21 19:39:19 发布

阅读量292

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_43267296/article/details/102611034

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

二级导航的原理：
当鼠标经过ul的直属子标签li时，这个li标签的兄弟ol标签显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul,
        li,
        ol {
            list-style: none;
        }
        
        a {
            text-align: center;
            text-decoration: none;
        }
        
        #wrap {
            width: 550px;
            height: 30px;
            margin: 0 auto;
            border: 1px solid red;
        }
        
        #ull {
            font-size: 0px;
            //消除子代的默认边距
        }
        
        #ull>li {
            display: inline-block;
            position: relative;
        }
        
        #ull>li>a {
            display: inline-block;
            background: #e7e7e7;
            width: 100px;
            height: 30px;
            font-size: 14px;
            margin-right: 10px;
            text-align: center;
            line-height: 30px;
            transition: all 0.5s;
            color: grey;
        }
        
        #ull>li>ol {
            height: 100px;
            border: 1px solid red;
            width: 100px;
            font-size: 14px;
            display: none;
            position: absolute;
        }
        
        #ull>li>ol>li>a {
            text-decoration: none;
            display: block;
            height: 30px;
            background: red;
            margin-top: 2px;
        }
        
        #ull>li>a:hover {
            background: #dff298;
            color: #7a6277;
        }
    </style>
</head>

<body>
    <h1>我想做一个二级导航</h1>
    <div id="wrap">
        <ul id="ull">
            <li><a href="">一级导航</a>
                <ol>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                </ol>
            </li>
            <li><a href="">一级导航</a>
                <ol>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                </ol>
            </li>
            <li><a href="">一级导航</a>
                <ol>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                </ol>
            </li>
            <li><a href="">一级导航</a>
                <ol>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                </ol>
            </li>
            <li><a href="">一级导航</a>
                <ol>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                    <li><a href="">这是二级导航</a></li>
                </ol>
            </li>
        </ul>
    </div>
    <p>asdhaksgdhk</p>
</body>
<script>
    $(function() {
        $("#ull>li").hover(function() {
            $(this).children("ol").stop().fadeIn("500");
        }, function() {
            $(this).children("ol").stop().fadeOut("500");
        })

    })
</script>

</html>

show()方法与hide()方法分别对应了jq的显示隐藏，为了有相应的过渡效果，添加了fadein()淡入，fadeout（）淡出效果
这样，就完成了使用jq完成二级导航

苏幕遮。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq的二级导航效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫