JQuery Wheel Menu: Implements beautiful Path-style Menu Rotation

I believe many of them have been usedPathAll of them have a deep impression on its unique rotating navigation menu. This function is also widely used.WebDeveloper imitation. The plug-in shared today allows you to conveniently Add the same rotation menu as Path on your website and customize the effect.

Articles you may be interested in

• OverAPI.com-the most comprehensive Online quick query manual for developers in history
• HTML5 Maker-easily create HTML5 animation effects online
• SlimerJS-Web developers can write JavaScript-controlled browsers
• Chance-powerful JavaScript random number generation class library
• Debuggex-Excellent visual debugging tool for Regular Expression

 

Here, a li element is a navigation. You can add multiple li elements as needed. The call code of the plug-in is as follows:

$ (". Wheel-button "). wheelmenu ({trigger: "hover", // trigger event, which can be: "click" or "hover ". default Value: "click" animation: "fly", // animation effect, which can be: "fade" or "fly ". default Value: "fade" animationSpeed: "fast", // animation speed, which can be: "instant", "fast", "medium", or "slow ". default Value: "medium" angle: "all", // menu display angle, which can be: "all", "N", "NE", "E ", "SE", "S", "SW", "W", "NW", or array [0,360]. default Value: "all" or [0,360]});

You can also use the data-angle attribute to define the angle for each element. For example:

<a href="#wheel2" class="wheel-button ne"> <span>+</span></a><ul id="wheel2" data-angle="NE" class="wheel">  <li class="item"><a href="#home">A</a></li>  <li class="item"><a href="#home">B</a></li>  ...</ul>

If you use this method, remember to remove the global angle Configuration:

$(".wheel-button").wheelmenu({  trigger: "hover",  animation: "fly",   animationSpeed: "fast"});

 

 

Articles you may be interested in

• Manifesto-HTML5 Offline Application cache verification tool
• Popline: a very special floating HTML5 text editor Toolbar
• Bootstrap 3.0 was officially released to better support mobile development
• Zoom. js: A unique page content scaling plug-in
• Superhero: resources for building large JavaScript applications

 

Link to this article: Use jQuery Wheel Menu to implement beautiful Path rotation Menu

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources