jQuery响应式弹出图标菜单插件



206 822 275



特效描述:jQuery 响应式弹出 图标菜单插件,jQuery响应式弹出图标菜单插件

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"/>

2. 引入JS

<script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="src/jquery.popmenu.js"></script>

3. HTML代码

<div class="zzsc-container">
	<div id="container">
<h2>Demo 1: Default menu</h2>
	<div id="demo_box">
		<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
		<ul id="demo_ul">
			<li class="demo_li"><a href="#"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
			<li class="demo_li"><a href="#"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></a></li>
			<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
			<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
			<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
			<li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
			<li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
			<li class="demo_li"><div><i class="fa fa-mobile"></i></div><div>Mobile</div></li>
			<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
		</ul>
	</div>
<h2>Demo 2: Menu with square corners and orange background</h2>
	<div id="demo_box_2">
		<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
		<ul id="demo_ul_2">
			<li class="demo_li"><a href="#"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
			<li class="demo_li"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></li>
			<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
			<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
			<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
			<li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
			<li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
			<li class="demo_li"><div><i class="fa fa-mobile"></i></div><div>Mobile</div></li>
			<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
		</ul>
	</div>
<h2>Demo 3: Menu with border and custom colors</h2>
<div id="demo_box_3">
		<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
		<ul id="demo_ul_3">
			<li class="demo_li"><div><i class="fa fa-home"></i></div><div>Home</div></li>
			<li class="demo_li"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></li>
			<li class="demo_li"><div><i class="fa fa-cog"></i></div><div>settings</div></li>
			<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
			<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
			<li class="demo_li"><div><i class="fa fa-power-off"></i></div><div>Exit</div></li>
		</ul>
	</div>
	<h2>How to use:</h2>
	<pre>$('#demo_box').popmenu({parameters});</pre>
	<p>You can use parameters below.</p>
</div>
</div>
<script>
	$(function(){
		$('#demo_box').popmenu();
		$('#demo_box_2').popmenu({'background':'#e67e22','focusColor':'#c0392b','borderRadius':'0'});
		$('#demo_box_3').popmenu({'width': '200px', 'background':'#223','focusColor':'#ee5','borderRadius':'10px', 'top': '70', 'left': '-40', 'color':'#d2527f','border':'3px solid #d2527f'});
	})
</script>



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


热门标签: 右键菜单 二级导航菜单 文字提示框 下拉导航菜单 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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