0
点赞
收藏
分享

微信扫一扫

导航菜单 gooey-menu jQuery液态融合(gooey)样式导航菜单插件(精)


gooey-menu​是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件。通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效。

导航菜单 gooey-menu jQuery液态融合(gooey)样式导航菜单插件(精)_gooey-menu

使用方法

使用该导航菜单插件需要在页面中引入​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"
}

});

  1. style​:gooey菜单的样式,可用值有:”horizontal”,”vertical”,”circle”。
  2. size​:菜单项的尺寸,单位像素。
  3. margin​:菜单项之间的margin值。只有在”horizontal” 或 “vertical”参数设置为”spaced”时才有效。可用值有:”small”,”medium” 和 “large”。
  4. bgColor​:设置菜单项的背景颜色。
  5. contentColor​:设置菜单项的字体颜色。
  6. transitionStep​:设置菜单项打开的速度,单位毫秒。
  7. bounce​:是否打开”bounce”效果。
  8. bounceLength​:如果打开了”bounce”效果,设置bounce的长度。可用值有:”small”, “medium” 和 “large”。
  9. hover​:设置鼠标滑过菜单项时的颜色。
  10. circle​:设置菜单打开时圆形的半径。
  11. horizontal​:menuItemPosition:设置为”Spaced”表示要指定菜单项之间的margin值。设置为”Glue”表示菜单项堆叠在一起。
  12. vertical​:menuItemPosition:设置为”Spaced”表示要指定菜单项之间的margin值。设置为”Glue”表示菜单项堆叠在一起。
  13. vertical​:direction:菜单的垂直展开方向,可用值有:”up” 或 “down”。

回调函数


  • open:function(){}:菜单打开是触发。
  • close:function() {}:菜单关闭时触发。

gooey-menu导航菜单插件的github地址为:​​https://github.com/dominicdomu/gooey-menu​​



举报

相关推荐

0 条评论