注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

可控制导航下拉方向的jQuery下拉菜单代码  

2016-01-08 10:24:17|  分类: jq |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果图:
可控制导航下拉方向的jQuery下拉菜单代码 - 湖小叶叶 - 米欧光影工作室
 

可控制向上或向下弹出菜单。
依赖于jQuery库。


源代码:

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可控制导航下拉方向的jQuery下拉菜单代码</title>

<style>
*{ margin:0; padding:0; list-style:none;}
.nav{ /*width:700px;*/ height:30px; line-height:30px; margin:0px auto; background:#636871;}
.nav li a{ color:#fff; text-decoration:none; display:block; float:left; height:30px; line-height:30px; padding:0px 15px; font-size:12px;background:#636871;}
.nav li a:hover{ background:#4b505a;}
.nav li{float:left;position:relative; height:30px; line-height:30px;}
.nav li .second{position:absolute;left:0;display:none;}

.header{background:#ffe; margin:10px 0; height:1000px;}
.wrapper{width:900px;margin:0px auto; color:#f00;}
</style>

</head>
<body>

<div class="nav">
<ul class=wrapper>
<li>
<a href="http://www.17sucai.com/">首页</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">首页</a>
<a href="http://www.17sucai.com/">首页</a>
<a href="http://www.17sucai.com/">首页</a>
<a href="http://www.17sucai.com/">首页</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">菜单导航</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">菜单导航</a>
<a href="http://www.17sucai.com/">菜单导航</a>
<a href="http://www.17sucai.com/">菜单导航</a>
<a href="http://www.17sucai.com/">菜单导航</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">时间日期</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">时间日期</a>
<a href="http://www.17sucai.com/">时间日期</a>
<a href="http://www.17sucai.com/">时间日期</a>
<a href="http://www.17sucai.com/">时间日期</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">焦点图</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">焦点图</a>
<a href="http://www.17sucai.com/">焦点图</a>
<a href="http://www.17sucai.com/">焦点图</a>
<a href="http://www.17sucai.com/">焦点图</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com">tab标签</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com">tab标签</a>
<a href="http://www.17sucai.com">tab标签</a>
<a href="http://www.17sucai.com">tab标签</a>
<a href="http://www.17sucai.com">tab标签</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">jquery特效</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">jquery特效</a>
<a href="http://www.17sucai.com/">jquery特效</a>
<a href="http://www.17sucai.com/">jquery特效</a>
<a href="http://www.17sucai.com/">jquery特效</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">在线客服</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">在线客服</a>
<a href="http://www.17sucai.com/">在线客服</a>
<a href="http://www.17sucai.com/">在线客服</a>
<a href="http://www.17sucai.com/">在线客服</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">广告代码</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">广告代码</a>
<a href="http://www.17sucai.com/">广告代码</a>
<a href="http://www.17sucai.com/">广告代码</a>
<a href="http://www.17sucai.com/">广告代码</a>
</div>
</li>
<li>
<a href="http://www.17sucai.com/">相册代码</a>
<div class="second" style="bottom: 30px; display: none;">
<a href="http://www.17sucai.com/">相册代码</a>
<a href="http://www.17sucai.com/">相册代码</a>
<a href="http://www.17sucai.com/">相册代码</a>
<a href="http://www.17sucai.com/">相册代码</a>
</div>
</li>
</ul>
</div>

<div class=header>
<div class=wrapper>
这是其他文本,丝毫不影响效果。
</div>
</div>

<script type="text/javascript" src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
<script type="text/javascript">
$(function(){
var nav = 0; // 默认值为0,二级菜单向下滑动显示;值为1,则二级菜单向上滑动显示
if(nav ==0){
$('.nav li').hover(function(){
$('.second',this).css('top','30px').show();
},function(){
$('.second',this).hide();
});
}else if(nav ==1){
$('.nav li').hover(function(){
$('.second',this).css('bottom','30px').show();
},function(){
$('.second',this).hide();
});
}
});
</script>



</body></html>




------------
http://www.17sucai.com/pins/demoshow/11656
  评论这张
 
阅读(87)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018