首页 > 代码库 > 实现流动式菜单栏
实现流动式菜单栏
slidedown 通过调整高度显示所匹配的元素
slideUp 通过调整高度隐藏所匹配的元素
html 代码:
<div id="container">
<h1>流式导航栏</h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild"><a href="JavaScript:#">首页</a><div class="menuInfo">这是首页的连接</div></li>
<li><a href="JavaScript:#">公司简介</a><div class="menuInfo">公司简介的信息</div></li>
<li><a href="JavaScript:#">公司产品</a><div class="menuInfo">公司产品信息</div></li>
<li><a href="JavaScript:#">个性化服务</a><div class="menuInfo">我的服务,你放心</div></li>
<li><a href="JavaScript:#">关于</a><div class="menuInfo">没有关于的连接</div></li>
<li><a href="JavaScript:#">联系我们</a><div class="menuInfo">来吧,加入我们吧,游林</div></li>
</ul>
</div>
</div>
--------------------------------------------------------------------------
css 代码:
<style type="text/css">
#menuBarHolder{ width:730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
.firstchild{ border-left:1px solid #ccc;}
#container{ margin-top:10px;}
#menuBar li { float:left; padding:15px; height:16px; width:75px; border-right:1px solid #ccc}
.menuInfo{ cursor:hand; background-color:#000; color:#fff;
width:75px; font-size:11px; height:100px; padding:3px; display:none; position:absolute;
margin-left:15px; margin-top:10px; }
</style>
-----------------------------------------------------------------
jquery 代码:
<script type="text/javascript">
$(function () {
$("#menuBar li").click(function () {
var url = $(this).find("a").attr("href");
document.location.href = http://www.mamicode.com/url;
});
$("#menuBar li").hover(function () {
$(this).find(".menuInfo").slideDown();
}, function () {
$(this).find(".menuInfo").slideUp();
})
})
</script>
--------------------------------------
实现流动式菜单栏