码迷,mamicode.com
首页 > 其他好文 > 详细

DIV模拟的下拉框特效

时间:2014-07-24 10:13:53      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   os   数据   

CSS:

<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> 

HTML:

<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()" />

JS:

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

DIV模拟的下拉框特效,布布扣,bubuko.com

DIV模拟的下拉框特效

标签:style   blog   java   color   os   数据   

原文地址:http://www.cnblogs.com/fanzg/p/3864775.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!