欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

利用Css+jQuery 制作下拉菜单

程序员文章站 2022-03-21 22:03:44
...

html

<p id="select_box">
    <dl id="types">
        <dt><span id="select_type">请选择</span></dt>
        <dd>百货</dd>
        <dd>生活用品</dd>
        <dd>电脑外设</dd>
        <dd>数码产品</dd>
    </dl></p>

css

a{    
    text-decoration: none;
}
#select_box{    
    position: relative;    
    top: 10px;    
    left: 0px;    
    display: inline-block;    
    width: 192px;
}
#select_box dl{    
    float: left;    
    width: 192px;    
    height: 32px;    
    background: #FFFFFF;    
    cursor: pointer;    
    z-index: 100;
}
#select_box dl dt{    
    width: 172px;    
    height: 32px;    
    line-height: 34px;    
    font-size: 1em;    
    color: #fff;    
    background:url(../img/select_bg.png) no-repeat center right;    
    background-color:rgb(60,179,113);    
    margin: 0;    
    padding-left: 20px;}
#select_box dl dd{    
    position: relative;    
    left: -40px;    
    width: 172px;    
    height: 32px;    
    line-height: 32px;    
    font-size: .9em;    
    color: #FFFFFF;    
    background: #2A8F57;    
    padding-left: 20px;    
    z-index: 10;
}

jQuery

$(function(){
                $("#types dd").hide();
                $("#select_box").toggle(function(){
                    $("#types dd").stop(true,false).slideDown(200);
                },function(){
                    $("#types dd").stop(true,false).slideUp(200);
                });
                $("#types dd").click(function(){
                    var type_val=$(this).html();
                    $("#types dt").html(type_val);
                    $("#types dd").stop(true,false).slideUp(200);
                });
            })

如果是作为select组件使用,可以添加form表单和隐藏域(type=”hidden”),使用jQuery控制向input中写值,或者控制form表单提交。

以上就是利用Css+jQuery 制作下拉菜单的详细内容,更多请关注其它相关文章!