jquery metro布局拖动图片导航菜单代码



206 823 275



特效描述:布局拖动 图片导航 菜单代码,metro导航菜单    

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" media="all" href="css/metro.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.plugins.min.js"></script>
<script type="text/javascript" src="js/metro.js"></script>

3. HTML代码

<div class="metro-layout horizontal">
	<div class="header">
		<h1>类似智能手机的滑动导航</h1>
		<div class="controls">
			<span class="down" title="Scroll down"></span>
			<span class="up" title="Scroll up"></span>
			<span class="next" title="Scroll left"></span>
			<span class="prev" title="Scroll right"></span>
			<span class="toggle-view" title="Toggle layout"></span>
		</div>
	</div>
	<div class="content clearfix">
		<div class="items">
			<a class="box" href="#"><span>Mail</span><img class="icon" src="images/mail.png" alt="" /></a>
			<a class="box" href="#" style="background: #6b6b6b;"><span>Settings</span><img class="icon" src="images/settings.png" alt="" /></a>
			<a class="box" href="#" style="background: #43b51f;"><span>Make a call</span><img class="icon" src="images/phone.png" alt="" /></a>
			<a class="box width2 height2" href="http://www.17sucai.com/"><span>Photos</span><img class="cover" src="images/gallery.jpg" alt="" /></a>
			<a class="box" href="#" style="background: #00aeef;"><span>Music</span><img class="icon" src="images/music.png" alt="" /></a>
			<a class="box" href="#" style="background: #f58d00;"><span>Firefox</span><img class="icon" src="images/firefox.png" alt="" /></a>
			<a class="box" href="#" style="background: #640f6c;"><span>Yahoo</span><img class="icon" src="images/yahoo.png" alt="" /></a>
			<a class="box height2" href="#" style="background: #d32c2c;"><span>GMail</span><img class="icon big" src="images/gmail.png" alt="" /></a>
			<a class="box" href="#" style="background: #3c5b9b;"><span>Facebook</span><img class="icon" src="images/facebook.png" alt="" /></a>
			<a class="box" href="#" style="background: #ffc808;"><span>Winamp</span><img class="icon" src="images/winamp.png" alt="" /></a>
			<a class="box" href="#" style="background: #00a9ec;"><span>Tasks</span><img class="icon" src="images/tasks.png" alt="" /></a>
			<a class="box height2" href="#" style="background: #4c5e51;"><span>DeviantART</span><img class="icon big" src="images/deviantart.png" alt="" /></a>
			<a class="box" href="#" style="background: #f874a4;"><span>Dribbble</span><img class="icon" src="images/dribbble.png" alt="" /></a>
		</div>
	</div>
</div>



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


热门标签: 图片拖动 二级导航菜单 文字拖动 下拉导航菜单 拖动排序 竖直导航菜单 图标导航菜单 弹出层拖动 固定导航菜单 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 拖动拽动 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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