jQuery弹性展开收缩菜单插件gooey.js

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
	 });
   });

Vertical menu ("up" and "down" direction may be achieved by changing corresponding properties).

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

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

Gooey Menu

Menu Styles

Event API