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 学习笔记 element属性控制
Jul 23 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js获取滚动距离的方法
May 30 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
记录mysql性能查询过程的使用方法
2013/05/02 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
安全生产汇报材料
2014/02/17 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
赞美教师的句子
2019/09/02 职场文书
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
python manim实现排序算法动画示例
2022/08/14 Python