jquery 导航菜单 jquery和CSS3制作动画导航的向下滑动菜单



152 606 203



特效描述:jquery导航菜单 CSS3动画导航 向下滑动菜单,jquery 导航菜单 用jquery和css3制作一个非常酷炫动感十足的动画导航菜单,鼠标滑过文字或图片icon由小变大展开显示,并且滑出二级菜单目录,这是一款酷炫的jquery 导航菜单特效。

代码结构

1. 引入JS

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

2. HTML代码

	<ul id="sdt_menu" class="sdt_menu">
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/2.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">About me</span>
					<span class="sdt_descr">Get to know me</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/1.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">Portfolio</span>
					<span class="sdt_descr">My work</span>
				</span>
			</a>
			<div class="sdt_box">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Websites</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Illustrations</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Photography</a>
			</div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/3.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">Inspiration</span>
					<span class="sdt_descr">Where ideas get born</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/4.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">Photos</span>
					<span class="sdt_descr">I like to photograph</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/5.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">Blog</span>
					<span class="sdt_descr">I write about design</span>
				</span>
			</a>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/" target="_blank">
				<img src="images/6.jpg" alt=""/>
				<span class="sdt_active"></span>
				<span class="sdt_wrap">
					<span class="sdt_link">Projects</span>
					<span class="sdt_descr">I like to code</span>
				</span>
			</a>
			<div class="sdt_box">
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Job Board Website</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Shopping Cart</a>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank">Interactive Maps</a>
			</div>
		</li>
	</ul>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 二级导航菜单 滑动选项卡切换 文字收缩展开 下拉导航菜单 图片滑动 图片收缩展开 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到