Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战案例仿：PHP中文网导航栏
Blogger Information
Blog 40
fans 0
comment 1
visits 39757
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中文网导航栏
Dong.
Original
1730 people have browsed it

仿PHP中文网导航栏

  • 布局思路
    布局思路

  • 最终效果展示
    效果展示

导航栏实战制作演示

1.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.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>下拉菜单</title>
  8. </head>
  9. <body>
  10.     <ul id="div">
  11.         <li>
  12.             <h1>php中文网</h1>
  13.         </li>    
  14.         <li><a herf="">首页</a></li>
  15.         <li><a herf="">视频教程</a></li>
  16.         <li><a herf="">入门教程</a></li>
  17.         <li><a herf="">社区问答</a></li>
  18.         <li>
  19.             <a herf="">技术文章</a>
  20.             <ul>
  21.                 <li><a herf="">头条</a></li>
  22.                 <li><a herf="">博客</a></li>
  23.                 <li><a herf="">PHP教程</a></li>
  24.                 <li><a herf="">PHP框架</a></li>
  25.                 <li><a herf="">PHP小知识</a></li>
  26.                 <li><a herf="">MySQL教程</a></li>
  27.                 <li><a herf="">HTML教程</a></li>
  28.                 <li><a herf="">css教程</a></li>
  29.                 <li><a herf="">js教程</a></li>
  30.                 <li><a herf="">服务器运维</a></li>
  31.             </ul>
  32.         </li>
  33.         <li>
  34.             <a herf="">资源下载</a>
  35.             <ul>
  36.                 <li><a herf="">PHP工具</a></li>
  37.                 <li><a herf="">在线工具</a></li>
  38.                 <li><a herf="">手册下载</a></li>
  39.                 <li><a herf="">学习课件</a></li>
  40.                 <li><a herf="">js特效</a></li>
  41.                 <li><a herf="">后台模板</a></li>
  42.                 <li><a herf="">网站源码</a></li>
  43.                 <li><a herf="">类库下载</a></li>
  44.             </ul>
  45.         </li>
  46.         <li>
  47.             <a herf="">编程词典</a>
  48.             <ul>
  49.                 <li><a herf="">PHP词典</a></li>
  50.                 <li><a herf="">原生词典</a></li>
  51.                 <li><a herf="">MySQL词典</a></li>
  52.                 <li><a herf="">Linux词典</a></li>
  53.                 <li><a herf="">Redis词典</a></li>
  54.                 <li><a herf="">Bootstrap词典</a></li>
  55.                 <li><a herf="">HTML词典</a></li>
  56.                 <li><a herf="">css词典</a></li>
  57.                 <li><a herf="">javascript词典</a></li>
  58.                 <li><a herf="">jpuery词典</a></li>
  59.             </ul>
  60.         </li>
  61.         <li><a herf="">工具下载</a></li>
  62.         <li><a herf="">PHP培训</a></li>
  63.         <li><a herf="">联系我们</a></li>
  64.          <li>
  65.             <input type="search" placeholder="请输入关键词" />
  66.         </li>
  67.     </ul>
  68. </body>
  69. </html>

运行样式：
html运行样式

2.css格式

  1.  <style>
  2.         /* 对元素样式初始化 */
  3.         * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;
  7.         }
  8.         /* 去除a标签的下划线以及设置字体颜色 */
  9.         a {
  10.          color: #bbb;
  11.         text-decoration: none;
  12.         }
  13.         /*设置导航条的背景色，高度以及使内容垂直居中*/
  14.          #div {
  15.         background-color: black;
  16.         height: 60px;
  17.         line-height: 60px;
  18.         }
  19.         /*去掉列表标记，设置各列表水平间距并使齐浮动起来*/
  20.         li {
  21.         list-style: none;
  22.         margin: 0 10px;
  23.         float: left;
  24.         }
  25.         #div > li > a:hover{
  26.             color: white;
  27.         }
  28.         #div > li{
  29.             position: relative;
  30.         }
  31.         #div >li > ul{
  32.             position: absolute;
  33.             top:50px;
  35.             width: 180px;
  36.             border: 1px solid #aaaaaa;
  37.             border-top:none;
  38.         }
  40.         #div >li > ul > li a {
  41.             display: inline-block;
  42.             height: 50px;
  43.            color: #aaaaaa;
  44.         }
  45.         #ul.sub li.hover{
  46.             background-color: #eee;
  47.         }
  48.         /* 初始化时不要显示下拉菜单 */
  49.         #div > li > ul {
  50.             display: none;
  51.         }
  52. </style>

运行样式：
CSS样式

3.js格式

  1. <script>
  2.  // 获取所有的 主导航
  3.    const navs = document.querySelectorAll("#div > li");
  5.     navs.forEach(function(div) {
  6.             // 鼠标移入时：显示子菜单
  7.             div.addEventListener("mouseover", showSubMenu)
  8.             // // 鼠标移出时：关闭子菜单
  9.             div.addEventListener("mouseout", closeSubMenu)
  11.         });
  13.         // 显示子菜单
  14.         function showSubMenu(ev) {
  15.             // console.log(ev)
  16.             // 当这个导航没有子菜单
  17.             if(ev.target.nextElementSibling !== null) {
  18.                 ev.target.nextElementSibling.style.display = "block";
  19.             }
  20.         }
  22.         // 关掉子菜单
  23.         function closeSubMenu(ev) {
  24.             // console.log(ev)
  25.             if(ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
  26.                 ev.target.nextElementSibling.style.display = "none";
  27.             }
  28.         }
  31. </script>

运行样式：
js样式
js样式

总结：

  • 列表下拉菜单非常实用
  • css代码定位还不太熟悉
  • js代码看着有点蒙
  • 纠错能力太弱，一有报错不知如何纠正错误
  • 代码记得不够熟练，导致容易打错字母
Correcting teacher：WJWJ

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