Create a Path-like Menu Button with WheelMenu.js

Create a Path-like Menu Button with WheelMenu.js

About a year and a half ago, Path released the new revamp version that was equipped with a unique menu button located at the bottom left of the app. This button contains all the necessary action buttons and I thought it was an awesome idea to be able to group these multiple buttons into one without eating up all the space.

Today, I have decided to build a little jQuery plugin that will bring this concept to the web. I call it, the “Wheel Menu”, a jQuery plugin that will allow you to add a customizable Path-like menu button to your website. Let’s explore all the options you can use to add this to your own project.

Using WheelMenu.js

Create a Path-like Menu Button with WheelMenu.js

[tut demo=”http://www.onextrapixel.com/examples/path-like-menu-button/” download=”http://www.onextrapixel.com/examples/path-like-menu-button/path-like-menu-button.zip”]

Basic Usage

To add this path-like button to your website, simply include jQuery library, jquery.wheelmenu.js and wheelmenu.css to your HTML documents and create a markup as follows:

HTML Markup

<a href="#wheel" class="wheel-button">
	<span>+</span>
</a>
<ul id="wheel">
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
….
</ul>

Make sure that the href of the wheel-button matches the id of the list of items we want to show when the wheel-button is clicked. Now for the CSS part.

CSS

.wheel-button {
  position: relative;
}

.wheel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px; /* this will determine the diameter of the circle  */
  height: 200px; /* this will determine the diameter of the circle  */
  visibility: hidden;
  position: relative;
  display: none;
}

.wheel li {
  overflow: hidden;
  float:left;
}

.wheel li a {
  display: block;
}

These styles are required for the plugin to work properly. The width and height of the .wheel class will determine how big the diameter of the menu will be. Feel free to adjust this part as you see fit. The other part of the styles above shouldn’t be changed.

I kept the CSS to a minimum so that you can play around with the look and feel of your menu with your own custom CSS.

JS

$(".wheel-button").wheelmenu({
      	animation: "fly",
      	animationSpeed: "medium",
	angle: “all”
 });

The JS part is quite simple. There are 3 options you can customize, the animation, the speed and the angle at which the menu will appear.

For the animation, you can choose between “fade” or “fly” effect. You can see the difference in the first and second demo. The default value is “fade”.

Wheel Menu Demo 2

For the animationSpeed, you can set between “instant” which will appear instantly, “fast”, “medium”, or “slow”. The default value is “medium”.

For the angle option, you can choose between my predefined values (all, N, NE, E, SE, S, SW, W, and NW). This option will allow you to position the button anywhere you like and prevent the menu from overflowing off the page.

For example, for the predefined values, if you want your menu to appear on the north side of the button only, use “N” as your angle option or if you want to have your menu appear in all directions around in circle, use “all” as your angle option.

You can take this even further by using a 2 values array determining the start and end point of which the menu will appear. For example, if you want to have your menu appear in three quarters of the circle, use “[0, 270]” as your angle option. See our Demo 5 for more detail.

Wheel Menu Demo 5

Multiple buttons support

This plugin will also allow you to assign each menu button with a different angle by adding the data-angle attribute to your list (not the button). See the example below:

HTML

<a href="#wheel" class="wheel-button">
	<span>+</span>
</a>
<ul id="wheel" data-angle=”N”>
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
….
</ul>

<a href="#wheel2" class="wheel-button">
	<span>+</span>
</a>
<ul id="wheel2" data-angle=”S”>
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
<li class="item"><a href="#home">...</a></li>
….
</ul>
..

and don’t forget to remove the data-angle out of your global function call.

JS

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

Note: The predefined data markup will always override the global options you set in your function call.

Wheel Menu Demo 4

[tut demo=”http://www.onextrapixel.com/examples/path-like-menu-button/” download=”http://www.onextrapixel.com/examples/path-like-menu-button/path-like-menu-button.zip”]

Conclusion

And there you have it, a Path-like button for the web. I can’t wait to see what you guys will do with the plugin. Once again, if you enjoyed the post, or have any questions or suggestions, please let me know in the comments below.

Pete is a Bangkok entrepreneur, a UI designer, and a Ruby on Rails developer. He is the founder of Bucketlistly.com and MyColorscreen.com. Other than his businesses, design and development, he also loves astronomy, indie music, and blogging.

Comments

    • CloudyMouse,
    • August 22, 2013
    / Reply

    Thanks for the wheel menu! Smooth operation, I plan on implementing it as soon as I can think of a design to use it with.

    • Nils Schönwald,
    • August 22, 2013
    / Reply

    Nice article. I just created a similar menu a few days ago.
    My version is CSS-only.
    You can see it here http://cdpn.io/LHBvD

      • McFlyyy,
      • September 2, 2013
      / Reply

      early 2012 // http://lab.victorcoulon.fr/css/path-menu/

    • kadeshweb,
    • August 22, 2013
    / Reply

    hello sir

    I like your blog and the concept of wheel menu is fantastic. I shall try to do this.
    The demo of wheel menu is good. I think with the help of this coding parts any one can do this.
    Thanks for your knowledge based blog.

    • Chance,
    • September 9, 2013
    / Reply

    hello! this is wonderful, however im having a little issue. when it hovers out it doesnt swirl back in.

    • raji,
    • October 28, 2013
    / Reply

    how can i add google+ icon as a wheel item

    • raji,
    • October 28, 2013
    / Reply

    how to use my icon in this menu

    • Ritesh Panjwani,
    • November 4, 2013
    / Reply

    How to display a text when hovering on Wheel items and Wheel button?

    • Thomas,
    • April 8, 2014
    / Reply

    This is a great plugin. Thank you very much. Despite you should add event.preventDefault() in the button.click-eventhandler. Otherwise a click on the button can cause the page to scroll down to the button-list that represents an anchor-point.

    button.click( function(event) {
    if (el.css(‘visibility’) == “visible”) {
    el.hideIcon(button, settings);
    } else {
    el.showIcon(button, settings);
    }
    event.preventDefault();
    });

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.