JavaScript實戰之菜單特效

2019-11-20 09:14:22

字體：大中小

來源：轉載

供稿：網友

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

效果圖：