Jquery實例教程:slideMenu網頁菜單
編輯：關於JavaScript
菜單二（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：上傳不了附件，親們如果有興趣。可以留言，一起學習大家進步！
小編推薦
熱門推薦