首页
所有分类
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 相关文章推荐
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JS 控件事件小结
Oct 31 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
JavaScript中遍历的十种方法总结
Dec 15 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
线程池(1) 主题(1) Repository接口(3) Springboot-cli(1) JAVA(88) 池化技术(1) Android(19) FutureTask(3) Spring Data JPA(4) ForkJoin(1)
You might like
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Python调用Redis的示例代码
2020/11/24 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Kenneth Cole官网：纽约时尚优雅品牌
2016/11/14 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
实习生自我评价
2014/01/18 职场文书
妇产医师自荐信
2014/01/29 职场文书
护理专科自荐书范文
2014/02/18 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
办公室卫生管理制度
2015/08/04 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技