如何用jquery来制作侧边导航栏？
2个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动画垂直折叠导航效果</title>
<style type="text/css">
.menu_list{width:268px;margin:0 auto;}
.menu_head{
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 14px;
color: #525252;
cursor: pointer;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #F1F1F1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="firstpane" class="menu_list">
<h3 class="menu_head current">哲学</h3>
<div style="display:block" class="menu_body">
<a href="http://www.16sucai.com">科学技术哲学</a>
<a href="#">宗教学</a>
<a href="#">美学</a>
<a href="#">伦理学</a>
<a href="#">逻辑学</a>
<a href="#">外国哲学</a>
<a href="#">中国哲学</a>
<a href="#">马克思主义哲学</a>
</div>
<h3 class="menu_head">经济学</h3>
<div style="display:none" class="menu_body">
<a href="#">应用经济学</a>
<a href="#">理论经济学</a>
<a href="#">国民经济学</a>
<a href="#">区域经济学</a>
<a href="#">产业经济学</a>
<a href="#">国际贸易学</a>
<a href="#">劳动经济学</a>
<a href="#">政治经济学</a>
</div>
<h3 class="menu_head">法学</h3>
<div style="display:none" class="menu_body">
<a href="#">马克思主义基本原理</a>
<a href="#">马克思主义发展史</a>
<a href="#">马克思主义中国化研究</a>
<a href="#">国外马克思主义研究</a>
<a href="#">思想政治教育</a>
</div>
<h3 class="menu_head">教育学</h3>
<div style="display:none" class="menu_body">
<a href="#">体育人文社会学</a>
<a href="#">体育教育训练学</a>
<a href="#">民族传统体育学</a>
<a href="#">发展与教育心理学</a>
<a href="#">应用心理学</a>
<a href="#">教育学原理</a>
<a href="#">课程与教学论</a>
<a href="#">比较教育学</a>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#firstpane .menu_body:eq(0)").show();
$("#firstpane h3.menu_head").click(function(){
$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
$("#secondpane .menu_body:eq(0)").show();
$("#secondpane h3.menu_head").mouseover(function(){
$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().removeClass("current");
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
你自己引入jQuery。还有下面这两张图片啊
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
代码来源：http://www.sucaihuo.com/js/850.html
载入js
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.fixed.js"></script>
使用fixed.js插件
<script type="text/javascript">
$(document).ready(function(){
var _code = '<div id="fixed"><dl><dd><a href="#" class="web">页游</a></dd><dd><a href="#" class="mb">手游</a></dd><dd><a href="http://www.17sucai.com/" target="_blank" class="dj">动漫</a></dd><dd><a href="http://www.17sucai.com/" target="_blank" class="mh">漫画</a></dd><dd><a href="http://www.17sucai.com/" target="_blank" class="dh">动画</a></dd><dd><a href="#" class="pk165">小说</a></dd><dd><a href="http://www.17sucai.com/" class="w267">社区</a></dd><dt><a href="javascript:void(0);" class="close"></a></dt></dl></div>';
$(_code).hide().appendTo("body").fixed({x:100,y:0}).fadeIn(500);
$("#fixed dt").click(function(){
var _left = $("#fixed").offset().left;
if(_left>=0){
$("#fixed").animate({left:-44},300,'swing',function(){
$("#fixed dt a.close").hide().width('68px').fadeIn(500);
});
} else {
$("#fixed dt a.close").width('44px');
$("#fixed").animate({left:0},300,'swing',function(){
});
}
});
});
</script>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
