首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实战之菜单特效

Posted in Javascript onAugust 16, 2016

本文将持续添加我自己用原生JS写的各种菜单特效，虽然网上一搜一大堆，但我还是喜欢自己来写一写！
 这是上一篇：JavaScript实战（带收放动画效果的导航菜单）
下面是经过优化后的完整代码，优化了CSS样式、简化事件函数、减少HTML层级，删了至少20行以上的冗余代码 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <script>
 window.onload = function() {
 //========伸缩动画菜单
 var ul = document.getElementById('ul');
 if(ul.addEventListener){
 ul.addEventListener('mouseover',listener1,true);
 ul.addEventListener('mouseout',listener2,true);
 ul.addEventListener('click',listener3,false);
 }else if(ul.attachEvent){ //兼容IE8及以前版本
 ul.attachEvent('onmouseover',listener1,false);
 ul.attachEvent('onmouseout',listener2,false);
 ul.attachEvent('onclick',listener3,false);
 }
 function listener1(event){
 //event = event||window.event; //兼容IE8及以前版本
 var target = event.target||event.srcElement; //兼容IE8及以前版本
 if(target.tagName.toLowerCase() === 'li') {
  var div1 = target.getElementsByTagName('div')[0];
  div1.style.display = 'block';
  div1.style.opacity = 1;
 }
 }
 function listener2(event){
 //event = event||window.event;
 var target = event.target||event.srcElement;
 if(target.tagName.toLowerCase() === 'li'){
  var div1 = target.getElementsByTagName('div')[0];
  div1.style.display = 'none';
  div1.style.opacity = 0;
  div1.onmouseover = function(){
  div1.style.display = 'block';
  div1.style.opacity = 1;
  };
  div1.onmouseout = function(){
  div1.style.display = 'none';
  div1.style.opacity = 0;
  };
 }
 }
 var bool = true;
 function listener3(event) {
 var event = event || window.event;
 var target = event.target || event.srcElement;
 if (target.className === 'show-hide') {
  var adiv = target.nextElementSibling;
  if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true}
  var height = 90,
  changeH,
  opacity,
  id;
  if (bool) {
  changeH = 0;
  opacity = 0;
  var text = target.innerHTML.slice(0,-1);
  target.innerHTML = text+' -';
  (function show() {
  if (changeH > height) {clearTimeout(id);return}
  changeH += 5;
  opacity += 0.06;
  console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
  adiv.style.height = changeH + 'px';
  adiv.style.opacity = opacity;
  adiv.style.display = 'block';
  id = setTimeout(function () {
  clearTimeout(id);
  show();
  }, 16.7);
  })();
  bool = false;
  } else {
  changeH = height;
  opacity = 1;
  var text = target.innerHTML.slice(0,-1);
  target.innerHTML = text+' +';
  (function hidden() {
  if (changeH < 0) {clearTimeout(id);adiv.style.display = 'none';return}
  changeH -= 10;
  opacity -= 0.11;
  console.log('opacity:'+adiv.style.opacity+',height :'+adiv.style.height);
  adiv.style.height = changeH + 'px';
  adiv.style.opacity = opacity;
  id = setTimeout(function () {
  clearTimeout(id);
  hidden();
  }, 16.7);
  })();
  bool = true;
  }
 }
 }
 };
 </script>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 a,img{border:0;}
 ul{
 position: absolute;
 top: 20px;
 left: 30px;
 z-index: 100;
 }
 #ul li{
 display: inline-block;
 position: relative;
 height: 30px;
 text-align: center;
 line-height: 30px;
 padding: 3px;
 border: 1px solid gray;
 border-radius: 10px 10px 0 0;
 background-color: aliceblue;
 cursor: pointer;
 -webkit-transition: all ease-in-out 0.3s;
 -moz-transition: all ease-in-out 0.3s;
 -ms-transition: all ease-in-out 0.3s;
 -o-transition: all ease-in-out 0.3s;
 transition: all ease-in-out 0.3s;
 }
 #ul li:hover{background-color: aquamarine;}
 .nav-div{
 position: absolute;
 width: 100%;
 left: -1px;
 top: 37px;
 display: none;
 border: 1px solid gray;
 border-top: 0;
 border-radius:0 0 10px 10px;
 background-color: aliceblue;
 }
 .show-hide{
 position: relative;
 display: block;
 border-radius:0 0 10px 10px;
 background-color: lightblue;
 -webkit-transition: all ease-in-out 0.3s;
 -moz-transition: all ease-in-out 0.3s;
 -ms-transition: all ease-in-out 0.3s;
 -o-transition: all ease-in-out 0.3s;
 transition: all ease-in-out 0.3s;
 border-bottom: 1px solid gray;
 }
 .show-hide:hover{background-color: lavender}
 .a-div{
 background-color: aliceblue;
 display: none;
 border-radius:0 0 10px 10px;
 opacity: 0}
 .a{
 z-index: -1;
 display: block;
 text-decoration: none;
 border-radius:10px;
 -webkit-transition: all ease-in-out 0.3s;
 -moz-transition: all ease-in-out 0.3s;
 -ms-transition: all ease-in-out 0.3s;
 -o-transition: all ease-in-out 0.3s;
 transition: all ease-in-out 0.3s;
 }
 .a:hover{background-color: lavender}
 </style>
</head>
<body>
<ul id="ul">
 <li>JavaScript实战
 <div class="nav-div">
 <span class="show-hide">导航特效 +</span>
 <div class="a-div">
 <a class="a" href="">可收放子菜单</a>
 <a class="a" href="">切换页面</a>
 <a class="a" href="">持续添加中...</a>
 </div>
 <span class="show-hide">其它特效 +</span>
 <div class="a-div">
 <a class="a" href="">持续添加中...</a>
 <a class="a" href="">持续添加中...</a>
 <a class="a" href="">持续添加中...</a>
 </div>
 </div>
 </li>
 <li>JavaScript性能优化
 <div class="nav-div">
 <span class="show-hide">财经 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 <span class="show-hide">科技 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 </div>
 </li>
 <li>今日新闻
 <div class="nav-div">
 <span class="show-hide">财经 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 <span class="show-hide">科技 +</span>
 <div class="a-div">
 <a class="a" href="">今日头条</a>
 <a class="a" href="">所有新闻</a>
 <a class="a" href="">往日回看</a>
 </div>
 </div>
 </li>
</ul>
</body>
</html>

效果图：

JavaScript实战之菜单特效

下面是第二个特效：（具体实现比第一个简单很多，主要注意CSS布局）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{
  margin: 0;
  padding: 0;
 }
 a,img{border:0;}
 #menu{
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
  border-left: 1px solid gray;
  border-top: 1px solid gray;
  background-color: lemonchiffon;
  text-align: center;
 }
 #menu li{
  list-style: none;
  float: left;
  width: 99px;
  height: 30px;
  line-height: 30px;
  border-right: 1px solid gray;
  background-color: burlywood;
  color: white;
  -webkit-transition: all ease-in-out 0.5s;
  -moz-transition: all ease-in-out 0.5s;
  -ms-transition: all ease-in-out 0.5s;
  -o-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
 }
 #menu li:hover{
  background-color: lemonchiffon;
  color: #336699;
 }
 .contain{
  position: absolute;
  left: -1px;
  display: none;
  width: 399px;
  height: 300px;
  color: #336699;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  background-color: lemonchiffon;
 }
 </style>
 <script>
 window.onload = function(){
  var menu = document.getElementById('menu');
  if(menu.addEventListener){
  menu.addEventListener('mouseover',show,false);
  menu.addEventListener('mouseout',hide,false);
  }else if(menu.attachEvent){
  menu.attachEvent('onmouseover',show,false);
  menu.attachEvent('onmouseout',hide,false);
  }
  function show(event){
  var target = event.target||event.srcElement;
  if(target.tagName.toLowerCase() === 'li'){
   target.firstElementChild.style.display = 'block';
  }else if(target.parentNode.tagName.toLowerCase() === 'li'){
   target.style.display = 'block';
  }
  }
  function hide(event){
  var target = event.target||event.srcElement;
  if(target.tagName.toLowerCase() === 'li'){
   target.firstElementChild.style.display = 'none';
  }else if(target.parentNode.tagName.toLowerCase() === 'li'){
   target.style.display = 'none';
  }
  }
 }
 </script>
</head>
<body>
<div id="menu">
 <ul>
 <li id="menu1">苏福的特效1
  <div class="contain">111111111111</div>
 </li>
 <li id="menu2">苏福的特效2
  <div class="contain">222222222222</div>
 </li>
 <li id="menu3">苏福的特效3
  <div class="contain">333333333333</div>
 </li>
 <li id="menu4">苏福的特效4
  <div class="contain">444444444444</div>
 </li>
 </ul>
</div>
</body>
</html>

效果图：

JavaScript实战之菜单特效

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实战之菜单特效

- Author -

苏福

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
Vue SSR 组件加载问题
May 02 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
javascript实现前端分页功能
Nov 26 Javascript
深入理解js generator数据类型
Aug 16 #Javascript
js 创建对象 经典模式全面了解
Aug 16 #Javascript
js 上传文件预览的简单实例
Aug 16 #Javascript
js removeChild 方法深入理解
Aug 16 #Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 #Javascript
总结Node.js中的一些错误类型
Aug 15 #Javascript
自动化测试读写64位操作系统的注册表
Aug 15 #Javascript
RP-F11(1) ICF-7600(1) 东芝(1) 德劲(5) 数调机(1) PL-880(1) 手调机(1) SONY(15) TOSHIBA(1) 索尼(5)
You might like
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript 异步调用
2017/10/25 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
Python ftp上传文件
2016/02/13 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python print出共轭复数的方法详解
2019/06/25 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
网上书店创业计划书
2014/01/12 职场文书
小溪流的歌教学反思
2014/02/13 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
新学期主题班会
2015/08/17 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
MySQL的Query Cache图文详解
2021/07/01 MySQL