search

博客列表 >仿PHP中文网顶部导航栏

仿PHP中文网顶部导航栏

无人问津的博客
无人问津的博客原创
2020年06月20日 14:59:391773浏览

基本 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>仿PHP中文网导航</title>
  7.   </head>
  8.   <body>
  9.     <!-- 顶部容器 -->
  10.     <div id="header">
  11.       <!-- 顶部logo -->
  12.       <img src="https://www.php.cn/static/images/logo.png" alt="PHP中文网" />
  13.       <!-- 顶部主导航 -->
  14.       <ul id="nav">
  15.         <li>
  16.           <a href="https://www.php.cn/">首页</a>
  17.         </li>
  18.         <li>
  19.           <a href="https://www.php.cn/course.html">视频教程</a>
  20.         </li>
  21.         <li>
  22.           <a href="https://www.php.cn/course/type/3.html">入门教程</a>
  23.         </li>
  24.         <li>
  25.           <a href="https://www.php.cn/wenda.html">社区问答</a>
  26.         </li>
  27.         <li>
  28.           <a href="https://www.php.cn/article.html">技术文章</a>
  29.           <!-- 技术文章 子级导航 -->
  30.           <ul>
  31.             <li><a href="#">头条</a></li>
  32.             <li><a href="#">博客</a></li>
  33.             <li><a href="#">php教程</a></li>
  34.             <li><a href="#">php框架</a></li>
  35.             <li><a href="#">php小知识</a></li>
  36.             <li><a href="#">mysql教程</a></li>
  37.             <li><a href="#">html教程</a></li>
  38.             <li><a href="#">css教程</a></li>
  39.             <li><a href="#">js教程</a></li>
  40.             <li><a href="#">服务器运维</a></li>
  41.           </ul>
  42.         </li>
  43.         <li>
  44.           <a href="https://www.php.cn/xiazai/">资源下载</a>
  45.           <!-- 资源下载 子级导航 -->
  46.           <ul>
  47.             <li><a href="#">PHP工具箱</a></li>
  48.             <li><a href="#">在线工具</a></li>
  49.             <li><a href="#">手册下载</a></li>
  50.             <li><a href="#">学习课件</a></li>
  51.             <li><a href="#">js特效</a></li>
  52.             <li><a href="#">后端模板</a></li>
  53.             <li><a href="#">网站源码</a></li>
  54.             <li><a href="#">类库下载</a></li>
  55.           </ul>
  56.         </li>
  57.         <li>
  58.           <a href="https://www.php.cn/xiazai/gongju">工具下载</a>
  59.           <!-- 工具下载 子级导航 -->
  60.           <ul>
  61.             <li><a href="#">php词典</a></li>
  62.             <li><a href="#">原生手册</a></li>
  63.             <li><a href="#">mysql词典</a></li>
  64.             <li><a href="#">Linux词典</a></li>
  65.             <li><a href="#">Redis词典</a></li>
  66.             <li><a href="#">html词典</a></li>
  67.             <li><a href="#">javascript词典</a></li>
  68.             <li><a href="#">css词典</a></li>
  69.             <li><a href="#">Bootstrap词典</a></li>
  70.             <li><a href="#">jquery词典</a></li>
  71.           </ul>
  72.         </li>
  73.         <li>
  74.           <a href="https://www.php.cn/k.html">php培训</a>
  75.         </li>
  76.       </ul>
  77.       <!-- 顶部注册登录 -->
  78.       <ul id="header-right">
  79.         <li><a href="#">登录</a></li>
  80.         <li><a href="#">注册</a></li>
  81.       </ul>
  82.     </div>
  83.   </body>
  84. </html>

效果如下

仿PHP中文网

CSS 样式结构

代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. /* 设置a标签的默认样式 */
  6. a {
  7.   /* 去除下划线 */
  8.   text-decoration: none;
  9.   /* 字体颜色 */
  10.   color: #000;
  11.   /* 转化为块级元素 */
  12.   display: block;
  13.   /* 文字居中 */
  14.   text-align: center;
  15.   /* 字体大小 */
  16.   font-size: 14px;
  17.   /* 字体风格 */
  18.   font-family: "微软雅黑";
  19. }
  20. /* 设置li的默认样式 */
  21. li {
  22.   /* 清除li前面的小圆点 */
  23.   list-style: none;
  24.   /* 左浮动 */
  25.   float: left;
  26. }
  27. /* 顶部容器 */
  28. #header {
  29.   /* 设置相对定位 */
  30.   position: relative;
  31.   /* 设置背景色 */
  32.   background-color: #000;
  33.   /* 设置最小宽度 */
  34.   min-width: 1000px;
  35.   /* 设置高度 */
  36.   height: 60px;
  37.   /* 设置行高 */
  38.   line-height: 60px;
  39. }
  40. /* 顶部logo */
  41. #header > img {
  42.   /* 设置绝对定位 */
  43.   position: absolute;
  44.   /* 距离左边0px */
  45.   left: 0;
  46.   /* 距离顶边0px */
  47.   top: 0;
  48.   /* 宽度 */
  49.   width: 140px;
  50.   /* 高度 */
  51.   height: 60px;
  52.   /* 设置鼠标悬停时鼠标样式为手型 */
  53.   cursor: pointer;
  54. }
  55. /* 顶部主导航 */
  56. #header > #nav {
  57.   /* 设置绝对定位 */
  58.   position: absolute;
  59.   /* 距离左边160px */
  60.   left: 160px;
  61.   /* 距离顶边0px; */
  62.   top: 0px;
  63. }
  64. #header > #nav > li {
  65.   /* 设置相对定位 */
  66.   position: relative;
  67. }
  68. #header > #nav > li > a {
  69.   /* 设置字体颜色 */
  70.   color: #bbb;
  71.   /* 设置内边距上下为0，左右为20px */
  72.   padding: 0 20px;
  73. }
  75. #header > #nav > li > a:hover {
  76.   /* 字体颜色 */
  77.   color: #fff;
  78. }
  79. #header > #nav > li > ul {
  80.   /* 设置绝对定位 */
  81.   position: absolute;
  82.   /* 距离顶部60px */
  83.   top: 60px;
  84.   /* 距离左边0px */
  85.   left: 0px;
  86.   /* 宽度200px */
  87.   width: 200px;
  88.   /* 边框 1px实线 */
  89.   border: 1px solid #aaa;
  90.   /* 去除顶部的边框 */
  91.   border-top: none;
  92.   /* 设置圆角边框 */
  93.   border-radius: 5px;
  94.   /* 内边距上下5px，左边0px */
  95.   padding: 5px 0;
  96.   /* 隐藏标签 */
  97.   display: none;
  98. }
  99. #header > #nav > li > ul > li {
  100.   /* 设置宽度 */
  101.   width: 50%;
  102.   /* 设置高度 */
  103.   height: 36px;
  104.   /* 设置行高 */
  105.   line-height: 36px;
  106. }
  107. #header > #nav > li > ul > li > a {
  108.   /* 字体颜色 */
  109.   color: #333;
  110.   /* 字体大小 */
  111.   font-size: 12px;
  112. }
  113. #header > #nav > li > ul > li > a:hover {
  114.   /* 背景颜色 */
  115.   background-color: #eee;
  116. }
  117. /* 顶部注册登录 */
  118. #header > #header-right {
  119.   /* 绝对定位 */
  120.   position: absolute;
  121.   /* 距离右边0px */
  122.   right: 0;
  123.   /* 距离顶边0px */
  124.   top: 0;
  125. }
  126. #header > #header-right > li > a {
  127.   /* 设置字体颜色 */
  128.   color: #bbb;
  129.   /* 字体加粗 */
  130.   font-weight: bold;
  131.   /* 设置内边距上下为0，左右为20px */
  132.   padding: 0px 20px;
  133. }
  134. #header > #header-right > li > a:hover {
  135.   /* 背景色 */
  136.   background-color: #464646;
  137. }

引入 CSS 后效果如下

添加css后效果

JS 结构

代码

  1. // 获取主导航容器
  2. const nav = document.getElementById("nav");
  3. // 给主导航绑定鼠标移入事件
  4. nav.addEventListener("mouseover", showSubMenu);
  5. // 给主导航绑定鼠标移出事件
  6. nav.addEventListener("mouseout", hideSubMenu);
  8. // 显示子导航
  9. function showSubMenu(ev) {
  10.   // ev.target 获取的是a标签
  11.   //判断a标签是否存在兄弟元素（子导航）
  12.   if (ev.target.nextElementSibling != null) {
  13.     // 存在兄弟元素（子导航），则显示
  14.     ev.target.nextElementSibling.style.display = "block";
  15.   }
  16. }
  17. // 隐藏子导航
  18. function hideSubMenu(ev) {
  19.   // ev.target 获取的是a标签
  20.   // 判断a标签是否存在兄弟元素（子导航）
  21.   if (ev.target.nextElementSibling != null) {
  22.     // 存在兄弟元素（子导航），则隐藏
  23.     ev.target.nextElementSibling.style.display = "none";
  24.   }
  25. }

引入 js 后的最终效果

引入js后的最终效果

  • 子导航无法选择

  • 可以看出上面的最终效果鼠标没有办法移到子导航中，目前修改了下 js 代码，可以实现，但是鼠标移出用的不是冒泡事件，js 代码如下

  1. // 获取所有一级导航
  2. const navs = document.querySelectorAll("#nav > li");
  3. // 遍历添加监听器
  4. navs.forEach(function (nav) {
  5.   // 添加鼠标移入事件 冒泡
  6.   nav.addEventListener("mouseover", showSubMenu);
  7.   //   添加鼠标移出事件 非冒泡
  8.   nav.addEventListener("mouseleave", hideSubMenu);
  9. });
  11. // 显示子导航
  12. function showSubMenu(ev) {
  13.   // ev.target 获取的是a标签
  14.   //判断a标签是否存在兄弟元素（子导航）
  15.   if (ev.target.nextElementSibling != null) {
  16.     // 存在兄弟元素（子导航），则显示
  17.     ev.target.nextElementSibling.style.display = "block";
  18.   }
  19. }
  20. // 隐藏子导航
  21. function hideSubMenu(ev) {
  22.   // ev.target 获取的是li标签
  23.   //   判断li的子级是否存在ul（子导航）
  24.   if (ev.target.querySelector("ul") !== null) {
  25.     // 存在则隐藏ul（子导航）
  26.     ev.target.querySelector("ul").style.display = "none";
  27.   }
  28. }

  • 修改 js 后的运行效果

    修改 js 后的运行效果

小结

事件 说明
mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发
mouseenter 事件只有在鼠标指针进入被选元素时被触发,不支持冒泡
mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发
mouseleave 事件只有在鼠标指针离开被选元素时被触发,不支持冒泡

  • 绝对定位
    绝对定位的元素位置相对于最近的已定位父级元素,如果元素没有已定位的父级元素,那么它的位置相对于 body 元素
    绝对定位的元素原来所占的空间不保留

  • 相对定位
    相对定位的元素可以通过设置垂直或水平位置,让这个元素相对于它原本的位置进行移动
    相对定位的元素原来所占的空间仍保留

上一条：背景属性控制，精灵图原理以及字体图标的引用下一条：通过接口获取省份并且保存在本地数据库中
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多