利用Css+jQuery 制作下拉菜单
程序员文章站
2022-03-21 22:03:44
...
html
<p id="select_box"> <dl id="types"> <dt><span id="select_type">请选择</span></dt> <dd>百货</dd> <dd>生活用品</dd> <dd>电脑外设</dd> <dd>数码产品</dd> </dl></p>
css
a{ text-decoration: none; } #select_box{ position: relative; top: 10px; left: 0px; display: inline-block; width: 192px; } #select_box dl{ float: left; width: 192px; height: 32px; background: #FFFFFF; cursor: pointer; z-index: 100; } #select_box dl dt{ width: 172px; height: 32px; line-height: 34px; font-size: 1em; color: #fff; background:url(../img/select_bg.png) no-repeat center right; background-color:rgb(60,179,113); margin: 0; padding-left: 20px;} #select_box dl dd{ position: relative; left: -40px; width: 172px; height: 32px; line-height: 32px; font-size: .9em; color: #FFFFFF; background: #2A8F57; padding-left: 20px; z-index: 10; }
jQuery
$(function(){ $("#types dd").hide(); $("#select_box").toggle(function(){ $("#types dd").stop(true,false).slideDown(200); },function(){ $("#types dd").stop(true,false).slideUp(200); }); $("#types dd").click(function(){ var type_val=$(this).html(); $("#types dt").html(type_val); $("#types dd").stop(true,false).slideUp(200); }); })
如果是作为select组件使用,可以添加form表单和隐藏域(type=”hidden”),使用jQuery控制向input中写值,或者控制form表单提交。
以上就是利用Css+jQuery 制作下拉菜单的详细内容,更多请关注其它相关文章!