select输入框内容下拉导航效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 select输入框内容下拉导航效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select输入框内容下拉导航效果</title>
    <link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div class="zzsc">
      <p>点击选择内容栏目</p>
      <ul class="listUl">
        <li><span>首页</span></li>
    	<li><span>Flash素材</span></li>
    	<li><span>菜单导航</span></li>
    	<li><span>时间日期</span>
        	<dl class="second">
            	<dd class="add">图片特效</dd>
                <dd class="add">名站特效</dd>
                <dd class="add">其他代码</dd>
                <dd class="add">亚当学院</dd>
                <dd class="add">HTML5</dd>
            </dl>
        </li>
    	<li><span>焦点图</span></li>
    	<li><span>tab标签</span></li>
    	<li><span>jquery特效</span></li>
    	<li><span>在线客服</span></li>
    	<li><span>广告代码</span></li>
    	<li><span>相册代码</span></li>
    </ul>
  </div>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
	//点击后判断ul是否隐藏
	$(".zzsc p").click(function(){
		var ul = $(".listUl");
		if(ul.css("display")=="none"){
			ul.slideDown(200);
		}else{
			ul.slideUp(200);
		}
	});
	//鼠标悬停显示二级导航栏目
	$('.zzsc li').hover(function(){
		$('dl',this).show(0);
	},function(){
		$('dl',this).hide(0);
	}).each(function(){
		var second = $(this).find('.second');
		if(second.length == '1'){
			$(this).addClass('dot');
		}
	});
	$('.zzsc dl').each(function(){
		$('dd:last',this).css('border-bottom','0');
	});
	//选中某个内容后赋值给p标签，并隐藏ul列表
	$(".zzsc .add").click(function(){
		var txt = $(this).text();
		$(".zzsc p").html(txt);
		$(".listUl").hide();
	});
});
</script>
</body>
</html>

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;}
body{font-size:12px;text-align:left;}
.zzsc{width:150px;margin:20px auto;position:relative}
.zzsc p{width:144px;height:24px;line-height:24px;padding-left:4px;border:1px solid #ccc;color:#807a62;cursor:pointer}
.zzsc ul{width:148px;margin-top:2px;border:1px solid #ccc;position:absolute;display:none}
.zzsc ul li{height:24px;cursor:pointer;position:relative;}
.zzsc ul li.dot{background:url(http://demo.zzsc.com/2014/select1224/images/right.gif) no-repeat 135px center;}
.zzsc ul li span{width:138px;height:24px;line-height:24px;padding-left:10px;display:block;left:0;top:0;position:absolute;}
.zzsc ul li dl{width:130px;height:auto;overflow:hidden;position:absolute;left:148px;top:0;border:1px solid #ccc;background:#ccc;color:#fff;display:none;}
.zzsc ul li dl dd{border-bottom:1px solid #fff;padding-left:10px;height:24px;line-height:24px;}
.zzsc ul li dl dd:hover{background:#bbb;}
.zzsc ul li:hover{background:#ccc;color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)