JavaScript(js)网页--下拉菜单制作

JavaScript(js)网页–下拉菜单制作

在网页的设计中,经常会出现二级下拉菜单,当鼠标经过时,显示二级菜单,鼠标离开时隐藏。例如新浪网

在这里插入图片描述

鼠标放到微博、博客或邮箱上面时,会出现一个二级菜单,鼠标离开则隐藏。

设计简单的下拉菜单栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            
        }
        a{
            text-decoration: none;
            
        }
        div {
            width: 1200px;
            height: 30px;
            margin: 0px auto;
            background-color: blanchedalmond;
        }
        li {
            list-style: none;
        }
        div li {
            position: relative;
            float: right;
            text-align: center;
            border: 1px solid black;
            line-height: 30px;
            width: 80px;
            height: 30px;
        }
        div ul {
            position: absolute;
            top:30px;
            display: none;
        }
        div ul li{
            
            float: left;
            width: 120px;
            height: 30px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        <li><a href="#">邮箱</a>
            <ul>
                <li><a href="#">免费邮箱</a></li>
                <li><a href="#">VIP邮箱</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>
            </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></li>

    </div>
    <script>
        var div = document.querySelector('div');
        var lis = div.children;
        for (var i=0;i<lis.length;i++){
            //鼠标经过,出现下拉菜单
            lis[i].onmouseover=function(){
                this.children[1].style.display='block';
            }
            //鼠标离开,隐藏下拉菜单
            lis[i].onmouseout=function(){
                this.children[1].style.display='none';
            }
        }

    </script>
</body>
</html>
  • 30
    点赞
  • 151
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
好的,我可以帮你解答关于 JavaScript 网页导航栏下菜单的问题。 首先,你需要在 HTML 中创建一个导航栏,可以使用 `<nav>` 标签来创建。然后,在导航栏中添加一个下菜单的按钮,可以使用 `<button>` 标签,并添加一个点击事件。 接下来,你可以使用 JavaScript 来控制下菜单的显示和隐藏。你可以使用 `classList` 属性来添加或移除一个元素的 class,从而控制元素的样式。 下面是一个简单的示例代码: HTML 代码: ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li> <button id="dropdown-btn">更多</button> <ul id="dropdown-menu"> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </li> </ul> </nav> ``` JavaScript 代码: ```javascript // 获取下菜单按钮和菜单元素 var dropdownBtn = document.getElementById("dropdown-btn"); var dropdownMenu = document.getElementById("dropdown-menu"); // 添加点击事件 dropdownBtn.addEventListener("click", function() { // 切换菜单的显示/隐藏状态 dropdownMenu.classList.toggle("show"); }); // 在文档其他位置点击时,隐藏菜单 window.addEventListener("click", function(event) { if (!event.target.matches("#dropdown-btn")) { dropdownMenu.classList.remove("show"); } }); ``` 在上面的代码中,我们使用 `classList.toggle()` 方法来切换菜单元素的 `show` class,从而控制菜单的显示和隐藏。同时,我们还添加了一个窗口点击事件,当用户在文档的其他位置点击时,隐藏菜单
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值