search

博客列表 >PHP大牛成长之路小试牛刀：仿PHP中文版导航

PHP大牛成长之路小试牛刀：仿PHP中文版导航

周Sir-BLOG
周Sir-BLOG原创
2020年06月14日 16:42:47779浏览

仿PHP中文版导航

布局思路：

最终效果：

完整HTML：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="zh-cn" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>仿PHP中文网导航</title>
  7.     <style>
  8.       /* 清除所有元素的内外边距及a链接下划线 */
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         text-decoration: none;
  13.       }
  14.       /* 父盒子 */
  15.       .box {
  16.         background: #000;
  17.         width: 100%;
  18.         height: 60px;
  19.       }
  20.       /* 左盒子 */
  21.       .box_left {
  22.         position: absolute;  /* 绝对定位-左边 */
  23.         top: 0;
  24.         left: 0;
  25.         width: 160px;
  26.         height: 60px;
  27.       }
  28.       .box_left img {
  29.         margin-left: 8px;
  30.         max-height: 60px;
  31.       }
  32.       /* 右盒子 */
  33.       .box_right {
  34.         position: absolute; /* 绝对定位-右边 */
  35.         top: 0;
  36.         right: 0;
  37.         width: 160px;
  38.         height: 60px;
  39.       }
  40.       .box_right a {
  41.         display: block;   /* 将A标签转换为块级元素 */
  42.         width: 65px;
  43.         height: 60px;
  44.         line-height: 60px;
  45.         color: #c4c4c4;
  46.         text-align: center;
  47.         float: right;  /* 设置右边浮动 */
  48.       }
  49.       /* 注册登录鼠标悬停背景变色 */
  50.       .box_right a:hover {
  51.         color: #fff;
  52.         background-color: #363c41;
  53.       }
  54.       /* 中盒子-导航部分（自适应，窗口缩小时溢出文字隐藏 */
  55.       .box_main {
  56.         height: 60px;
  57.         margin-left: 160px;
  58.         margin-right: 160px;
  59.         overflow: hidden; /* 窗口缩小时溢出文字隐藏 */
  60.       }
  61.       .box_main ul {
  62.         list-style: none; /* 去除LI列表标签前面的点 */
  63.       }
  64.       .box_main li {
  65.         /* width: auto;  */
  66.         float: left;
  67.         margin: 0 10px;
  68.         text-align: center;
  69.       }
  70.       .box_main a {
  71.         width: 85px;
  72.         color: #c4c4c4;
  73.         line-height: 60px; /* 文本垂直居中 */
  74.         display: block;
  75.       }
  76.       .box_main a:hover {
  77.         width: 85px;
  78.         height: 60px;
  79.         color: #fff;
  80.         box-sizing: border-box; /*网上找的仿layui导航资料，作用是形成新的盒子，不太懂*/
  81.         border-bottom: 5px solid #5fb878;
  82.       }
  83.       /* 下拉菜单盒子 */
  84.       .menu {
  85.         width: 200px;
  86.         height: 150px;
  87.         background: #fff;
  88.         position: absolute;
  89.         top: 62px;
  90.         left: auto; /* 左边定位不知道为什么用auto就可以了 */
  91.         border: 1px solid #ccc;
  92.         display: none; /* 默认不显示 */
  93.       }
  95.       .menu li {
  96.         display: block;
  97.         width: 98px;
  98.         height: 35px;
  99.         line-height: 35px;
  100.         margin: 0 auto;
  101.       }
  103.       .menu li:hover {
  104.         background: #f2f2f2;
  105.       }
  106.     </style>
  107.   </head>
  108.   <body>
  109.     <div class="box">
  110.       <div class="box_left">
  111.         <img src="https://www.php.cn/static/images/logo.png" alt="PHP中文网" />
  112.       </div>
  113.       <div class="box_right"><a href="#">登录</a><a href="#">注册</a></div>
  114.       <div class="box_main">
  115.         <ul>
  116.           <li><a href="#" style="background-color: #363c41;">首页</a></li>
  117.           <li><a href="#">视频教程</a></li>
  118.           <li><a href="#">入门教程</a></li>
  119.           <li><a href="#">社区问答</a></li>
  120.           <li>
  121.             <a href="#">技术文章 ▼</a>
  122.             <div class="menu">
  123.               <ul>
  124.                 <li>php教程</li>
  125.                 <li>html教程</li>
  126.                 <li>php教程</li>
  127.                 <li>html教程</li>
  128.                 <li>php教程</li>
  129.                 <li>html教程</li>
  130.                 <li>php教程</li>
  131.                 <li>html教程</li>
  132.               </ul>
  133.             </div>
  134.           </li>
  135.           <li><a href="#">PHP培训</a></li>
  136.         </ul>
  137.       </div>
  138.     </div>
  139.     <script>
  140.       //   获取所有的主导航
  141.       // const navs=document.querySelectorAll("#nav > li");
  142.       const navs = document.querySelectorAll(".box_main li");
  143.       navs.forEach(function (nav) {
  144.         // 鼠标移入时: 显示子菜单
  145.         nav.addEventListener("mouseover", showSubMenu);
  146.         // 鼠标移出时: 关掉子菜单
  147.         nav.addEventListener("mouseout", closeSubMenu);
  148.       });
  150.       // 显示子菜单
  151.       function showSubMenu(ev) {
  152.         // 当前这个导航有没有子菜单?
  153.         if (ev.target.nextElementSibling !== null) {
  154.           ev.target.nextElementSibling.style.display = "block";
  155.         }
  156.       }
  157.       // 关掉子菜单
  158.       function closeSubMenu(ev) {
  159.         if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  160.           ev.target.nextElementSibling.style.display = "none";
  161.         }
  162.       }
  163.     </script>
  164.   </body>
  165. </html>

总结：
1、CSS的定位及浮动不熟练；
2、js的冒泡作用还是不理解；
3、尺寸非PHP中文网原始尺寸，按原始尺寸会变大，不知道原因。

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

相关文章

查看更多