General Settings

Base Font Size

Theme Settings

Default
Material
Material Design Soon

Menu

In this example we demonstrate how easy it is to set up a custom Menu with the help of asonWidget.

Here is the list of changes:

  • 1. - Changed the initialization animation to slide in from left.
  • 2. - Changed the submenu open animation to expand in with an increased stagger (default is 50).
  • 3. - Changed menu item not to auto close an open menu if we try to open another one.
  • 4. - Disabled navigation scrolling.

asonWidgets Menu animations are powered by Velocity.js UIPack, which means you have a ton of animation options.

For more menu customization options please check out the documentation!

<body>
	 
	

	 
		
	 
		Page content...
  	

	 
</body>
$('#mainMenu').asonwidget({ type: 'menu', animInit: 'transition.slideLeftBigIn',  animOpen: 'transition.expandIn', animOpenStagger: 100, closeSameLevel: false, navScroll:false});