Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模仿php中文网简易版导航栏的下拉菜单
Blogger Information
Blog 16
fans 2
comment 0
visits 20087
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
模仿php中文网简易版导航栏的下拉菜单
肖傲的博客
Original
810 people have browsed it

导航栏的下拉菜单的学习

需要同时用到 html、css、js三个知识

先写html结构：

  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><a href="">首页</a></li>
  11.       <li><a href="">视频教程</a></li>
  12.       <li>
  13.         <a href="">资源下载</a>
  14.         <ul>
  15.           <li><a href="">PHP工具</a></li>
  16.           <li><a href="">在线手册</a></li>
  17.           <li><a href="">学习课件</a></li>
  18.           <li><a href="">网站源码</a></li>
  19.         </ul>
  20.       </li>
  21.       <li><a href="">社区问答</a></li>
  22.       <li>
  23.         <a href="">技术文章</a>
  24.         <ul>
  25.           <li><a href="">头条</a></li>
  26.           <li><a href="">博客</a></li>
  27.           <li><a href="">php教程</a></li>
  28.           <li><a href="">PHP框架</a></li>
  29.         </ul>
  30.       </li>
  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.   </body>
  37. </html>

运行如图：

然后加上css 进行修饰：

  1. <style>
  2.       /* 元素样式初始化 */
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.       }
  8.       /* 设置通栏 的高 宽和背景颜色 */
  9.       .header {
  10.         height: 60px;
  11.         width: 1850px;
  12.         background-color: #000;
  13.         line-height: 60px;
  14.       }
  15.       /* 设置logo的宽和高 */
  16.       div .logo {
  17.         height: 60px;
  18.         width: 170px;
  19.         font-size: 0;
  20.         float: left;
  21.       }
  22.       /* 让图片高度和父盒子一致 */
  23.       div .logo img {
  24.         height: 100%;
  25.       }
  26.       /* 去除下划线和设置颜色 设置字体大小*/
  27.       a {
  28.         text-decoration: none;
  29.         color: #aaa;
  30.         font-size: 14px;
  31.       }
  32.       /* 给nav设置高度和行高以及外边距 */
  33.       #nav {
  34.         height: 60px;
  35.         line-height: 60px;
  36.         margin-left: 10px;
  37.         /* 左浮动 */
  38.         float: left;
  39.       }
  40.       /* 去除li的样式 和内外边距 以及左浮动 */
  41.       li {
  42.         list-style: none;
  43.         margin: 0 9px;
  44.         padding: 0 20px;
  45.         float: left;
  46.       }
  47.       /* 将nav里面的li里面的a转化为块元素 */
  48.       #nav > li > a {
  49.         display: block;
  50.         height: 60px;
  51.       }
  52.       /* 鼠标悬停更改颜色 */
  53.       #nav > li > a:hover {
  54.         color: white;
  55.         /* 鼠标悬停增加下边框颜色 */
  56.         border-bottom: 4px solid #5fb878;
  57.       }
  58.       /* 设置定位属性 */
  59.       #nav > li {
  60.         position: relative;
  61.         font-size: 14px;
  62.       }
  63.       /* 给nav里面的ul的li里面的a设置内边距 */
  64.       #nav > ul > li > a {
  65.         padding: 20px;
  66.       }
  67.       #nav > ul > li > a:hover {
  68.         border: 2px solid #5fb878;
  69.       }
  70.       /* 给ul定位、设置外边框并去除上外边框 */
  71.       #nav > li > ul {
  72.         position: absolute;
  73.         top: 60px;
  74.         width: 270px;
  75.         border: 1px solid #aaa;
  76.         border-top: none;
  77.       }
  78.       /* 转化为行内块元素、设置高度和颜色 */
  79.       #nav > li > ul > li a {
  80.         display: inline-block;
  81.         height: 60px;
  82.         color: #444;
  83.       }
  84.       /* 初始化时不要显示子菜单 */
  85.       #nav > li > ul {
  86.         display: none;
  87.       }
  88. </style>

运行如图：

最后加上js 实现：

  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>php中文网</title>
  7.     <style>
  8.       /* 元素样式初始化 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       /* 设置通栏 的高 宽和背景颜色 */
  15.       .header {
  16.         height: 60px;
  17.         width: 1850px;
  18.         background-color: #000;
  19.         line-height: 60px;
  20.       }
  21.       /* 设置logo的宽和高 */
  22.       div .logo {
  23.         height: 60px;
  24.         width: 170px;
  25.         font-size: 0;
  26.         float: left;
  27.       }
  28.       /* 让图片高度和父盒子一致 */
  29.       div .logo img {
  30.         height: 100%;
  31.       }
  32.       /* 去除下划线和设置颜色 设置字体大小*/
  33.       a {
  34.         text-decoration: none;
  35.         color: #aaa;
  36.         font-size: 14px;
  37.       }
  38.       /* 给nav设置高度和行高以及外边距 */
  39.       #nav {
  40.         /* background-color: pink; */
  41.         height: 60px;
  42.         line-height: 60px;
  43.         margin-left: 10px;
  44.         /* 左浮动 */
  45.         float: left;
  46.       }
  47.       /* 去除li的样式 和内外边距 以及左浮动 */
  48.       li {
  49.         list-style: none;
  50.         margin: 0 9px;
  51.         padding: 0 20px;
  52.         float: left;
  53.       }
  54.       /* 将nav里面的li里面的a转化为块元素 */
  55.       #nav > li > a {
  56.         display: block;
  57.         height: 60px;
  58.       }
  59.       /* 鼠标悬停更改颜色 */
  60.       #nav > li > a:hover {
  61.         color: white;
  62.         /* 鼠标悬停增加下边框颜色 */
  63.         border-bottom: 4px solid #5fb878;
  64.       }
  65.       /* 设置定位属性 */
  66.       #nav > li {
  67.         position: relative;
  68.         font-size: 14px;
  69.       }
  70.       /* 给nav里面的ul的li里面的a设置内边距 */
  71.       #nav > ul > li > a {
  72.         padding: 20px;
  73.       }
  74.       #nav > ul > li > a:hover {
  75.         border: 2px solid #5fb878;
  76.       }
  77.       /* 给ul定位 设置外边框并去除上外边框 */
  78.       #nav > li > ul {
  79.         position: absolute;
  80.         top: 60px;
  81.         width: 270px;
  82.         border: 1px solid #aaa;
  83.         border-top: none;
  84.       }
  85.       /* 转化为行内块元素 设置高度和颜色 */
  86.       #nav > li > ul > li a {
  87.         display: inline-block;
  88.         height: 60px;
  89.         color: #444;
  90.       }
  91.       /* 初始化时不要显示子菜单 */
  92.       #nav > li > ul {
  93.         display: none;
  94.       }
  95.     </style>
  96.   </head>
  97.   <body>
  98.     <div class="header">
  99.       <div class="logo"><img src="images/logo.png" alt="" />php中文网</div>
  100.       <ul id="nav">
  101.         <li><a href="">首页</a></li>
  102.         <li><a href="">视频教程</a></li>
  103.         <li><a href="">入门教程</a></li>
  104.         <li><a href="">社区问答</a></li>
  105.         <li>
  106.           <a href="">资源下载</a>
  107.           <ul>
  108.             <li><a href="">PHP工具</a></li>
  109.             <li><a href="">在线工具</a></li>
  110.             <li><a href="">手册下载</a></li>
  111.             <li><a href="">学习课件</a></li>
  112.           </ul>
  113.         </li>
  114.         <li>
  115.           <a href="">编程词典</a>
  116.           <ul>
  117.             <li><a href="">mysql词典</a></li>
  118.             <li><a href="">Linux词典</a></li>
  119.             <li><a href="">Redis词典</a></li>
  120.             <li><a href="">html词典</a></li>
  121.           </ul>
  122.         </li>
  124.         <li><a href="">工具下载</a></li>
  125.         <li><a href="">php培训</a></li>
  126.       </ul>
  127.     </div>
  128.   </body>
  129.   <script>
  130.     //   获取所有的主导航
  131.     const navs = document.querySelectorAll("#nav > li");
  133.     navs.forEach(function (nav) {
  134.       //   鼠标移入是：显示子菜单
  135.       nav.addEventListener("mouseover", showSubMenu);
  136.       //   鼠标移出时：不显示子菜单
  137.       nav.addEventListener("mouseout", closeSubMenu);
  138.     });
  139.     //   显示子菜单
  140.     function showSubMenu(ev) {
  141.       console.log(ev.target);
  142.       // 确定这个导航是否有子菜单
  143.       if (ev.target.nextElementSibling !== null) {
  144.         ev.target.nextElementSibling.style.display = "block";
  145.       }
  146.     }
  147.     // 关闭子菜单
  148.     function closeSubMenu(ev) {
  149.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  150.         ev.target.nextElementSibling.style.display = "none";
  151.       }
  152.     }
  153.   </script>
  154. </html>

运行如下：

总结思考：下拉框内容的排列 、各模块之间的间隔、鼠标悬停后的下边框长度等细节方面还需要继续加强学习！

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