jQuery+CSS實現(xiàn)菜單滑動伸展收縮(仿淘寶)
更新時間：2013年03月22日 16:08:16 作者：
淘寶網(wǎng)上的菜單滑動伸展收縮想必大家不會很陌生吧，接下來本文也使用jquery+css實現(xiàn)一個，代碼很簡潔功能很使用，感興趣的各位可以不要錯過了哈
功能很實用，代碼非常的簡單
效果1.
效果2.
樣式代碼如下：
復制代碼 代碼如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0
}
span{
color:#FF2B13
}
a{
text-decoration:none;
color:#515050
}
a:hover{
text-decoration:underline;
color:red
}
.box_all{
overflow:hidden;
width:350px;
font-family:"微軟雅黑";
font-size:14px;
border:1px solid #EEEEEE;
border-top:2px solid #F57A04;
padding:0 0 10px 0;
margin:0 auto
}
.box{
padding-left:45px;
padding-top:5px
}
.box li{
line-height:20px;
margin-right:30px;
width:120px;
text-align:left;
float:left;
list-style-type:none
}
.boxdown{
cursor:pointer;
border:1px solid #EEEEEE;
width:60px;
height:14px;
background:#FFFFFF url(../images/down.png) no-repeat 20px;
margin-left:150px;
margin-top:-2px;
border-top:none;
margin:0 auto
}
.up{
cursor:pointer;
border:1px solid #EEEEEE;
width:60px;
height:14px;
background:#FFFFFF url(../images/up.png) no-repeat 20px;
margin-left:150px;
margin-top:-2px;
border-top:none;
margin:0 auto
}
js主要代碼如下：
復制代碼 代碼如下:
$(document).ready(function(){
var a =$(".box ul li:gt(3):not(:last)");
a.hide();
$(".boxdown").click(function(){
if(a.is(':visible')){
a.slideUp('fast');
$(this).removeClass('up');
}else{
a.slideDown('fast').show();
$(this).addClass('up');
}
});
});
您可能感興趣的文章:
相關文章
下面小編就為大家?guī)硪黄猨query 動態(tài)增加刪除行的簡單實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了Laravel整合Bootstrap 4的完整方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
JQuery擴展插件Validate—4設置錯誤提示的樣式,使用Validate的朋友可以參考下。2011-09-09
今天發(fā)現(xiàn)HotKeys插件的功能真的很強大,且使用簡單,以后再也不用考慮鍵值的問題了,自己定義每個鍵的函數(shù)就行了2008-08-08
jquery UI Datepicker時間控件的使用方法（終結版）
這篇文章是jquery UI Datepicker時間控件的使用方法終結版，可以說是技術的升華，實現(xiàn)的功能有限制的開始時間和結束時間跨度不超過三天，并配置有清空時間，重選時間等，感興趣的小伙伴們可以參考一下2015-11-11
uploadify ，簡單實用的flash上傳組件，兼容性良好。 現(xiàn)已有html5版本2012-06-06
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單評論功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
jQuery實現(xiàn)的省市聯(lián)動菜單功能示例【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)的省市聯(lián)動菜單功能,結合完整實例形式分析了jQuery實現(xiàn)級聯(lián)菜單的具體流程與操作方法,涉及jQuery表單及數(shù)組元素的遍歷及事件響應處理技巧.非常簡單實用,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了jQuery實現(xiàn)的多級下拉菜單效果代碼,涉及jquery鼠標事件及頁面元素的顯示與隱藏效果實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery下拉菜單的實現(xiàn)代碼的相關資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11