JS二级列表的实现

最新推荐文章于 2024-05-01 15:11:42 发布

啊～是伊知阳呀

最新推荐文章于 2024-05-01 15:11:42 发布

阅读量126

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/2303_76317043/article/details/129939804

版权

这段代码展示了如何使用HTML、CSS和JavaScript创建一个简单的导航菜单，当鼠标悬停在菜单项上时，其子菜单会滑动展开；移开鼠标后，子菜单会隐藏。样式设计包括了Flex布局和背景颜色，JavaScript处理了显示和隐藏子菜单的交互行为。

摘要由CSDN通过智能技术生成

效果图

HTML

<div class="wrapper">
        <ul class="nav">
            <li>
                <a href="#">卖家中心</a>
                <ul>
                    <li>免费开店</li>
                    <li>已卖出的宝贝</li>
                    <li>出售中的宝贝</li>
                </ul>
            </li>
            <li>
                <a href="#">网站导航</a>
                <ul>
                    <li>收藏的店铺</li>
                    <li>收藏的宝贝</li>
                </ul>
            </li>
        </ul>
    </div>

CSS

<style>
         *{
            margin: 0;
            padding: 0;
         }
         ul{
            list-style-type: none;
         }
         .nav{
             display: flex;
             align-items: center;
             background-color: #1e1d1d;
             color: white;
             width: 300px;
            
         }
         
         .nav>li{
            flex: 1;
            border:1px solid red;
            position: relative;
            height: 38px;
            line-height: 38px;
         }

         .nav>li>ul{
            width: 100%;
            display: none;
            position: absolute;
            top:38px;
            background-color: #1e1d1d;
         }
    </style>

<script>
        _navLis=document.querySelectorAll(".nav li");
        _navLis.forEach(_navLi => {
            _navLi.onmouseover=function(){
                this.children[1].style.display='block';
            }
            _navLi.onmouseout=function(){
                this.children[1].style.display='none';
            }
        });
    </script>