jQuery+CSS實(shí)現(xiàn)菜單滑動伸展收縮(仿淘寶)

更新時間：2013年03月22日 16:08:16 作者：

淘寶網(wǎng)上的菜單滑動伸展收縮想必大家不會很陌生吧，接下來本文也使用jquery+css實(shí)現(xiàn)一個，代碼很簡潔功能很使用，感興趣的各位可以不要錯過了哈

功能很實(shí)用，代碼非常的簡單

效果1.

效果2.

樣式代碼如下：

復(fù)制代碼代碼如下:

 
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主要代碼如下：

復(fù)制代碼代碼如下:

 
$(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ān)文章

jQuery中判斷對象是否存在的方法匯總
本文給大家匯總了下在jQuery中判斷對象是否存在的方法以及用原生javascript實(shí)現(xiàn)的方法，有相同需求的小伙伴可以來參考下。
2016-02-02
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會對這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。
2017-08-08
struts2+jquery+json實(shí)現(xiàn)異步加載數(shù)據(jù)(自寫)
異步加載數(shù)據(jù)利用struts2+jquery+json實(shí)現(xiàn)，具體代碼如下，感興趣的各位可以參考下哈，希望對大家有所幫助
2013-06-06
jQuery獲取Table某列的值（推薦）
這篇文章主要介紹了jQuery獲取Table某列的值,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-03-03
jquery next nextAll nextUntil siblings的區(qū)別介紹
在本文為大家詳細(xì)介紹下jquery next nextAll nextUntil siblings的區(qū)別，感興趣的朋友可以參考下
2013-10-10
基于jquery實(shí)現(xiàn)即時檢查格式是否正確的表單
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)即時檢查格式是否正確的表單具體代碼，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery如何取id有.的值一般的方法是取不到的
這篇文章主要介紹了jQuery如何取id有.的值一般的方法是取不到的,需要的朋友可以參考下
2014-04-04
jquery ajax對特殊字符進(jìn)行轉(zhuǎn)義防止js注入使用示例
如果有人在留言里寫入了js語句,這結(jié)語句都會被執(zhí)行.解決辦法就是對這些特殊字符進(jìn)行轉(zhuǎn)義再顯示出來，下面有個不錯的示例，感興趣的朋友可以參考下
2013-11-11
JQueryEasyUI框架下的combobox的取值和綁定的方法
這篇文章主要介紹了JQueryEasyUI框架下的combobox的取值和綁定的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-01-01
jQuery的bind()方法使用詳解
bind()定義和用法：bind() 方法向被選元素添加一個或多個事件處理程序，以及當(dāng)事件發(fā)生時運(yùn)行的函數(shù)。
2015-07-07