jQuery液态融合(gooey)样式导航菜单插件 jquery gooey menu pluggins,Easily customizable jQuery plugin using SVG filters

Menu Styles

Horizontal menu with glued items
        $(function() {
         $("#gooey-h").gooeymenu({
          style: "horizontal",
          contentColor: "white",
          horizontal: {
                    menuItemPosition: "glue"
                }
         });
         });
    
Round menu with glued items (the glued effect may be achieved by adjusting "size" and circle radius property values closer (e.g, 80 and 85))
        $(function() {
         $("#gooey-round").gooeymenu({
                bgColor: "#ffc0cb",
                contentColor: "white",
                style: "circle",
                circle: {
                    radius: 85
                },
                size: 80
         });
       });
    

Event API

Use event API to hook into animation "open" and "close" events. In this example, we change menu item colors when menu "open" and "close" events are triggered.
          $(function() {
          $("#gooey-round").gooeymenu({    
                circle: {
                    radius: 85
                },
                open: function() {
                    $(this).find(".gooey-menu-item").css("background-color", "steelblue");
                    $(this).find(".open-button").css("background-color", "steelblue");
                },
                close: function(gooey) {
                    $(this).find(".gooey-menu-item").css("background-color", "#00ffff");
                    $(this).find(".open-button").css("background-color", "#00ffff");
                }
            });
            });