首页 > 代码库 > div模拟的下拉框特效

div模拟的下拉框特效

从网上找来的,感觉不错就拿来分享下

<style type="text/css">    body, ul, li    {        margin: 0;        padding: 0;        font-size: 13px;    }    ul, li    {        list-style: none;    }    #divselect    {        width: 186px;        margin: 80px auto;        position: relative;        z-index: 10000;    }    #divselect cite    {        width: 150px;        height: 24px;        line-height: 24px;        display: block;        color: #807a62;        cursor: pointer;        font-style: normal;        padding-left: 4px;        padding-right: 30px;        border: 3px solid #333333;        background: url(xjt.png) no-repeat right center;    }    #divselect ul    {        width: 184px;        border: 1px solid #333333;        background-color: #ffffff;        position: absolute;        z-index: 20000;        margin-top: -1px;        display: none;    }    #divselect ul li    {        height: 24px;        line-height: 24px;    }    #divselect ul li a    {        display: block;        height: 24px;        color: #333333;        text-decoration: none;        padding-left: 10px;        padding-right: 10px;    }    #divselect ul li a:hover    {        background-color: #CCC;    }    p    {        margin: 10px auto;        width: 920px;    }    #n    {        margin: 10px auto;        width: 920px;        border: 1px solid #CCC;        font-size: 12px;        line-height: 30px;    }    #n a    {        padding: 0 4px;        color: #333;    }</style>

  

<form id="form1"action="" method="post"><div id="divselect" class="divselect">      <cite>请选择特效分类</cite>      <ul>         <li><a href="javascript:;" selectid="1">导航菜单</a></li>         <li><a href="javascript:;" selectid="2">下拉select效果</a></li>         <li><a href="javascript:;" selectid="3">select模拟</a></li>         <li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li>         <li><a href="javascript:;" selectid="5">jquery 下拉特效</a></li>      </ul>  </div>  <br />  <div id="divselect" class="divselect1">      <cite>请选择特效分类</cite>      <ul>         <li><a href="javascript:;" selectid="6">导航</a></li>         <li><a href="javascript:;" selectid="7">下拉</a></li>         <li><a href="javascript:;" selectid="8">模拟</a></li>         <li><a href="javascript:;" selectid="9">特效</a></li>         <li><a href="javascript:;" selectid="10">下拉特效</a></li>      </ul>  </div>  <input name="" value="" id="inputselect"/> //获取的数据</form><input type="button" value="get" onclick="get()" />

 

$(function(){    $.divselect(".divselect", "#inputselect");    $.divselect(".divselect1", "#inputselect");});function get() {        var dd = document.getElementById("inputselect");        alert(dd.value);    }

下载示例代码 http://www.51xuediannao.com/js/jquery/divselect.html