logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

网页特效之下拉菜单

 学习妄长生 2019-12-04

思路：
通过:hover伪类或onmouseenter事件在鼠标经过时改变二级菜单的display
关键知识：:hover伪类/onmouseenter
1.纯静态版
具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>下拉菜单</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  14.         .clearfix:after{/*清除浮动*/
  15.             content: '';
  16.             clear: both;
  17.             display: block;
  18.         }
  19.         .box {
  20.             width: 240px;
  21.             margin: 100px auto;
  22.         }
  24.         .main {
  25.             background: url(images/bg.jpg);
  26.             height: 21px;
  27.         }
  28.         .main li{
  29.             float: left;
  30.             margin-left: 4px;
  31.             background: url(images/libg.jpg) no-repeat;
  32.             position: relative;
  33.         }
  34.         .main li:hover ul{
  35.             display: block;/*关键*/
  36.         }
  37.         .main li ul{
  38.             display: none;
  39.             position: absolute;/*定位使其脱离标准文档流*/
  40.         }
  41.         .main li ul li{
  42.             float: none;
  43.             margin: 0;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="box">
  49.         <ul class="main clearfix">
  50.             <li>一级菜单1
  51.                 <ul>
  52.                     <li>二级菜单1</li>
  53.                     <li>二级菜单2</li>
  54.                     <li>二级菜单3</li>
  55.                 </ul>
  56.             </li>
  57.             <li>一级菜单2
  58.                 <ul>
  59.                     <li>二级菜单1</li>
  60.                     <li>二级菜单2</li>
  61.                     <li>二级菜单3</li>
  62.                 </ul>
  63.             </li>
  64.             <li>一级菜单3
  65.                 <ul>
  66.                     <li>二级菜单1</li>
  67.                     <li>二级菜单2</li>
  68.                     <li>二级菜单3</li>
  69.                 </ul>
  70.             </li>
  71.         </ul>
  72.     </div>
  73. </body>
  74. </html>

具体效果可见：下拉菜单（静态）

2.JavaScript版
onmouseenter和onmouseover区别：
不论鼠标指针穿过被选元素或其子元素，都会触发onmouseover 事件。
例：li有mouseover事件，它有子元素a，经过a时也会触发onmouseover
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
注意：onmouseenter和onmouseleave配对
可见实例：onmouseenter事件

具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>下拉菜单</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  14.         .clearfix:after{
  15.             content: '';
  16.             clear: both;
  17.             display: block;
  18.         }
  19.         .box {
  20.             width: 240px;
  21.             margin: 100px auto;
  22.         }
  24.         .main {
  25.             background: url(images/bg.jpg);
  26.             height: 21px;
  27.         }
  28.         .main li{
  29.             float: left;
  30.             margin-left: 4px;
  31.             background: url(images/libg.jpg) no-repeat;
  32.             position: relative;
  33.         }
  34.         .main li ul {
  35.             display: none;
  36.         }
  37.         .main li ul{
  38.             position: absolute;/*定位使其脱离标准文档流*/
  39.         }
  40.         .main li ul li{
  41.             float: none;
  42.             margin: 0;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="box">
  48.         <ul class="main clearfix">
  49.             <li>一级菜单1
  50.                 <ul>
  51.                     <li>二级菜单1</li>
  52.                     <li>二级菜单2</li>
  53.                     <li>二级菜单3</li>
  54.                 </ul>
  55.             </li>
  56.             <li>一级菜单2
  57.                 <ul>
  58.                     <li>二级菜单1</li>
  59.                     <li>二级菜单2</li>
  60.                     <li>二级菜单3</li>
  61.                 </ul>
  62.             </li>
  63.             <li>一级菜单3
  64.                 <ul>
  65.                     <li>二级菜单1</li>
  66.                     <li>二级菜单2</li>
  67.                     <li>二级菜单3</li>
  68.                 </ul>
  69.             </li>
  70.         </ul>
  71.     </div>
  73. </body>
  74. <script>
  75.     var main = document.getElementsByClassName("main")[0];
  76.     var lis = main.children;
  77.     for(var i=0;i<lis.length;i++){
  78.         lis[i].onmouseenter = function(){
  79.             this.children[0].style.display = "block";
  80.         }
  81.         lis[i].onmouseleave = function(){
  82.             this.children[0].style.display = "none";
  83.         }
  84.     }
  85. </script>
  86. </html>

具体效果可见：下拉菜单（js）

3.jquery版
具体代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>下拉菜单</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  14.         .clearfix:after{
  15.             content: '';
  16.             clear: both;
  17.             display: block;
  18.         }
  19.         .box {
  20.             width: 240px;
  21.             margin: 100px auto;
  22.         }
  24.         .main {
  25.             background: url(images/bg.jpg);
  26.             height: 21px;
  27.         }
  28.         .main li{
  29.             float: left;
  30.             margin-left: 4px;
  31.             background: url(images/libg.jpg) no-repeat;
  32.             position: relative;
  33.         }
  34.         .main li ul{
  35.             position: absolute;/*定位使其脱离标准文档流*/
  36.             display: none;
  37.         }
  38.         .main li ul li{
  39.             float: none;
  40.             margin: 0;
  41.         }
  42.     </style>
  43. </head>
  44. <body>
  45.     <div class="box">
  46.         <ul class="main clearfix">
  47.             <li>一级菜单1
  48.                 <ul>
  49.                     <li>二级菜单1</li>
  50.                     <li>二级菜单2</li>
  51.                     <li>二级菜单3</li>
  52.                 </ul>
  53.             </li>
  54.             <li>一级菜单2
  55.                 <ul>
  56.                     <li>二级菜单1</li>
  57.                     <li>二级菜单2</li>
  58.                     <li>二级菜单3</li>
  59.                 </ul>
  60.             </li>
  61.             <li>一级菜单3
  62.                 <ul>
  63.                     <li>二级菜单1</li>
  64.                     <li>二级菜单2</li>
  65.                     <li>二级菜单3</li>
  66.                 </ul>
  67.             </li>
  68.         </ul>
  69.     </div>
  70. </body>
  71. <script type="text/javascript" src="jquery-1.11.1.js"></script>
  72. <script>
  73.     // 法1
  74.     // $(".main li").mouseenter(function(){
  75.     //     console.log($(this));
  76.     //     console.log($(this).children("ul"));
  77.     //     $(this).children("ul").show();
  78.     // });
  79.     // $(".main li").mouseleave(function(){
  80.     //     $(this).children("ul").hide();
  81.     // })
  83.     //法2
  84.     // $(".main li").hover(function(){
  85.     //     $(this).children("ul").show();
  86.     // },function(){
  87.     //     $(this).children("ul").hide();
  88.     // })
  90.     // 法3
  91.      // $(".main li").hover(function(){
  92.      //     var that = $(this).children("ul");
  93.      //     var isShow = that.css('display');
  94.      //     if(isShow == "block"){
  95.      //         that.hide();
  96.      //     }else{
  97.      //         that.show();
  98.      //     }
  99.      // })
  101.      //法4
  102.      $(".main li").hover(function(){
  103.          $(this).children("ul").slideToggle();
  104.      })
  105. </script>
  106. </html>

具体效果可见：下拉菜单（jquery）

9.5改进jquery代码：

  1. $(".main li").hover(function(){
  2.          $(this).children("ul").stop().slideToggle();
  3.      })

针对jquery中动画保留（即执行多次动画效果）的bug

有关stop函数可参考：jQuery之stop

原文的链接：https://blog.csdn.net/lyxuefeng/article/details/82391062

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 学习妄长生 > 《JavaScript》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多