【jQuery】SVGフィルターを使用してカスタマイズできるjQueryプラグイン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");
}
});
});
 
Gooey Menu

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

  • LATEST
  • RELATED
  • POPULAR