登录
当前位置： 首页 > 编程笔记 >

JavaScript实战之菜单特效

何向荣
2023-03-14
本文向大家介绍JavaScript实战之菜单特效，包括了JavaScript实战之菜单特效的使用技巧和注意事项，需要的朋友参考一下

本文将持续添加我自己用原生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>

效果图：

下面是第二个特效：（具体实现比第一个简单很多，主要注意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实战之带收放动画效果的导航菜单，包括了JavaScript实战之带收放动画效果的导航菜单的使用技巧和注意事项，需要的朋友参考一下 虽然有很多插件可用，但为了共同提高，我做了一系列JavaScript实战系列的实例，分享给大家，前辈们若有好的建议，请务必指出，免得误人子弟啊！ 今天是第一战：带收放动画效果的菜单，效果如下图：（样式有点丑(-^-)）  （ 由于在写本

  • JavaScript简单下拉菜单特效

    本文向大家介绍JavaScript简单下拉菜单特效，包括了JavaScript简单下拉菜单特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下 实例1：联动的省市下拉菜单 onchange 事件会在域的内容改变时发生。 实例2：三级联动的省市县下拉菜单 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • javascript+css3 实现动态按钮菜单特效

    本文向大家介绍javascript+css3 实现动态按钮菜单特效，包括了javascript+css3 实现动态按钮菜单特效的使用技巧和注意事项，需要的朋友参考一下 一个菜单按钮特效案例，简单的实现了动态效果。 废话不多说了，直接给大家贴代码了，代码写好不好，还请给位大侠多多指教。 以上代码简单实现了动态按钮菜单特效，希望对大家有所帮助。

  • JavaScript实现的联动菜单特效示例

    本文向大家介绍JavaScript实现的联动菜单特效示例，包括了JavaScript实现的联动菜单特效示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现的联动菜单特效。分享给大家供大家参考，具体如下： 博主昨天发布了一篇关于JavaScript特效的文章，今天呢给大家带来联动菜单特效，这可能是一个系列哦！ 效果图 和以前一样，先发效果图，然后在进行讲解。 代码 功

  • JavaScript实战(原生range和自定义特效)简单实例

    本文向大家介绍JavaScript实战(原生range和自定义特效)简单实例，包括了JavaScript实战(原生range和自定义特效)简单实例的使用技巧和注意事项，需要的朋友参考一下 今天我又码了两个特效：一个是用原生input[type=range]的，另一个完全自定义的；下面是完整代码和演示： 第一个的实现很简单，就不做解释了，自己看代码； 这里主要介绍第二个实例的实现： 在我们看到一个需

  • evm 之实战

    简述 前面我们从一个智能合约的部署流程，到智能合约的字节码流程分析，再到evm虚拟机的源码分析。 整个分析其实就是为了移植虚拟机做基础。 如果看了前面几篇文章在来进行代码移植就会跟得心应手一些。 说明 因为涉及到的代码会比较多， 不可能把所有代码都列举出来。 所以也只是挑关键的部分进行讲解说明。 整个移植的代码我已经合到之前的那个简单(无用)demo版本的公链项目上了。 移植的以太坊版本为v1.8

相关阅读

JavaScript实战(原生range和自定义特效)简单实例java8新特性之stream的collect实战教程JavaScript实现网页下拉菜单效果JavaScript实现非常简单实用的下拉菜单效果JavaScript实现简单的二级导航菜单实例

相关文章

四战腾讯实习之腾讯视频三面JavaScript之表单基础知识（表单脚本）[实例]Selenium实战应用ionic 侧栏菜单ionic 上拉菜单

相关问答

在javascript菜单中使用Selenium复选框鼠标左键单击和菜单项单击之间的冲突Webview将菜单项添加到TextSelection菜单菜单按钮样式，菜单打开JavaFXEclipse RCP菜单

相关工具

滚动菜单四格菜单旋转菜单Go 开发实战左右菜单Demo

相关文档

Netty 实战Node.js 实战Express 实战REST 实战Git 菜单
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.