Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简易实现导航栏下拉菜单及样式定位、事件理解
Blogger Information
Blog 11
fans 0
comment 0
visits 8652
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简易实现导航栏下拉菜单及样式定位、事件理解
Haggi的糖果屋
Original
1093 people have browsed it

一、导航栏下拉菜单的实现

导航栏下拉菜单的实现由三个部分组成：
1.HTML5文本
2.CSS样式
3.javascript监听事件

1.先写一个简单的网页界面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>导航列表下拉菜单</title>
  7.   </head>
  8.   <body>
  9.     <ul id="nav">
  10.       <li>
  11.         <a href="">视频教程</a>
  12.         <ul>
  13.           <li><a href="">html视频</a></li>
  14.           <li><a href="">css视频</a></li>
  15.           <li><a href="">js视频</a></li>
  16.           <li><a href="">php视频</a></li>
  17.         </ul>
  18.       </li>
  19.       <li>
  20.         <a href="">技术文章</a>
  21.         <ul>
  22.           <li><a href="">html教程</a></li>
  23.           <li><a href="">css教程</a></li>
  24.           <li><a href="">js教程</a></li>
  25.           <li><a href="">php教程</a></li>
  26.         </ul>
  27.       </li>
  28.       <li>
  29.         <a href="">资源下载</a>
  30.         <ul>
  31.           <li><a href="">手册下载</a></li>
  32.           <li><a href="">学习课件</a></li>
  33.           <li><a href="">后端模板</a></li>
  34.           <li><a href="">网站源码</a></li>
  35.         </ul>
  36.       </li>
  37.     </ul>
  38.   </body>
  39. </html>

测试结果如下：

2.添加CSS基本样式

  1. /* 元素样式初始化: 学到盒模型再详细介绍 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   /* color: rgba(255, 255, 255, 0.7); */
  9.   color: #bbb;
  10.   /* none值定义标准文本 */
  11.   /* 
  12.        underline：下划线
  13.        overline：上划线
  14.        line-through：贯穿线
  15.        bline：文本闪烁
  16.        inherit：继承父元素的该属性
  17.     */
  18.   text-decoration: none;
  19. }
  21. #nav {
  22.   background-color: black;
  23.   height: 50px;
  24.   /* 设置行高，不允许为负值 */
  25.   line-height: 50px;
  26. }
  28. li {
  29.   /* list-style表示列表属性的简写
  30.     构成: list-style-type
  31.           list-style-position
  32.           list-style-image
  33.      */
  34.   list-style: none;
  35.   margin: 0 10px;
  36.   float: left;
  37. }
  38. #nav > li > a:hover {
  39.   color: white;
  40. }
  42. /* 将父级设置为子菜单的定位容器,即转为定位元素即可 */
  43. #nav > li {
  44.   position: relative;
  45. }
  47. #nav > li > ul {
  48.   position: absolute;
  49.   top: 50px;
  51.   width: 180px;
  52.   border: 1px solid #aaa;
  53.   border-top: none;
  54. }
  55. #nav > li > ul > li a {
  56.   display: inline-block;
  57.   height: 50px;
  58.   color: #444;
  59. }
  60. ul.sub li:hover {
  61.   background-color: #eee;
  62. }
  64. /* 初始化时不要显示子菜单 */
  65. #nav > li > ul {
  66.   display: none;
  67. }

添加样式后测试结果如下：

3.添加js代码

  1.     //navs为length是3的数组
  2.     const navs = document.querySelectorAll("#nav>li");
  3.     //遍历navs数组，对数组内每一个li标签添加鼠标移入、移出事件
  4.     navs.forEach(function (nav) {
  5.       nav.addEventListener("mouseover", show);
  6.       nav.addEventListener("mouseout", close);
  7.     });
  8.     //定义移入时下拉菜单显示的函数
  9.     function show(event) {
  10.       if (event.target.nextElementSibling) {
  11.         event.target.nextElementSibling.style.display = "block";
  12.       }
  13.     }
  14.     //定义移出时下拉菜单关闭的函数
  15.     function close(event) {
  16.       if (event.target.nodeName === "A" && event.target.nextElementSibling) {
  17.         event.target.nextElementSibling.style.display = "none";
  18.       }
  19.     }

测试结果如下
a.

b.

c.

" class="reference-link">

二、CSS样式之定位

元素的定位：元素默认在页面中是按照文档流的顺序进行排序的
文档流：元素的排列按照书写顺序，源码中的顺序
相对定位：元素相对于自己在文档流中的原始位置进行偏移
绝对定位：脱离文档流，一定要有一个定位父级作为定位参照物，否则就相对于body进行定位

CSS position 属性

static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

三、JS事件

1.事件：给HTML元素添加操作事情
2.事件监听：获取一个或多个元素后给元素添加addEventListener函数

函数语法：element.addEventListener(事件类型, 事件函数, 捕获或冒泡)

3.事件代理：用父级代理所有子元素以及更下一级的元素上的同名事件

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实这个下拉菜单，已经相当专业了， 不算简易了， 许多 商业项目也没过如此，差别仅是样式好看些， 内部逻辑是一样的， 能完全理解这里用到技术， 对于初学者来说， 已经不错了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post