<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>悬浮九宫格菜单jQuery插件jQueryPopMenu - 网页模板</title>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
#container{
max-width: 480px;
width: 100%;
margin: 20px auto;
}
#demo_box{
width: 480px;
}
.fa{
font-size: 40px;
line-height: 70px;
}
.fa-bars{
color: #3498db;
}
pre{
font-family: Consolas,Liberation Mono,Courier,monospace;
font-size: 13px;
}
@media screen and (orientation: portrait){
pre{
overflow-x: scroll;
}
}
</style>
</head>
<body>
<div id="container">
<h1>jQuery pop menu</h1>
<span>click these buttons below to have a try.</span>
<div id="demo_box">
<div class="pop_ctrl"><i class="fa fa-bars"></i></div>
<ul id="demo_ul">
<li class="demo_li"><a href="http://www.sucaijiayuan.com"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
<li class="demo_li"><a href="http://www.sucaijiayuan.com"><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>
<div id="demo_box_2">
<div class="pop_ctrl"><i class="fa fa-bars"></i></div>
<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>How to use:</h2>
<pre>$('#demo_box').popmenu({parameters});</pre>
<p>You can use parameters below.</p>
<pre>{
'controller': true, // use control button or not
'width': '300px', // width of menu
'background': '#34495e', // background color of menu
'focusColor': '#1abc9c', // hover color of menu's buttons
'borderRadius': '10px', // radian of angles, '0' for right angle
'top': '50', // pixels that move up
'left': '0', // pixels that move left
'iconSize': '100px' // size of menu's buttons
}</pre>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.popmenu.js"></script>
<script>
$(function(){
$('#demo_box').popmenu();
$('#demo_box_2').popmenu({'background':'#e67e22','focusColor':'#c0392b','borderRadius':'0'});
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
悬浮九宫格菜单jQuery插件.zip
版权申诉
90 浏览量
2022-11-26
11:03:35
上传
评论
收藏 325KB ZIP 举报
悬浮九宫格菜单jQuery插件.zip （10个子文件） 
悬浮九宫格菜单jQuery插件 
悬浮九宫格菜单jQuery插件.jpg 74KB jiaoben2162 css fonts 
fontawesome-webfont.eot 37KB fontawesome-webfont.woff 43KB FontAwesome.otf 61KB
fontawesome-webfont.svg 197KB fontawesome-webfont.ttf 79KB font-awesome.min.css 17KB
index.html 4KB js jquery.min.js 82KB jquery.popmenu.js 3KB资源评论
