JavaScript下拉菜单功能实例代码


Posted in Javascript onMarch 01, 2017

本文给大家分享一段实例代码关于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 相关文章推荐
jquery中邮箱地址 URL网站地址正则验证实例代码
Sep 15 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
Angular2 路由问题修复详解
Mar 01 #Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 #Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 #Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 #Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
Discuz! Passport 通行证整合
2008/03/27 PHP
PHP 输出简单动态WAP页面
2009/06/09 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
Js获取事件对象代码
2010/08/05 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
js面向对象的写法
2016/02/19 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JS实现分页导航效果
2020/02/19 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python使用while循环花式打印乘法表
2019/01/28 Python
python 利用toapi库自动生成api
2020/10/19 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
旅游管理本科生求职信
2013/10/14 职场文书
计算机专业职业规划
2014/02/28 职场文书
大学生社会实践评语
2014/04/25 职场文书
产品设计开发计划书
2014/05/07 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
本溪关门山导游词
2015/02/09 职场文书
房屋产权证明书
2015/06/19 职场文书
爱国之歌(8首)
2019/09/29 职场文书