新浪导航下拉菜单效果

最新推荐文章于 2022-08-08 21:08:53 发布

超级无敌奥特蔓

最新推荐文章于 2022-08-08 21:08:53 发布

阅读量579

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123769280

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果：当鼠标经过每个小模块的时候，其相对应的下拉菜单会显示出来。

思路：第一步首先把html css写好（基础也真的好重要。。）

html基本结构思想：在一个ul里面放3个小li，然后在每个小li里面分别再嵌套1个a和1个ul，接着再分别在每个ul里面嵌套3个小li（套娃思想）。在css中采用定位的方法将每个小li里面的ul定位到该小li的下面。初始的时候使用display：none将其隐藏起来，使用js实现相关的效果。

第二步为其添加js效果

首先获取元素（使用父子节点来获取更简单），由于导航栏里面的li都要有鼠标经过效果，所以需要使用循环注册鼠标事件。核心在于：当鼠标经过li里面的第二个孩子ul显示，当鼠标离开则ul隐藏。

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            position: relative;
            width: 600px;
            height: 35px;
            top: 100px;
            left: 100px;
            background-color: aqua;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        .nav>li {
            width: 200px;
            height: 35px;
            float: left;
            line-height: 35px;
            text-align: center;
        }
        
        .nav ul {
            display: none;
            width: 200px;
            position: absolute;
            top: 35px;
            box-sizing: border-box;
            border-left: 1px solid green;
            border-right: 1px solid green;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul li {
            border-bottom: 1px solid greenyellow;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li><a href="">私信</a></li>
                <li><a href="">评论</a></li>
                <li><a href="">@我</a></li>
            </ul>
        </li>
    </ul>
    <script>
        //获取元素
        var nav = document.querySelector(".nav");//得到父元素
        var lis = nav.children; //得到3个子元素小li
        for (var i = 0; i < lis.length; i++) {
            //鼠标滑过 onmouseover
            lis[i].onmouseover = function() {
                this.children[1].style.display = "block";
            };
            //鼠标离开 onmouseout
            lis[i].onmouseout = function() {
                this.children[1].style.display = "none";
            };
        }
    </script>
</body>

</html>

超级无敌奥特蔓

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
新浪导航下拉菜单效果

效果：当鼠标经过每个小模块的时候，其相对应的下拉菜单会显示出来。思路：第一步首先把html css写好（基础也真的好重要。。） html基本结构思想：在一个ul里面放3个小li，然后在每个小li里面分别再嵌套1个a和1个ul，接着再分别在每个ul里面嵌套3个小li（套娃思想）。在css中采用定位的方法将每个小li里面的ul定位到该小li的下面。初始的时候使用display：none将其隐藏起来，使用js实现相关的效果。第二步为其添加js效果首先获取元素（...
复制链接

扫一扫