效果图
HTML部分：
<!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样式：
@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：
window.onload=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);
}
时间： 2024-08-06 16:06:30