Submit your widget

Very cool jQuery Wheel Menu Button

Created 5 years ago   Views 49482   downloads 10280    Author onextrapixel
Very cool jQuery Wheel Menu Button
View DemoDownload 223.6 KB
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.


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">
<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>

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.


.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;
.wheel li a {
  display: block;

Read more: