您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery结合CSS制作漂亮的select下拉菜单
作者：佚名 责任编辑：admin 更新时间：2022-06-22
对于我来说，标准的HTML元素(Select)已经让我感到讨厌。它不能够正常的在IE浏览器上显示。还有一点就是他并不仅仅包含简单的文本。本实例将完全摒弃select元素，通过JQuery和CSS来构建DropDown元素。
我们在进行表单设计时，可能要用到select下拉选项控件，遗憾的是，IE浏览器默认的select控件外观非常丑陋，而且不能用样式来控制，不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单。
XHTML
?
1 2 3 4 5 6 7 8 9 10<div id="dropdown">
<p>请选择城市</p>
<ul>
<li><a href="#">长沙</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">南京</a></li>
<li><a href="#">堪培拉</a></li>
<li><a href="#">多伦多</a></li>
</ul>
</div>
可以看出，我们使用div来替换下拉选项控件原生的select标签。
CSS
?
1 2 3 4 5 6 7 8 9#dropdown{width:186px; margin:80px auto; position:relative}
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px;
border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px;
color:#807a62; cursor:pointer}
#dropdown ul{width:184px; background:
- 上一个程序编程： Javascript aop(面向切面编程)之around(环绕)分析
- 下一个程序编程： jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
