Jquery实例教程:slideMenu网页菜单

2012-03-19 02:45:37  来源

网页制作Webjx文章简介:每天学习一点jquery:slideMenu

菜单二(slideMenu)
效果图:


要点说明:1.html(习惯性用ul列表,这例子换个一种架构)
实现代码:(其中一个列表)
<p class="menu_head">首页</p>
<div class="menu_content">
<em class="arrow_left"></em>
<a href="#">日记</a>
<a href="#">相册</a>
<a href="#">兴趣</a>
<em class="arrow_right"></em>
</div>

2.css
A,定位position
B,display
C,边框border——可以制作箭头
实现代码:
<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>

3.jquery技术
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:上传不了附件,亲们如果有兴趣。可以留言,一起学习大家进步!
更多