RSS订阅
PHP程序员站--WWW.PHPERZ.COM  
网站地图
高级搜索
收藏本站
 当前位置:主页 >> 网页制作 >> CSS >> 文章内容
用DIV+js模拟的一个下拉菜单(select)
[收藏此页[打印本页]   
来源:phperz.com  作者:phperz.com  发布时间:2008-05-17

用DIV+js模拟的一个下拉菜单(select)
不知道为什么控制select的css样式这么少,以至于我们想做一个漂亮的下拉菜单却要大费周折,
这个下拉菜单是我给一公司做网站时用div+js模拟出来的,看起来还过的去,
废话少说,先看效果,如图 www.phperz.com

 

如果你和我一样的懒大可把他下载下来直接改改用就可以了。

php程序员站

点击下载 用DIV+js模拟的一个下拉菜单(select)

php程序员之家

需要注意的是里面的js代码是公用的(show_select函数)
也就是说你可以在一个页面上放多个下拉菜单同时调用这个show_select函数。
用时需要给show_select函数传4个参数
onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')"
第一个参数是下拉菜单显示数据的id
第二个参数是下拉菜单的按钮部分的id,也就是那个红色方块了。
每三个参数是下拉菜单的下拉列表的id
第四个参数是form表单里input隐藏域的id phperz.com

模拟的下拉菜单是和form表单里的隐藏域是成对出现的,因为要转值嘛, phperz.com

下面把代码贴出来, php程序员站

以下为引用的内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
    function show_select(input,btn,option,value){
   inputobj=document.getElementById(input);

php程序员之家

   btnobj=document.getElementById(btn);
   optionobj=document.getElementById(option);
   valueobj=document.getElementById(value);
   optionobj.style.display=optionobj.style.display==""?"none":"";
   optionobj.onblur=function () {
     optionobj.style.display="none";
   }
  
   for (var i=0;i<optionobj.childNodes.length;i++){
     optionobj.focus();
     optionobj.childNodes[i].onmouseover=function (){
  this.className="qty_items_over";
  }
  optionobj.childNodes[i].onmouseout=function (){
  this.className="qty_items_out";
  }
  optionobj.childNodes[i].onclick=function () {
  //alert(this.innerHTML)
  inputobj.innerHTML=this.innerHTML;
  valueobj.value=this.innerHTML;
phperz.com

  optionobj.blur();
  optionobj.style.display="none";
  if (input=="pro_color"){
    loadpic(this.id,"");
  }
  }
   }
 }
  </script>
<style type="text/css">
body{
font-size:12px;
font:12px Arial, Helvetica, sans-serif;
}
.pro_select{
width:250px;
height:35px;}
#pro_qty{
float:left;
height:20px;
width:75px;
padding-left:2px;
border-top:1px solid #959595;
border-bottom:1px solid #959595;
border-left:1px solid #959595;
line-height:20PX;
}
#pro_qty_but{
float:left;
width:25px;
cursor:pointer;}
#qty_items{
clear:left;
width:99px;
border-right:1px solid #959595;
border-bottom:1px solid #959595;]
border-left:1px solid #959595;
position:absolute;
z-index:80;
}
.qty_items_out {
background-color:#FFFFFF;
www~phperz~com

padding-left:2px;
cursor:pointer;
line-height:18PX;
}
.qty_items_over{
background-color:#CCCCCC;
padding-left:2px;
cursor:pointer;
line-height:18PX;
}
.clear{
clear:left;}
</style>
<title>WWW.PHPERZ.COM</title>
</head>
<body >
  <div class="pro_select">
  <div id="pro_qty">Select Qty</div>
<div id="pro_qty_but" onclick="show_select('pro_qty','pro_qty_but','qty_items','qty')">
<img src="img/select_btn.png" width="24" height="22" /></div>
  <div class="clear"></div>
  <div id="qty_items" style="display:none">
   <div class='qty_items_out'>Select-1</div>
   <div class='qty_items_out'>Select-2</div>
   <div class='qty_items_out'>Select-3</div> phperz.com
   <div class='qty_items_out'>Select-4</div>
   <div class='qty_items_out'>Select-5</div>
  </div>
  </div>
  <form id="form1" name="form1" method="post" action="?">
  <input name="qty" type="hidden" id="qty" value="1" />
  </form>
</body>
</html>

php程序员之家

php程序员站


 
 相关文章
 
发表评论
全部评论(0条)
 
 站内搜索
 热门搜索 基础  mysql  adodb  url
高级搜索 网站地图 站长工具 IP查询 收藏本站
 热点文章
 随机推荐
网站首页 | 网站地图 | 高级搜索 | RSS订阅
PHP程序员站 Copyright © 2007,PHPERZ.COM All Rights Reserved 粤ICP备07503606号 联系站长