JavaScript實戰之菜單特效

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript實戰之菜單特效

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>

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

上一頁:js 自帶的sort() 方法全面了解
下一頁:深入理解js generator數據類型

關於JavaScript

JavaScript初學困境: 利用空閒幾天把《JavaScript權威指南》安靜的讀了一篇。真是一本好書呀！呵呵，這句話見的太多了
js實現仿阿裡巴巴城市選擇框效果實例: 本文實例講述了js實現仿阿裡巴巴城市選擇框效果。分享給大家供大家參考。具體分析如下：這並不是一個城市
jquery div模態窗口的簡單實例: jquery div模態窗口的簡單實例<!DOCTYPE html PUBLIC -//W3C

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章