Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Chapter3 html+css+js=导航下拉菜单
Blogger Information
Blog 9
fans 0
comment 7
visits 6033
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
Chapter3 html+css+js=导航下拉菜单
无关
Original
769 people have browsed it

设计导航下拉菜单三部曲

一、html：

1、编码：

  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>
  10.     <!-- li>a回车得到：<li><a href=""></a></li> -->
  11.         <!-- ul#nav回车得到： <ul id="nav"></ul>-->
  12.    <ul id="nav">
  13.        <li><a href="">信用卡</a>
  14.         <ul>
  15.             <li>业务办理    
  19.                        </li>                                        
  20.              <li>人气产品     
  25.              </li>
  26.              <li>热门推荐</li>
  27.              <br>
  28.              <li><a href="">行用卡申请</a></li>
  29.              <li><a href="">办卡进度查询</a></li>
  30.              <li><a href="">龙卡热购卡    </a></li>
  31.              <li><a href="">全球支付信用卡</a></li>
  32.              <li><a href="">更多特惠活动</a></li>             
  33.              <br>
  34.              <li><a href="">在线开卡    </a></li>
  35.              <li><a href="">积分商城    </a></li>
  36.              <li><a href="">欧洲旅行信用卡</a></li>
  37.              <li><a href="">EMV信用卡</a></li>
  38.              <br>
  39.              <li><a href="">账单查询  </a></li>
  40.              <li><a href="">分期理财      </a></li>
  41.              <li><a href="">日本旅行信用卡</a></li>
  42.              <li><a href="">更多</a></li>
  43.              <br>               
  44.              <li><a href="">额度调整  </a></li>
  45.              <li><a href="">在线挂失</a></li>       
  46.          </ul>      
  47.     </li>
  48.     <li><a href="">投资理财</a></li>
  49.     <li><a href="">存款及银行卡</a></li>
  50.     <li><a href="">电子银行</a>
  51.         <ul>
  52.         <li>业务办理</li>
  53.         <br>
  54.         <li><a href="">开通网上银行</a></li>        
  55.         <br>
  56.         <li><a href="">消息服务定制</a></li>        
  57.         <br>
  58.         <li><a href="">开通e账户</a></li>        
  59.         <br>
  60.         <li><a href="">云闪付销户</a></li>        
  61.         <br>
  62.     </ul>         
  63.     <li><a href="">悦享生活</a></li>
  64.     <li><a href="">优智规划</a></li>       
  65.     </ul>    
  66. </body>
  67. </html>

2、效果图：

二、html+css

1、编码：

  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.     <style>
  8.         /* 元素样式初始化 */
  9.         * {
  10.             margin:0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         a {
  15.             /* color:rgba(255, 255, 255, 0.7) */
  16.             color:#bbb;
  17.             text-decoration: none;
  18.         }
  19.         #nav {
  20.             background-color:rgb(60, 42, 230);
  21.             height: 50px;
  22.             line-height: 50px;
  23.         }
  24.         li {
  25.             list-style:none;
  26.             margin: 0 10px;
  27.             float: left;            
  28.         }
  29.         #nav >li>a:hover{
  30.               color:red;             
  31.         }
  32.         /* 将父级设置为子菜单的定位容器，即转为定位元素即可 */
  33.         #nav>li{
  34.             position: relative;
  35.         }
  36.         #nav>li>ul{
  37.             position: absolute;
  38.             top: 50px;
  39.             width: 600px;
  40.             border: 1px solid #aaa;
  41.             border-top:none;         
  42.         }
  44.         #nav>li>ul>li a{
  45.             display: inline-block;
  46.             height: 50px;
  47.             color: #444;
  48.         }
  49.         ul.sub li:hover {
  50.             background-color: #eee;
  51.         }
  52.         /* 初始化时不要显示子菜单 */
  53.         #nav>li>ul{
  54.             display: none;
  55.         }
  57.     </style>
  58. </head>
  59. <body>
  61.     <!-- li>a回车得到：<li><a href=""></a></li> -->
  62.         <!-- ul#nav回车得到： <ul id="nav"></ul>-->
  63.    <ul id="nav">
  64.        <li><a href="">信用卡</a>
  65.         <ul>
  67.             <li= >业务办理    
  71.                        </li=>                                        
  72.              <li>人气产品     
  77.              </li>
  78.              <li>热门推荐</li>
  79.              <br>
  80.              <li><a href="">行用卡申请</a></li>
  81.              <li><a href="">办卡进度查询</a></li>
  82.              <li><a href="">龙卡热购卡    </a></li>
  83.              <li><a href="">全球支付信用卡</a></li>
  84.              <li><a href="">更多特惠活动</a></li>             
  85.              <br>
  86.              <li><a href="">在线开卡    </a></li>
  87.              <li><a href="">积分商城    </a></li>
  88.              <li><a href="">欧洲旅行信用卡</a></li>
  89.              <li><a href="">EMV信用卡</a></li>
  90.              <br>
  91.              <li><a href="">账单查询  </a></li>
  92.              <li><a href="">分期理财      </a></li>
  93.              <li><a href="">日本旅行信用卡</a></li>
  94.              <li><a href="">更多</a></li>
  95.              <br>               
  96.              <li><a href="">额度调整  </a></li>
  97.              <li><a href="">在线挂失</a></li>       
  98.          </ul>      
  99.     </li>
  100.     <li><a href="">投资理财</a></li>
  101.     <li><a href="">存款及银行卡</a></li>
  102.     <li><a href="">电子银行</a>
  103.         <ul>
  104.         <li>业务办理</li>
  105.         <br>
  106.         <li><a href="">开通网上银行</a></li>        
  107.         <br>
  108.         <li><a href="">消息服务定制</a></li>        
  109.         <br>
  110.         <li><a href="">开通e账户</a></li>        
  111.         <br>
  112.         <li><a href="">云闪付销户</a></li>        
  113.         <br>
  114.     </ul>         
  115.     <li><a href="">悦享生活</a></li>
  116.     <li><a href="">优智规划</a></li>       
  117.     </ul>    
  118. </body>
  120. </html>

2、效果图：

三 、html+css+js

1、编码：

  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.     <style>
  8.         /* 元素样式初始化： */
  9.         * {
  10.             margin:0;
  11.             padding: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         a {
  15.             /* color:rgba(255, 255, 255, 0.7) */
  16.             color:#bbb;
  17.             text-decoration: none;
  18.         }
  19.         #nav {
  20.             background-color:rgb(60, 42, 230);
  21.             height: 50px;
  22.             line-height: 50px;
  23.         }
  24.         li {
  25.             list-style:none;
  26.             margin: 0 10px;
  27.             float: left;            
  28.         }
  29.         #nav >li>a:hover{
  30.              color:red;            
  31.         }
  32.         /* 将父级设置为子菜单的定位容器，即转为定位元素即可 */
  33.         #nav>li{
  34.             position: relative;
  35.         }
  36.         #nav>li>ul{
  37.             position: absolute;
  38.             top: 50px;
  39.             width: 600px;
  40.             border: 1px solid #aaa;
  41.             border-top:none;         
  42.         }
  44.         #nav>li>ul>li a{
  45.             display: inline-block;
  46.             height: 50px;
  47.             color: #444;
  48.         }
  49.         ul.sub li:hover {
  50.             background-color: #eee;
  51.         }
  52.         /* 初始化时不要显示子菜单 */
  53.         #nav>li>ul{
  54.             display: none;
  55.         }
  57.     </style>
  58. </head>
  59. <body>
  61.     <!-- li>a回车得到：<li><a href=""></a></li> -->
  62.         <!-- ul#nav回车得到： <ul id="nav"></ul>-->
  63.    <ul id="nav">
  64.        <li><a href="">信用卡</a>
  65.         <ul>
  67.  <li style="color:blue";>业务办理    
  71.                        </li>                                        
  72.              <li style="color:blue";>人气产品     
  77.              </li>
  78.              <li style="color:blue"; >热门推荐       </li>
  79.              <br>
  80.              <li><a href="">行用卡申请</a></li>
  81.              <li><a href="">办卡进度查询</a></li>
  82.              <li><a href="">龙卡热购卡    </a></li>
  83.              <li><a href="">全球支付信用卡</a></li>
  84.              <li><a href="">更多特惠活动</a></li>             
  85.              <br>
  86.              <li><a href="">在线开卡    </a></li>
  87.              <li><a href="">积分商城    </a></li>
  88.              <li><a href="">欧洲旅行信用卡</a></li>
  89.              <li><a href="">EMV信用卡</a></li>
  90.              <br>
  91.              <li><a href="">账单查询  </a></li>
  92.              <li><a href="">分期理财      </a></li>
  93.              <li><a href="">日本旅行信用卡</a></li>
  94.              <li><a href="">更多</a></li>
  95.              <br>               
  96.              <li><a href="">额度调整  </a></li>
  97.              <li><a href="">在线挂失</a></li>       
  98.          </ul>      
  99.     </li>
  100.     <li><a href="">投资理财</a></li>
  101.     <li><a href="">存款及银行卡</a></li>
  102.     <li><a href="">电子银行</a>
  103.         <ul>
  104.         <li  style="color:blue";>业务办理</li>
  105.         <br>
  106.         <li><a href="">开通网上银行</a></li>        
  107.         <br>
  108.         <li><a href="">消息服务定制</a></li>        
  109.         <br>
  110.         <li><a href="">开通e账户</a></li>        
  111.         <br>
  112.         <li><a href="">云闪付销户</a></li>        
  113.         <br>
  114.     </ul>         
  115.     <li><a href="">悦享生活</a></li>
  116.     <li><a href="">优智规划</a></li>       
  117.     </ul>    
  118. </body>
  119. <script>    
  120.     // 获取所有的主导航
  121.     const navs=document.querySelectorAll('#nav> li');
  124.     navs.forEach(function(nav){
  125.         // 鼠标移入时显示子菜单        nav.addEventListener('mouseover',showSubMenu);
  127.         // 鼠标移出时关闭子菜        nav.addEventListener('mouseout',closeSubMenu);
  128.      });
  130.     //  显示子菜单
  131.     function showSubMenu(ev){
  132.         console.log(ev.target);
  133.         // 当前导航有没有子菜单？
  134.         if(ev.target.nextElementSibling !==null) {
  135.         ev.target.nextElementSibling.style.display ="block";
  136.         }
  137.     }
  138.     // 关掉子菜单
  139.     function closeSubMenu(ev){
  140.         if(ev.target.nodeName==="A" && 
  141.         ev.target.nextElementSibling !==null) {
  142.         ev.target.nextElementSibling.style.display ="none";
  143.         }      
  144.     }
  145.     //    重点：链接+无序列表+事件监听+事件代理/委托
  146. </script>
  147. </html>

2、效果图：

2.1 初始页面

2.2 鼠标移到导航菜单条时，菜单颜色变红色显。
  1. 如果该菜单有下拉菜单，则显示下拉菜单；

2.3 鼠标移到导航菜单条时，菜单颜色变红色显。
  1. 如果该菜单没有下拉菜单，则不显示。

三、重点小结

1. const navs=document.querySelectorAll(‘#nav> li’);

—获取所有的主导航

2. 子菜单

navs.forEach(function(nav){
鼠标移入时显示子菜单： nav.addEventListener(‘mouseover’,showSubMenu);
鼠标移出时关闭子菜 ： nav.addEventListener(‘mouseout’,closeSubMenu);
});

函数实现功能：
  1.  显示子菜单：
  2. function showSubMenu(ev){
  3.     console.log(ev.target);
  4.     当前导航有没有子菜单？
  5.     if(ev.target.nextElementSibling !==null) {
  6.     ev.target.nextElementSibling.style.display ="block";
  7.     }
  8. }
  9. 关掉子菜单：
  10. function closeSubMenu(ev){
  11.     if(ev.target.nodeName==="A" && 
  12.     ev.target.nextElementSibling !==null) {
  13.     ev.target.nextElementSibling.style.display ="none";
  14.     }
  15. }
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