基本内容：
jQuery Gooey Menu是一款可以制作炫酷的鼠标滑过菜单动画特效的jQuery插件。
当鼠标滑过菜单项时，指定的CSS样式会跟随鼠标在菜单上运动，以平滑的动画方式高亮当前鼠标指向的菜单项。
使用方法使用该插件需要引入jQuery，gooeymenu.js和gooeymenu.css文件。
| 1 2 3 | < linkrel = "stylesheet" type = "text/css" href = "css/gooeymenu.css" /> < scripttype = "text/javascript" src = "js/jquery.min.js" ></ script > < scripttype = "text/javascript" src = "js/gooeymenu.js" ></ script > |
HTML结构该菜单插件的基本HTML结构使用无序列表。
| 1 2 3 4 5 6 7 8 | < ulid = "gooeymenu1" class = "gelbuttonmenu" > < li >< ahref = "#" >Home</ a ></ li > < li >< ahref = "#" >CSS Codes</ a ></ li > < li >< ahref = "#" >Forums</ a ></ li > < li >< ahref = "#" >Tools</ a ></ li > < li >< ahref = "#" >JavaScript</ a ></ li > < li >< ahref = "#" >CSS Gallery</ a ></ li > </ ul > |
CSS样式在gooeymenu.css文件中预置了一些菜单项高亮的样式。你可以根据实际情况自行修改为自己需要的样式。
初始化插件在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该插件。
| 1 | <script>gooeymenu.setup({id: 'gooeymenu1' , selectitem:1})</script> |
配置参数gooeymenu.setup()方法接收下面的一些可用参数：
id: "string"（必选）指定菜单<ul>容器元素的ID号
selectitem: intergerundefined 设置页面初始化之后默认选择的菜单项。它也是鼠标离开菜单后高亮效果要回到的项。它是一个整数，0是第一项，1是第二项
fx: "string" easeOutBack 设置动画的easing效果。默认值为：“easeOutBack”，可选值有：“swing”和“linear”
fxtime: milliseconds 500 设置动画的持续时间，单位毫秒
snapdelay: milliseconds 300 设置在鼠标离开菜单时高亮效果回到默认项之前的延迟时间，单位毫秒
还有第二种方式可以设置默认高亮的菜单项：通过为菜单项添加class selected来实现。
| 1 2 3 4 5 6 7 8 | < ulid = "gooeymenu1" class = "gelbuttonmenu" > < li >< ahref = "#" >Home</ a ></ li > < li >< ahref = "#" >CSS Codes</ a ></ li > < li >< ahref = "#" >Forums</ a ></ li > < li >< ahref = "#" >Tools</ a ></ li > < li >< ahref = "#" class = "selected" >JavaScript</ a ></ li > < li >< ahref = "#" >CSS Gallery</ a ></ li > </ ul > |
自 定义高亮效果该插件的高亮效果只是简单的在菜单中动态的添加一些绝对定位的<li>元素，在js文件中，你可以找到下面的代 码：effectmarkup: '<li class="active"></li>',
如果你想自定义高亮效果，可以在gooeymenu.css文件中修改li.active的样式，下面的代码是使用图片作为高亮样式的CSS代码：
| 1 2 3 4 5 6 7 8 | ul.gelbuttonmenu li.active{ position : absolute ; width : 0 ; background :lightblue; background : url (gelbuttonleft.gif) top left no-repeat , url (gelbuttonright.gif) top right no-repeat , url (gelbuttoncenter.gif) top center repeat-x ; } |