js实现菜单下拉框

作者: RaymondSH | 来源:发表于2020-04-04 14:31 被阅读0次

js实现菜单下拉框
前端，关于下拉选择
easyui常用方法
2019-05-22 自定义实现下拉框的三级联动
常见tab效果的实现
Combox
JS实现右键菜单
C#下拉框选择
sublime3 文件路径提示功能（安装方法）
实现下拉框及一些需要注意的问题

1.效果:js实现菜单下拉框,当鼠标放到上面是显示菜单,当鼠标移除时隐藏菜单

新浪下拉菜单.png

2.布局分析

如下图所示，整体结构可以分为一个大盒子里面套着3个小盒子，小盒子里面装着一个<a>标签和一个隐藏的盒子

image.png

<body>
    <div class="nav">
        <div class="weibo">
            <a href=""><span>微博</span></a>
            <ul>
                <li>
                    <a href=""><span>私信</span></a>
                </li>
                <li>
                    <a href=""><span>评论</span></a>
                </li>
                <li>
                    <a href=""><span>@我</span></a>
                </li>
            </ul>
        </div>
        <div class="blog">
            <a href=""><span>博客</span></a>
            <ul>
                <li>
                    <a href=""><span>博客评论</span></a>
                </li>
                <li>
                    <a href=""><span>未读提醒</span></a>
                </li>
            </ul>
        </div>
        <div class="mail">
            <a href=""><span>邮箱</span></a>
            <ul>
                <li>
                    <a href=""><span>免费邮箱</span></a>
                </li>
                <li>
                    <a href=""><span>企业邮箱</span></a>
                </li>
                <li>
                    <a href=""><span>下载客户端</span></a>
                </li>
        </div>
    </div>
</body>

3.效果实现
CSS样式分析，首先让3个div盒子浮动起来，定位方式位相对定位，为了实现鼠标放到a标签上是整个单元格变色，所以要让a标签占满整个单元格；另外为了实现字体和左边距有小空白，所以在a标签中添加一个span标签，具体的CSS样式和效果图如下：

image.png

<style>
        * {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none;
        }

        /* 让a标签沾满整个单元格 */
        a {
            display: block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

        .nav {
            width: 400px;
            margin: 50px auto;
        }

        .nav>div {
            width: 101px;
            float: left;
            position: relative;
            margin-left: 5px;
        }

        .nav>div>a:hover {
            background-color: #eeeeee;
        }

        .nav>div>a span {
            display: block;
            padding: 5px 10px;
        }

        .nav>div>ul {
            position: absolute;
            top: 30px;
            display: none;
        }

        .nav div ul li a {
            width: 100px;
            line-height: 30px;
            border-left: #fecc5b 1px solid;
            border-right: #fecc5b 1px solid;
            border-bottom: #fecc5b 1px solid;
        }

        .nav>div>ul>li a:hover {
            background-color: #fecc5b;
        }

        .nav>div>ul>li a span {
            display: block;
            padding-left: 10px;
        }
    </style>

4.js效果实现
大致思路是获取到对应的元素，当鼠标移动到其上时，显示元素，当鼠标移开时，隐藏元素，代码如下：

var nav = document.querySelector('.nav');
    var divs = nav.children;
    console.log(divs);
    for (var i = 0; i < divs.length; i++) {
        console.log(this);
        divs[i].onmouseover = function () {
            this.children[1].style.display = 'block';
        }
        divs[i].onmouseout = function () {
            this.children[1].style.display = 'none';
        }
    }