search

博客列表 >html+CSS+javascript 实现导航下拉菜单

html+CSS+javascript 实现导航下拉菜单

风雪夜归人
风雪夜归人原创
2020年06月14日 13:05:28689浏览

html+CSS+javascript 实现导航下拉菜单

代码编写流程图

Created with Raphaël 2.1.2html主体架构无序列表(body)层叠样式表(head)javascript事件监听与委托(head)导航下拉菜单完成

html 主体架构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta
  6.       name="viewport"
  7.       content="width=device-width, initial-scale=1.0,user-scalable=yes,minimum-scale=1, maximum-scale=1.0"
  8.     />
  9.     <title>实现下拉菜单</title>
  10.   </head>
  11.   <body></body>
  12. </html>

导航下拉菜单无序列表

  1. <body>
  2.   <div id="div_menu">
  3.     <ul id="nav">
  4.       <li><a href="">首页</a></li>
  5.       <li><a href="">视频教程</a></li>
  6.       <li><a href="">入门教程</a></li>
  7.       <li><a href="">社区问答</a></li>
  8.       <li>
  9.         <a href="">技术文章</a>
  10.         <ul>
  11.           <li><a href="">头条</a></li>
  12.           <li><a href="">php教程</a></li>
  13.           <li><a href="">php小知识</a></li>
  14.           <li><a href="">html教程</a></li>
  15.           <li><a href="">javascript教程</a></li>
  16.           <li><a href="">博客</a></li>
  17.           <li><a href="">php框架</a></li>
  18.           <li><a href="">mysql教程</a></li>
  19.           <li><a href="">css教程</a></li>
  20.           <li><a href="">服务器运维</a></li>
  21.         </ul>
  22.       </li>
  23.       <li>
  24.         <a href="">资源下载</a>
  25.         <ul>
  26.           <li><a href="">php工具</a></li>
  27.           <li><a href="">手册下载</a></li>
  28.           <li><a href="">js特效</a></li>
  29.           <li><a href="">网站源码</a></li>
  30.           <li><a href="">在线手册</a></li>
  31.           <li><a href="">学习课件</a></li>
  32.           <li><a href="">后端模板</a></li>
  33.           <li><a href="">类库下载</a></li>
  34.         </ul>
  35.       </li>
  37.       <li>
  38.         <a href="">编程词典</a>
  39.         <ul>
  40.           <li><a href="">php词词典</a></li>
  41.           <li><a href="">mysql词典</a></li>
  42.           <li><a href="">Redis词曲</a></li>
  43.           <li><a href="">javascript词典</a></li>
  44.           <li><a href="">Bootstrap词典</a></li>
  45.           <li><a href="">原生词典</a></li>
  46.           <li><a href="">Linux词典</a></li>
  47.           <li><a href="">html词典</a></li>
  48.           <li><a href="">css词典</a></li>
  49.           <li><a href="">jquery词典</a></li>
  50.         </ul>
  51.       </li>
  53.       <li><a href="">工具下载</a></li>
  54.       <li><a href="">PHP培训</a></li>
  55.     </ul>
  56.   </div>
  57. </body>

效果图

" class="reference-link">效果图

层叠样式表 CSS 美化实现导航菜单横向排列

各属性功能详见其后注释

  1. <style type="text/css">
  2.   * {
  3.     margin: 0; /* margin属性在一个声明中设置所有外边距属性。该属性可以有1到4个值*,顺序为上右下左*/
  4.     padding: 0; /*padding 属性在一个声明中设置所有填充属性。该属性可以有1到4个值*/
  5.     box-sizing: border-box; /*box-sizing 是用来设置盒模型的尺寸*/
  6.   }
  7.   #div_menu {
  8.     width: 100%;
  9.   }
  10.   a {
  11.     color: rgb(177, 162, 162); /* 设置文本颜色 */
  12.     /* color: red; */
  13.     text-decoration: none; /*text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等*/
  14.   }
  15.   #nav {
  16.     background-color: black; /*background-color属性设置一个元素的背景颜色*/
  17.     height: 50px; /*height属性设置元素的高度*/
  18.     line-height: 50px; /*line-height属性设置元素的行高*/
  19.   }
  21.   li {
  22.     list-style: none; /*list-style属性在一个声明中设置所有的列表属性*/
  23.     margin: 0 20px; /*上边距和下边距是 0px,右边距和左边距是 10px */
  24.     float: left; /*  float（浮动），会使元素向左或向右移动, left 向左,right　向右 */
  25.   }
  26.   #nav > li > a {
  27.     display: block;
  28.     height: 48px;
  29.   }
  30.   #nav > li > a:hover {
  31.     /*:hover在鼠标移到链接上时添加的特殊样式*/
  32.     color: white;
  33.     border-bottom: 3px solid rgb(42, 6, 248);
  34.   }
  35.   #nav > li {
  36.     position: relative;
  37.     /*position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型,relative相对定位,absolute 绝对定位,static 默认值。没有定位，元素出现在正常文档的流中*/
  38.   }
  39.   #nav > li > ul {
  40.     position: absolute;
  41.     top: 50px;
  42.     width: 130px;
  43.     border: 1px solid #aaa; /*设置四个边框样式*/
  44.     border-top: none; /*设置上边框的样式*/
  45.     background-color: rgba(248, 249, 250, 0.363); /*设置背景色*/
  46.   }
  47.   #nav > li > ul > li a {
  48.     display: inline-block; /*此元素将显示为块级元素，此元素前后会带有换行符*/
  49.     height: 50px;
  50.     color: #444;
  51.   }
  53.   #nav > li > ul {
  54.     display: none;
  55.   }
  56. </style>

效果图

效果图

javascript 事件监听与委托实现显示和隐藏子菜单

鼠标移入主菜单时，如果有子菜单则显示其子菜单，鼠标移出时，关掉子菜单

  1. <script>
  2.     window.onload = function () {
  3.     //获取所有主导航数据
  4.     const navs = document.querySelectorAll("#nav > li");
  5.     // forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
  6.     navs.forEach(function (nav) {
  7.     //移入时显示菜单
  8.     nav.addEventListener("mouseover", showSubMenu);
  9.     //移出时关闭菜单
  10.     nav.addEventListener("mouseout", closeSubMenu);
  11.     });
  12.     function showSubMenu(event) {
  13.     //当前这个导航有子菜单则显示出来
  14.     console.log(event.target.nextElementSibling);
  15.     if (event.target.nextElementSibling !== null) {
  16.     event.target.nextElementSibling.style.display = "block";
  17.     }
  18.     }
  19.     function closeSubMenu(event) {
  20.     //   console.log(event.target);
  21.     console.log(event.target.nodeName);
  23.     if (
  24.     event.target.nodeName === "A" &&
  25.     event.target.nextElementSibling !== null
  26.     ) {
  27.     event.target.nextElementSibling.style.display = "none";
  28.     }
  29.     }
  30.     };
  31. </script>

效果图

" class="reference-link">效果图

心得体会：代码编写用时 4 个小时，其中发现二个错误

一、把 nextElementSibling 写成 nextElementSibing，

二、把 margin: 0 20px 写成 margin: 0,20px

把 javascript 代码放在头元素中，未能实现子菜单正常显示，发现 html 文档是按照代码书写顺序从上到下执行，经查询 html 手册用到 window.onload()方法实现 javasript 代码的加载。

提示：window.onload() 方法用于在网页加载完毕后立刻执行的操作

上一条：前端基础知识及导航下拉菜单脚本下一条：导航及下拉菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多