div模拟的下拉框特效

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

<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