div模拟的下拉框特效

随笔- 4 文章- 0 评论- 0 ?

<style type="text/css">

body, ul, li

{

margin: 0;

padding: 0;

font-size: 13px;

}

ul, li

{

list-style: none;

}

#divselect

{

186px;

margin: 80px auto;

position: relative;

z-index: 10000;

}

#divselect cite

{

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

{

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;

920px;

}

#n

{

margin: 10px auto;

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