Jquery实例教程:slideMenu网页菜单
http://www.itjxue.com 2015-08-06 23:02 来源:未知 点击次数:
菜单二（slideMenu）
效果图：
要点说明：1.html（习惯性用ul列表，这例子换个一种架构）
实现代码：（其中一个列表）
<p class="menu_head">首页</p>2.css
<div class="menu_content">
<em class="arrow_left"></em>
<a href="#">日记</a>
<a href="#">相册</a>
<a href="#">兴趣</a>
<em class="arrow_right"></em>
</div>
A,定位position
B,display
C,边框border——可以制作箭头
实现代码：
3.jquery技术<style type="text/css">
p{
margin:10px 0 0;
width:100px;
height:24px;
text-align:center;
border:1px solid gray;
background:#eee;
}
div.menu_content{
margin-left:5px;
width:90px;
background:red;
}
div.menu_content a{
width:90px;
height:24px;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
}
div.menu_content em{
position:relative;
display:inline-block;
width:0;
height:0;
}
div.menu_content em.arrow_left{
left:-5px;
border-right:5px solid blue;
border-bottom:5px solid #fff;
}
div.menu_content em.arrow_right{
top:-77px;
left:90px;
border-right:5px solid #fff;
border-top:5px solid blue;
}
</style>
A,click()单击事件
B,slideUp()向上滑动效果
C,slideToggle()上下滑动切换
实现代码：<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("div.menu_content").hide();
$("p.menu_head").click(function(){
$(this).next("div.menu_content").slideToggle() //p标签后面相邻的div标签上下滑动来达到显示隐藏
.siblings("div.menu_content").slideUp(); //所有显示的div的兄弟标签都向上滑动隐藏
});
});
</script>
ps：上传不了附件，亲们如果有兴趣。可以留言，一起学习大家进步！