下拉菜单制作

Posted 向前看！明天会更好！

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉菜单制作相关的知识，希望对你有一定的参考价值。

效果图

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

 

以上是关于下拉菜单制作的主要内容，如果未能解决你的问题，请参考以下文章

js+css+html制作下拉菜单

你如何在 Tkinter 中制作下拉菜单？

如何为下拉菜单制作 CSS 边框？

如何在 KivyMD、Python 中制作下拉菜单

如何制作 Bootstrap 下拉菜单的垂直滚动条

如何在 ReactJS 中使用特定值制作下拉菜单？