jQuery液态融合（gooey）样式导航菜单插件 |菜单导航|下载

简要教程

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

使用方法

使用该导航菜单插件需要在页面中引入gooey.min.css文件，jquery和gooey.min.js文件。

HTML结构

gooey样式的环形菜单的基本HTML结构是创建一个汉堡包图标，当用户点击汉堡包图标时打开菜单。

初始化插件

在页面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"。