jQuery底部滑出菜單_鼠標懸停滑動導航條



66 262 88



特效描述:底部滑出菜單 懸停滑動導航,jQuery底部滑出菜單

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

3. HTML代碼

<div class="container">
	<ul id="menu">
		<li>
			<a>
				<i class="icon_about"></i>
				<span class="title">關于</span>
				<span class="description">了解我們和我們的服務</span>
			</a>
		</li>
		<li>
			<a>
				<i class="icon_work"></i>
				<span class="title">服務</span>
				<span class="description">看到我們的工作和投資組合</span>
			</a>
		</li>
		<li>
			<a>
				<i class="icon_help"></i>
				<span class="title">幫助</span>
				<span class="description">跟我們的支持</span>
			</a>
		</li>
		<li>
			<a>
				<i class="icon_search"></i>
				<span class="title">搜索</span>
				<span class="description">搜索我們的網站</span>
			</a>
		</li>
	</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function(){
	$('#menu li').hover(function(){
		var $this = $(this);
		$('a',$this).stop(true,true).animate({'bottom':'-15px'},300);
		$('i',$this).stop(true,true).animate({'top':'-10px'}, 400);
	},function(){
		var $this = $(this);
		$('a',$this).stop(true,true).animate({'bottom':'-95px'},300);
		$('i',$this).stop(true,true).animate({'top':'50px'},400);
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊
admin
關注
TA的相關作品 >>更多
熱搜關鍵詞
熱門下載


熱門標簽:
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子