Submit your widget

Very cool jQuery Wheel Menu Button

Created 4 years ago   Views 48070   downloads 9999    Author onextrapixel
Very cool jQuery Wheel Menu Button
View DemoDownload 223.6 KB
118
Share |

this is a little jQuery plugin that will bring this concept to the web.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.

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

Read more:http://www.onextrapixel.com/2013/08/21/create-a-path-like-menu-button-with-wheelmenu-js/