JS+CSS仿真的下拉列表菜单

2024-09-05 12:19:17

字体：大中小

来源：转载

供稿：网友

用JavaScript+CSS共同模拟出的下拉列表框的效果，可以作为下拉菜单，看着和下拉框Select很相似，但视觉效果比正在的Select要好些，点击“运行”查看一下效果。

<!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" /><title>DIV+CSS模拟的下拉列表框</title><style type="text/css"></style></head><script type="text/javascript">function gets_id(objName){ if(document.getElementById){  return eval('document.getElementById("' + objName + '")'); }else if(document.layers){  return eval("document.layers['" + objName +"']"); }else{  return eval('document.all.' + objName); }}//打开DIV层function disp_cc(){ if(gets_id('hh').style.display=='none') {  gets_id('hh').style.display=''; } else {  gets_id('hh').style.display='none'; }}//赋值function gets_value(str){ gets_id('class').value=str; gets_id('hh').style.display='none';}</script><body><div class=xmkc>  <div><input name="class" type="text" class="wena" onClick="disp_cc();" value="请选择类别"/>  </div>  <div id="hh" style="display:none" class=classlist>    <ul>            <li class=lis>ASP</li>      <li class=lis>PHP</li>      <li class=lis>JSP</li>    </ul>    <span onclick="hh.style.display='none'" class=close>关闭</span>  </div></div></body></html>

上一篇：纯CSS下拉式导航菜单

下一篇：圆角竖向的CSS折叠菜单