Create a Path-like Menu Button with WheelMenu.js

by in Tutorials on 21st Aug 2013 · Comments

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

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

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.