一款jQuery提示浮动菜单插件-floatingMenu,简单实用,分别从不同的方向来显示多个图标菜单,样式可以自由调整,图标也可以自由增删,喜欢的就收下吧。
页面的head部分引入CSS样式、jQuery库和javascript插件,设置好页面元素的样式等,代码如下:
<link type="text/css" rel="stylesheet" href="css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="css/floating-menu.css">
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/floating-menu.js"></script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html, body {
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
overflow: hidden;
}
*:focus {
outline: none;
}
a {
font-size: 14px;
color: #000;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
text-align: center;
line-height: 32px;
color: #0a0a0a;
}
a.icon {
font-size: 24px;
color: #00a2ff;
}
.designer-actions {
position: relative;
display: block;
text-align: center;
border-bottom: 1px solid transparent;
margin: 80px 0;
}
h1 { text-align:center; margin-top:70px; font-size:24px;}
页面的body部分主要是四个不同方向的div容器,结构相当的简单,部分代码如下:
<div class='designer-actions'>
<a class='icon ion-navicon-round' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='bottom'></a>
</div>
<div class='designer-actions'>
<a class='icon ion-navicon-round' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='left'></a>
</div>
<div class='designer-actions'>
<a class='icon ion-navicon-round' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='right'></a>
</div>
<div class='designer-actions'>
<a class='icon ion-navicon-round' href='javascript:void(null);' data-action='show-actions-menu' data-fm-floatTo='top'></a>
</div>
页面的底部需要调用浮动菜单的插件,代码如下:
$.floatingMenu({
selector: '.designer-actions a[data-action="show-actions-menu"]',
items: [
{
icon : 'ion-android-share-alt',
title : '浮动菜单',
action : 'http://www.zzyzan.com/'
},
{
icon : 'ion-plus-circled',
title : '写入',
action : function(event) {
alert('写入');
}
},
{
icon : 'ion-edit',
title : '编辑',
action : function(event)
{
alert('编辑');
}
},
{
icon : 'ion-minus-circled',
title : '删除',
action : function(event) {
alert('删除');
}
},
]
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791