码迷，mamicode.com
首页 > 其他好文 > 详细

下拉菜单制作

时间：2017-01-17 10:48:56      阅读：255      评论：0      收藏：0      [点我收藏+]

标签：cte   jpg   菜单   ceil   sof   margin   lin   ros   gid   

效果图

技术分享

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>
View Code

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;}
View Code

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);
}
View Code

 

下拉菜单制作

标签：cte   jpg   菜单   ceil   sof   margin   lin   ros   gid   

原文地址：http://www.cnblogs.com/zxl89/p/6291866.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！