jQuery

【jQuery】SVGフィルターを使用してカスタマイズできるjQueryプラグインGooey Menu

July 5, 2016
Gooey Menu

Gooey MenuはSVGフィルターを使用して簡単にカスタマイズできるネバネバ・ベッタリメニューjQueryプラグイン。

Menu Styles

Horizontal menu

$(function() {
         $("#gooey-h").gooeymenu({
          style: "horizontal",
          contentColor: "white",
          horizontal: {
                    menuItemPosition: "glue"
                }
         });
         });

Round menu with glued items

$(function() {
         $("#gooey-round").gooeymenu({
                bgColor: "#ffc0cb",
                contentColor: "white",
                style: "circle",
                circle: {
                    radius: 85
                },
                size: 80
         });
       });

Vertical menu

 $(function() {
                $("#gooey-v").gooeymenu({
                style: "vertical",
                vertical: {
                    menuItemPosition: "spaced",
                    direction: "up"
                }
              });
            });

Event API

 
 $(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");
                }
            });
            });