导航下拉菜单

一、实现导航菜单

以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a{
            color: #bbb;
            text-decoration: none;
        }
        #nav{
            background-color: black;
            height: 50px;
            line-height: 50px;
        }
        li{
            list-style: none;
            margin: 0 10px;
            float: left;
        }
        #nav>li>a:hover{
            color: white;
        }
        #nav>li{
            position: relative;
        }
        #nav>li>ul{
            position: absolute;
            top: 50px;
            width: 180px;
            border: 1px solid #aaa;
            border-top: none;
        }
        #nav>li>ul>li a{
            display: inline-block;
            height: 50px;
            color: #444;
        }
        ul.sub li:hover{
            background-color: #eee;
        }
        #nav>li>ul{
            display:none;
        }
    </style>
</head>
<body>
    <ul id="nav">
        <li><a href="">首页</a></li>
        <li><a href="">视频教程</a></li>
        <li>
            <a href="">资源下载</a>
            <ul>
                <li><a href="">PHP工具</a></li>
                <li><a href="">在线手册</a></li>
                <li><a href="">学习课件</a></li>
                <li><a href="">网站源码</a></li>
                </li>
            </ul>
        </li>
        <li><a href="">社区问答</a></li>
        <li>
            <a href="">技术文章</a>
            <ul>
                <li><a href="">头条</a></li>
                <li><a href="">博客</a></li>
                <li><a href="">PHP教程</a></li>
                <li><a href="">PHP框架</a></li>
            </ul>
        </li>
    </ul>
</body>

二、下拉菜单等javascript样式：

先要获取所有主菜单，另外要判断主菜单下面有没有子菜单,如果有,鼠标移入主菜单时，那么就显示子所有菜单，鼠标移出时，关掉子菜单。

运用事件监听，事件委托，（捕获：从外向内、冒泡：从内向外）

代码如下：

<script>
 const navs = document.querySelectorAll("#nav > li");
 navs.forEach(function (nav){
     nav.addEventListener("mouseover",showSubMenu);
     nav.addEventListener("mouseout",closeSubMenu);
 });
 function showSubMenu(ev){
     if (ev.target.nextElementSibling !==null){
       ev.target.nextElementSibling.style.display="block";
     }
 }
 function closeSubMenu(ev){
     if (ev.target.nodeName==="A" && ev.target.nextElementSibling !==null){
       ev.target.nextElementSibling.style.display="none";
 }
 }
</script>

三、学习感悟：

跟着老师抄了一遍代码，Js的代码能理解，但感觉现在还运用不起来，在抄写的过程中也会出现错误，特别是符号，稍微看懂错误代码提示是什么意思，还是要多加学习，多看案例

一、实现导航菜单

以下代码：

二、下拉菜单等javascript样式：

代码如下：

三、学习感悟：

相关文章