JavaScript下拉菜单功能实例代码

萧无尘
2023-03-14
本文向大家介绍JavaScript下拉菜单功能实例代码，包括了JavaScript下拉菜单功能实例代码的使用技巧和注意事项，需要的朋友参考一下
本文给大家分享一段实例代码关于js实现下拉菜单功能，具体代码如下所示：
<!doctype html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>下拉菜单</title> 
    <style type="text/css"> 
      body, 
      ul, 
      li { 
        margin: 0; 
        padding: 0; 
        font-size: 13px; 
      } 
      ul, 
      li { 
        list-style: none; 
      } 
      #divselect { 
        width: 186px; 
        margin: 80px auto; 
        position: relative; 
        z-index: 10000; 
      } 
      #divselect cite { 
        width: 150px; 
        height: 24px; 
        line-height: 24px; 
        display: block; 
        color: #807a62; 
        cursor: pointer; 
        font-style: normal; 
        padding-left: 4px; 
        padding-right: 30px; 
        border: 1px solid #333333; 
        /*background: url(xjt.png) no-repeat right center;*/ 
      } 
      cite:before { 
        content: ''; 
        position: absolute; 
        right: 7px; 
        bottom: 7px; 
        width: 0; 
        height: 0; 
        border-width: 4px; 
        border-style: solid; 
        border-color: #888 transparent transparent transparent; 
        transition: all 0.2s; 
        -webkit-transition: all 0.2s; 
        -moz-transition: all 0.2s; 
        -o-transition: all 0.2s; 
        -ms-transition: all 0.2s; 
        transform-origin: 50% 25%; 
        -ms-transform-origin: 50% 25%; 
        -moz-transform-origin: 50% 25%; 
        -webkit-transform-origin: 50% 25%; 
        -o-transform-origin: 50% 25%; 
      } 
      .extended cite:before { 
        transform: rotate(180deg); 
        -webkit-transform: rotate(180deg); 
        -moz-transform: rotate(180deg); 
        -o-transform: rotate(180deg); 
        -ms-transform: rotate(180deg); 
      } 
      #divselect ul { 
        width: 184px; 
        border: 1px solid #333333; 
        background-color: #ffffff; 
        position: absolute; 
        z-index: 20000; 
        margin-top: -1px; 
        display: none; 
      } 
      #divselect ul li { 
        height: 24px; 
        line-height: 24px; 
      } 
      #divselect ul li a { 
        display: block; 
        height: 24px; 
        color: #333333; 
        text-decoration: none; 
        padding-left: 10px; 
        padding-right: 10px; 
      } 
      .animated { 
        animation-fill-mode: both; 
        -webkit-animation-fill-mode: both; 
        -moz-animation-fill-mode: both; 
        -o-animation-fill-mode: both; 
        -ms-animation-fill-mode: both; 
      } 
      .speed_fast { 
        animation-duration: .3s; 
        /*-webkit-animation-duration: 0.2s; 
        -moz-animation-duration: 0.2s; 
        -o-animation-duration: 0.2s; 
        -ms-animation-duration: 0.2s;*/ 
      } 
      .anim_extendDown { 
        animation-name: extendDown; 
        -webkit-animation-name: extendDown; 
        -moz-animation-name: extendDown; 
        -o-animation-name: extendDown; 
        -ms-animation-name: extendDown; 
      } 
      @keyframes extendDown { 
        0% { 
          border-bottom-color: transparent; 
          height: 0; 
        } 
        100% { 
          border-bottom-color: #333; 
          height: 120px; 
        } 
      } 
      @-webkit-keyframes extendDown { 
        0% { 
          border-bottom-color: transparent; 
          height: 0; 
        } 
        100% { 
          border-bottom-color: #333; 
          height: 120px; 
        } 
      } 
      @-moz-keyframes extendDown { 
        0% { 
          border-bottom-color: transparent; 
          height: 0; 
        } 
        100% { 
          border-bottom-color: #333; 
          height: 120px; 
        } 
      } 
      @-o-keyframes extendDown { 
        0% { 
          border-bottom-color: transparent; 
          height: 0; 
        } 
        100% { 
          border-bottom-color: #333; 
          height: 120px; 
        } 
      } 
      @-ms-keyframes extendDown { 
        0% { 
          border-bottom-color: transparent; 
          height: 0; 
        } 
        100% { 
          border-bottom-color: #333; 
          height: 120px; 
        } 
      } 
    </style> 
  </head> 
  <body> 
    <div id="divselect"> 
      <cite>请选择分类</cite> 
      <ul> 
        <li id="li"> 
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="1">ASP开发</a> 
        </li> 
        <li> 
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="2">.NET开发</a> 
        </li> 
        <li> 
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="3">PHP开发</a> 
        </li> 
        <li> 
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="4">Javascript开发</a> 
        </li> 
        <li> 
          <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" selectid="5">Java特效</a> 
        </li> 
      </ul> 
    </div> 
    <script type="text/javascript"> 
      window.onload = function() { 
        var box = document.getElementById('divselect'), 
          title = box.getElementsByTagName('cite')[0], 
          menu = box.getElementsByTagName('ul')[0], 
          as = box.getElementsByTagName('a'), 
          index = -1; 
        //初始样式 
        function resetM() { 
          box.className = ""; 
          menu.className = ""; 
          menu.style.display = "none"; 
          index = -1; 
          resetA(); 
        } 
        //清空a选项样式 
        function resetA() { 
          for(var i = 0; i < as.length; i++) { 
            as[i].style.background = "#fff"; 
          } 
        } 
        // 点击三角时 
        title.onclick = function(event) { 
          //阻止事件冒泡 
          event = event || window.event; 
          event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; 
          if(box.className == "extended") { 
            resetM(); 
          } else { 
            box.className = "extended"; //给box加类名让三角旋转 
            menu.className = "animated speed_fast anim_extendDown"; //下拉菜单的下拉动画 
            menu.style.display = "block"; 
          } 
        } 
        document.onkeydown = function(event) { 
          event = event || window.event; 
          if(box.className == "extended") { 
            if(event.keyCode == 38) { //向上键 
              event.preventDefault ? event.preventDefault() : event.returnValue = false; 
              index--; 
              if(index == -1) { 
                index = as.length - 1; 
              } 
              resetA(); 
              as[index].style.background = "#ccc"; 
            } else if(event.keyCode == 40) { //向下键 
              event.preventDefault ? event.preventDefault() : event.returnValue = false; 
              index++; 
              if(index == as.length) { 
                index = 0; 
              } 
              resetA(); 
              as[index].style.background = "#ccc"; 
            } else if(event.keyCode == 13) { //回车键 
              event.preventDefault ? event.preventDefault() : event.returnValue = false; 
              title.innerHTML = as[index].innerHTML; 
              resetM(); 
            } 
          } 
        } 
        // 滑过滑过、离开、点击每个选项时 
        for(var i = 0; i < as.length; i++) { 
          as[i].onmouseover = function() { 
            resetA(); 
            this.style.background = "#ccc"; 
            index = this.getAttribute('selectid') - 1; 
          } 
          as[i].onclick = function() { 
            resetM(); 
            title.innerHTML = this.innerHTML; 
          } 
        } 
        // 点击页面空白处时 
        document.onclick = function() { 
          resetM(); 
        } 
      } 
    </script> 
  </body> 
</html>
1、要阻止事件冒泡
2、键盘事件，用index索引
3、通过设置类名或清空类名的方式给元素增加动画和恢复原有样式
以上所述是小编给大家介绍的JavaScript下拉菜单功能实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
JavaScript下拉菜单功能实例代码

相关阅读

相关文章

相关问答

相关工具

相关文档
