gooey-menu是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件。通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效。
使用方法
使用该导航菜单插件需要在页面中引入gooey.min.css文件,jquery和gooey.min.js文件。
<link rel="stylesheet" href="gooey.min.css"> <script src="js/jquery.min.js"></script> <script src="js/gooey.min.js"></script>
HTML结构
gooey样式的环形菜单的基本HTML结构是创建一个汉堡包图标,当用户点击汉堡包图标时打开菜单。
<nav id="gooey-upper"> <input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1"/> <!-- 汉堡包图标 --> <label class="open-button" for="menu-open1"> <span class="burger burger-1"></span> <span class="burger burger-2"></span> <span class="burger burger-3"></span> </label> <!--环形菜单--> <a href="#features" class="gooey-menu-item"> <i title="Features" class="fa fa-cog fa-2x"></i> </a> <a href="#h-spaced-menu" class="gooey-menu-item"> <i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i> </a> <a href="#menu-v-example" class="gooey-menu-item"> <i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i> </a> <a href="#docs" class="gooey-menu-item"> <i title="Docs" class="fa fa-book fa-2x"></i> </a> <a href="#event-api" class="gooey-menu-item"> <i title="Event API" class="fa fa-code fa-2x"></i> </a> <a href="#round" class="gooey-menu-item"> <i title="Round Menu" class="fa fa-circle fa-2x"></i> </a> </nav>
初始化插件
在页面DOM元素加载完毕之后,可以通过gooeymenu()
方法来初始化该菜单插件。
$("#gooey-demo").gooeymenu({ // 配置参数 });
配置参数
该gooey样式的环形菜单的默认配置参数如下:
$("#gooey-demo").gooeymenu({ // 'horizontal', 'circle' or 'vertical' style: "horizontal", size: 70, margin: "medium", bgColor: "steelblue", contentColor: "white", transitionStep: 100, bounce: false, bounceLength: "medium", hover: "white", circle: { radius: 80 }, horizontal: { menuItemPosition: "glue" }, vertical: { menuItemPosition: "spaced", direction: "up" } });
参数说明
style
:gooey菜单的样式,可用值有:"horizontal","vertical","circle"。size
:菜单项的尺寸,单位像素。margin
:菜单项之间的margin值。只有在"horizontal" 或 "vertical"参数设置为"spaced"时才有效。可用值有:"small","medium" 和 "large"。bgColor
:设置菜单项的背景颜色。contentColor
:设置菜单项的字体颜色。transitionStep
:设置菜单项打开的速度,单位毫秒。bounce
:是否打开"bounce"效果。bounceLength
:如果打开了"bounce"效果,设置bounce的长度。可用值有:"small", "medium" 和 "large"。hover
:设置鼠标滑过菜单项时的颜色。circle
:设置菜单打开时圆形的半径。horizontal:menuItemPosition
:设置为"Spaced"表示要指定菜单项之间的margin值。设置为"Glue"表示菜单项堆叠在一起。vertical:menuItemPosition
:设置为"Spaced"表示要指定菜单项之间的margin值。设置为"Glue"表示菜单项堆叠在一起。vertical:direction
:菜单的垂直展开方向,可用值有:"up" 或 "down"。
回调函数
open:function(){}
:菜单打开是触发。close:function() {}
:菜单关闭时触发。
gooey-menu导航菜单插件的github地址为:https://github.com/dominicdomu/gooey-menu