search

博客列表 >模仿php中文网简易版导航栏的下拉菜单

模仿php中文网简易版导航栏的下拉菜单

肖傲的博客
肖傲的博客原创
2020年06月13日 23:49:12814浏览

导航栏的下拉菜单的学习

需要同时用到 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>

运行如下：

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

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

相关文章

查看更多