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实战之菜单特效 的全部内容, 来源链接: utcz.com/z/325389.html

回到顶部