search

博客列表 >Chapter3 html+css+js=导航下拉菜单

Chapter3 html+css+js=导航下拉菜单

无关
无关原创
2020年06月21日 16:15:50767浏览

设计导航下拉菜单三部曲

一、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. }
上一条：京东导航定位练习下一条：浮动引起的问题的解决方案和简单仿PHP网页布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议