编写一个实用的导航下拉菜单！（0612）

最后实现的效果图

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="nav">
      <li title="首页"><a href="">首页</a></li>
      <li title="视频教程"><a href="">视频教程</a></li>
      <li title="入门教程"><a href="">入门教程</a></li>
      <li title="社区问答"><a href="">社区问答</a></li>
      <li title="技术文章"><a href="">技术文章</a>
        <ul>
          <li><a href="">头条</a></li>
          <li><a href="">PHP教程</a></li>
          <li><a href="">PHP小知识</a></li>
          <li><a href="">html教程</a></li>
          <li><a href="">js教程</a></li>
        </ul>
      </li>
      <li title="资源下载"><a href="">资源下载</a>
        <ul>
           <li><a href="">PHP工具</a></li>
           <li><a href="">手册下载</a></li>
           <li><a href="">js特效</a></li>
           <li><a href="">网站源码</a></li>
           <li><a href="">在线工具</a></li>
        </ul>
       </li>
    </ul>
</body>
</html>

2.CSS代码

     <style>
        /* 元素样式初始化 */
        *{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
/* a标签的样式进行初始化 */
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;
}
/* li的定位类型 */
#nav>li{
    position:relative; 
}
/* 设置子菜单的宽高，背景色，定位类型，字体大小，边框实线 */
#nav>li>ul{
    position:absolute;
    top: 50px;
    width: 180px;
    border:1px solid #aaa;
    boeder-top:none;
    background-color:blanchedalmond;
    font-size: 0.9rem;   
}
/* 设置子菜单的字体，高度 */
#nav>li>ul>li a{
    display:inine-block;
    height:50px;
    color:#444;
}
ul.sub li:hover{
    background-color:#eee;
}
/* 一开始子菜单不显示 */
#nav>li>ul{
    display:none;
}
    </style>

3.JS代码

<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>

总结

1.js部分的代码还有不太好理解的地方还需多看几次回放
2.子菜单中的文本居中和鼠标可以悬停在子菜单不知该如何解决

最后实现的效果图

1.html代码

2.CSS代码

3.JS代码

总结

相关文章