通用的下拉菜单__用DL\\DD\\DT解决无法遮住select的问题
作者：zishu 来源：zishu blog 时间：2008-07-28 13:28:00
前几天写了一个ajax的，总感觉代码比较多，今天晚上又得写了一下，感觉代码还是比较多，但还好的是，比较通用。谁有办法优化一下当然好。
写的过程，还是从后向前写，先写HTML部分，希望是一个什么样子的。 想来想去，其它用dl\dt\dd来作，再好不过了；
IE6，IE7，firefox我都测过没有问题！
程序代码
<dl>
<dt></dt>
<dd></dd>
</dl>
以下是全部的代码：
程序代码
<dl>
<dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt>
<dd style="display:none">//这里如果作成AJAX的，可以为空；
<ul>
<li value="1">this is 001.</li>
<li value="2">this is 002.</li>
<li value="3">this is 003.</li>
</ul>
<input type="hidden" value="" /> //存放选中后的value
</dd>
</dl>
AjaxSelectBox()用来重新set一下li中的行为。
程序代码
function AjaxSelectBox(v){
var dl = v.parentNode;
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
var lis = dl.getElementsByTagName("li");
var html = '';
for(var y=0; y<lis.length; y++){
html += '<li onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>';
}
dl.getElementsByTagName("ul")[0].innerHTML = html;
dd.style.display = "block";
dl.onmouseout = function() {dd.style.display = "none";}
dd.onmouseover = function() {dd.style.display = "block";}
}
SetSelectInput();是点击后的行为；
程序代码
function SetSelectInput(v,flag){
var dl = v.parentNode;
while(dl.nodeName != 'DL'){
dl = dl.parentNode;
}
var input = dl.getElementsByTagName("input")[0];
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
dd.onmouseover = function() {dd.style.display = "block";}
v.onmouseover = function() {dd.style.display = "block";}
dd.onmouseout = function() {dd.style.display = "none"}
if(flag == 1){
input.value = v.attributes.getNamedItem("value").value;
dt.innerHTML = v.innerHTML;
dd.style.display = "none";
} else if(flag == 2){
v.className = 'out'; return;
} else{
v.className = 'move'; return;
}
}
CSS部分写的比较广，只要在FORM中都生效；
程序代码
<style>
*{ margin:0; padding:0}
body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}
form dt{ background:url(/file/UploadPic/20087/28/2008728133512977.gif) no-repeat left center;
width:193px;cursor:default; padding-left:5px;}form .out{ background:#FFFFFF; color:#000000;}
form .move{ background:#000066; color:#FFFFFF}
form dl{text-align:left;}
form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}
form dd li{cursor:default; width:100％; padding-left:5px;}
</style>
效果如下：
多放几个也没有问题：
这样可以解决，无法把select给遮住的问题，而且可以作更多的效果出来。而且javascript不用改，CSS部分也不用改。HTML只要按DL、DT、DD的格式去写就可以了。
标签：菜单,下拉,select,css
0
投稿猜你喜欢
一起感受HTML5和CSS3的能量[译]
2009-09-04 16:29:00
asp如何连接MYSQL数据库？
2010-01-01 15:49:00
仿DW的图形菜单 DIV+CSS
2007-08-14 10:07:00
SQL Server字符串切割函数
2012-08-21 10:18:43
SQL语句练习实例之六 人事系统中的缺勤（休假）统计
2011-11-03 17:15:55
使用MySql和php出现中文乱码的解决方法
2009-01-14 12:02:00
asp get和post数据接收过滤
2011-04-06 10:52:00
ASP实现数据输入、查询的实例
2010-05-03 10:48:00
将HTML自动转为JS代码
2010-03-17 20:49:00
在生成的静态页面中统计点击次数
2009-11-19 13:20:00
SQL语句实例说明 方便学习mysql的朋友
2012-11-30 20:02:43
谈点关于checkbox的事情
2010-09-28 14:49:00
Discuz7 的提示效果如何实现
2010-01-13 13:10:00
最简洁的asp多重查询的解决方案
2011-04-15 10:50:00
直接生成XML的Google SiteMap的asp代码
2007-08-17 13:44:00
一个js自动完成功能源码
2011-06-06 07:42:00
为什么视觉设计师需要懂HTML
2009-06-25 14:16:00
未知高度的图片垂直居中
2010-12-17 12:36:00
css网页下拉菜单制作方法(3):样式修饰
2007-02-03 11:39:00
asp任何连接带密码的access数据库
2008-04-29 21:36:00