首页
所有分类
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 UI AutoComplete 使用说明
Jun 20 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
深入理解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
name_scope (1) variable_scope(1) turtle(1) 三子棋(2) 字符集(1) 神经网络(7) blinker(1) data(4) 信号库(1) Keras(3)
You might like
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP 实现缩略图
2021/03/09 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python中类的一些方法分析
2014/09/25 Python
用Python实现一个简单的线程池
2015/04/07 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python退火算法在高次方程的应用
2018/07/26 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
如何使用Python调整图像大小
2020/09/26 Python
Osklen官方在线商店：巴西服装品牌
2019/04/25 全球购物
女士鞋子、包包和服装在线，第一款10美元：ShoeDazzle
2019/07/26 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
高中运动会广播稿
2014/09/16 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
工作检讨书范文
2015/01/23 职场文书
风之谷观后感
2015/06/11 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers
GO中sync包自由控制并发示例详解
2022/08/05 Golang