简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 导航及下拉菜单
Blogger Information
Blog 13
fans 0
comment 0
visits 12993
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
导航及下拉菜单
小追
Original
818 people have browsed it

展示效果：

css代码：

  1. <style>
  2.         *{
  3.             margin:0;
  4.             padding:0;
  5.             box-sizing:border-box;
  6.         }
  7.         /*给a标签设置颜色和文本装饰*/
  8.         a {
  9.             color : #bbb;
  10.             text-decoration: none;
  11.         }
  12.         /*给#nav主导航设置背景色，高度，行内字体高度*/
  13.         #nav {
  14.             background-color:red;
  15.             height:50px;
  16.             line-height:50px;
  17.         }
  18.        /*设置所有li的样式*/
  19.         li{
  20.             list-style:none;
  21.             margin:0 10px;
  22.             float:left;
  23.         }
  24.         /*设置#nav的子元素的子元素a标签鼠标在导航菜单上悬浮时的效果*/
  25.         #nav > li > a:hover {
  26.             color:white;
  27.         }
  28.         /*主导航相对于它的父级#nav定位*/
  29.          #nav > li {
  30.              position:relative;
  31.          }
  32.          /*设置#nav子元素的子元素，子菜单的定位因为#nav>li时定位了，所以会依照#nav>li的定位进行定位*/
  33.          #nav > li > ul {
  34.              position:absolute;
  35.              top:50px;
  36.              width:180px;
  37.              border:1px solid #aaa;
  38.              border-top:none
  39.          }
  40.         /*设置子菜单里a标签的样式*/
  41.          #nav > li >ul > li a{
  42.              display:inline-block;
  43.              height:50px;
  44.              color:#444;
  45.          }
  46.         /*初始时子菜单不显示*/
  47.          #nav>li>ul{
  48.              display:none;
  49.          }
  50.     </style>

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.     </ul>
  32. </body>
  33. </html>

js代码：

  1. <script>
  2.     //获取所有的主导航 "#nav>li"表示这个类的子元素，不包含子元素的下级子元素
  3.     const navs = document.querySelectorAll("#nav > li");
  5.     navs.forEach(function (nav){
  6.         //鼠标移入时显示子菜单
  7.         nav.addEventListener("mouseover", showSubMenu);
  8.         //鼠标移出时关闭子菜单
  9.         nav.addEventListener("mouseout",closeSubMenu);
  10.     });
  12.     //显示子菜单
  13.     function showSubMenu(ev){
  14.         //判断当前这个导航有没有子菜单,有就显示在块中
  15.         if(ev.target.nextElementSibling !==null){
  16.             ev.target.nextElementSibling.style.display = "block";
  17.         }
  18.     }
  19.     //关掉子菜单   判断有没有子菜单，同时满足有a标签的
  20.     function closeSubMenu(ev){
  21.         if(ev.target.nodeName ==="A" && ev.target.style.nextElementSibling !==null){
  22.             ev.target.nextElementSibling.style.display = "none";
  23.         }
  24.     }
  25. </script>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！