效果图
HTML部分:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="warp" id="div1"> <div class="navBox"> <span><img src="images/ico_01.png" alt="" style="display:none;" />请选择</span> <em class="triangle"><i></i></em> </div> <ul class="navList"> <li><a href="javascript:;"><img src="img/ico_01.png" />关于我们</a></li> <li><a href="javascript:;"><img src="img/ico_02.png" />联系我们</a></li> <li><a href="javascript:;"><img src="img/ico_03.png" />官网首页</a></li> <li><a href="javascript:;"><img src="img/ico_04.png" />新闻中心</a></li> <li><a href="javascript:;"><img src="img/ico_05.png" />产品展示</a></li> <li><a href="javascript:;"><img src="img/ico_06.png" />公司风采</a></li> </ul> </div> </body> </html>
css样式:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
@charset "utf-8";
*{margin:0; padding:0;}
li{list-style:none;}
em,i{font-style:normal;}
img{border:none;}
a{text-decoration:none;}
body{background:url(../images/bodybg.jpg) left top repeat;}
.warp{
width:320px;
position:relative;
margin:30px auto;
}
.navBox{
height:60px;
background:#FFF;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
font:20px/60px "\5FAE\8F6F\96C5\9ED1";
cursor:pointer;
}
.navBox span{
display:inline-block;
height:60px;
padding-left:30px;
}
.navBox span img{float:left;}
.triangle{
height:40px; width:40px;
border-left:#CCC solid 1px;
position:absolute;
right:10px; top:10px;
}
.triangle i{
position:absolute; left:50%; top:50%;
border-style:solid dashed dashed dashed;
border-color:#999 #FFF #FFF #FFF;
border-width:6px;
margin:-3px 0 0 -3px;
*height:0; *overflow:hidden;
}
/*active*/
.nav_active{color:#06F;}
.nav_active .triangle i{
position:absolute; left:50%; top:50%;
border-style:dashed dashed solid dashed;
border-color:#FFF #FFF #09F #FFF;
border-width:6px;
_border-width:7px;
margin:-9px 0 0 -3px;
*height:0; *overflow:hidden;
}
/*list*/
.navList{
position:absolute;
left:0; top:65px;
width:100%;
}
.navList li{
height:60px;
margin-bottom:5px;
position:relative;
filter:alpha(opacity:0);
opacity:0;
-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow:0 1px 1px rgba(0, 0, 0, 0.1);
}
.navList li a{
font:20px/60px "\5FAE\8F6F\96C5\9ED1";
height:60px;
background:#FFF;
padding-left:30px;
display:block;
color:#333;
-webkit-transition:all ease .3s;
-moz-transition:all ease .3s;
-ms-transition:all ease .3s;
-o-transition:all ease .3s;
transition:all ease .3s;
}
.navList li a img{float:left;}
.navList li a:hover{
background:#09F;
color:#FFF;
-webkit-transition:all ease .3s;
-moz-transition:all ease .3s;
-ms-transition:all ease .3s;
-o-transition:all ease .3s;
transition:all ease .3s;
}
/*
备注:
默认为白色,class加上英文的颜色则会变成相应的颜色
*/
.comHeadBar{
height:24px;
font:12px/2 'Verdana';
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99FFFFFF', endColorstr='#99FFFFFF');
background:rgba(255,255,255,0.6);
-webkit-box-shadow:0 1px 1px #CCC;
-moz-box-shadow:0 1px 1px #CCC;
box-shadow:0 1px 1px #CCC;
border-bottom:#CCC solid 1px\9;
}
.comHeadBar a{
text-decoration:none;
padding:0 15px;
color:#000;
display:inline-block;
height:24px;
}
.comHeadBar a:hover{background:#FFF;}
.comHeadBar_black{
height:24px;
font:12px/2 'Verdana';
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#CC000000', endColorstr='#CC000000');
background:rgba(0,0,0,0.8);
-webkit-box-shadow:0 1px 1px #CCC;
-moz-box-shadow:0 1px 1px #CCC;
box-shadow:0 1px 1px #CCC;
border-bottom:#CCC solid 1px\9;
}
.comHeadBar_black a{
text-decoration:none;
color:#FFF;
padding:0 15px;
display:inline-block;
height:24px;
}
.comHeadBar_black a:hover{background:#666;}
.fl{float:left;}
.fr{float:right;}
.comLinks{position:fixed; bottom:20px; left:0; width:100%; text-align:center; font-family:Verdana;}
.link_black{color:#000; text-shadow:2px 2px 2px #FFF;}
.link_black:hover{color:#09F;text-shadow:1px 1px 2px #333;}
js:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
window.οnlοad=function () { var oDiv=document.getElementById('div1'); var oNavBox=oDiv.children[0]; var oUl=oDiv.children[1]; var aLi=oUl.children; var opened=false; var ready=true; for(var i=0;i<aLi.length;i++) { if(i%2==1) { aLi[i].style.left=-aLi[i].offsetWidth+'px'; } else { aLi[i].style.left=aLi[i].offsetWidth+'px'; } aLi[i].style.display='none'; } oNavBox.onclick=function () { if(!ready)return; ready=false; if(opened) { oNavBox.className='navBox'; //收起来 var i=aLi.length-1; var timer=setInterval(function (){ var left=i%2?-aLi[i].offsetWidth:aLi[i].offsetWidth; (function (i){ startMove(aLi[i], {left: left, opacity: 0}, function (){ aLi[i].style.display='none'; if(i==0)ready=true; }); })(i); i--; if(i==-1) { clearInterval(timer); } }, 77); } else { oNavBox.className='navBox nav_active'; //展开 var i=0; var timer=setInterval(function (){ aLi[i].style.display='block'; (function (i){ startMove(aLi[i], {left: 0, opacity: 100}, function (){ if(i==aLi.length-1)ready=true; }); })(i); i++; if(i==aLi.length) { clearInterval(timer); } }, 77); } if(opened) { opened=false; } else { opened=true; } }; //aLi加点击——字上去、收起来 for(var i=0;i<aLi.length;i++) { aLi[i].onclick=function () { oNavBox.className='navBox'; var oSpan=oNavBox.children[0]; opened=false; oSpan.innerHTML=this.children[0].innerHTML; var i=aLi.length-1; var timer=setInterval(function (){ var left=i%2?-aLi[i].offsetWidth:aLi[i].offsetWidth; (function (i){ startMove(aLi[i], {left: left, opacity: 0}, function (){ aLi[i].style.display='none'; }); })(i); i--; if(i==-1) { clearInterval(timer); } }, 77); }; } (function (){ var oS=document.createElement('script'); oS.type='text/javascript'; oS.src='http://www.zhinengshe.com/zpi/zns_demo.php?id=3542'; document.body.appendChild(oS); })(); }; function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; for(var name in json) { var iTarget=json[name]; if(name=='opacity') { var cur=Math.round(parseFloat(getStyle(obj, name))*100); } else { var cur=parseInt(getStyle(obj, name)); } var speed=(iTarget-cur)/3; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(name=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else { obj.style[name]=cur+speed+'px'; } if(cur!=iTarget) { bStop=false; } } if(bStop) { clearInterval(obj.timer); if(fnEnd) { fnEnd(); } } }, 20); }