• Stars
    star
    403
  • Rank 107,140 (Top 3 %)
  • Language
    HTML
  • License
    GNU General Publi...
  • Created over 11 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Add a fully customisable Path-like wheel menu button to your website

#Wheel Menu by Pete R. Wheel Menu is a small jQuery plugin that will add a fully customisable Path-like wheel menu button to your website Created by Pete R., Founder of BucketListly

License: Attribution-ShareAlike 4.0 International

Demo

View demo

Usage

To add this on your website, simply include the latest jQuery library found here together with jquery.wheelmenu.js and wheelmenu.css into your document's <head>, follow by the html markup and a function call as follows:

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

Make sure the href matches the id of the ul

$(".wheel-button").wheelmenu({
  trigger: "hover", // Can be "click" or "hover". Default: "click"
  animation: "fly", // Entrance animation. Can be "fade" or "fly". Default: "fade"
  animationSpeed: "fast", // Entrance animation speed. Can be "instant", "fast", "medium", or "slow". Default: "medium"
  angle: "all", // Angle which the menu will appear. Can be "all", "N", "NE", "E", "SE", "S", "SW", "W", "NW", or even array [0, 360]. Default: "all" or [0, 360]
});

Further Customization

With jquery.wheelmenu.js, you can apply each individual elements with different angle by simply adding a data-angle to the ul in your document as follows:

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

You can also use array as angle to represent the starting and end point of where the menu will appear. For example, to use array to make the menu appear 360 degrees, you can use [0, 360] as an angle. Feel free to play with the numbers to get the best outcome.

Don't forget to remove the angle from the global options as seen here:

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

Now, each individual element will have its own effect without you calling the function multiple times.

Other Resources

  • Tutorial (Coming Soon)

More Repositories

1

onepage-scroll

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
JavaScript
9,544
star
2

purejs-onepage-scroll

The javascript version of the infamous jQuery One Page Scroll without relying on jQuery.
JavaScript
770
star
3

simple-text-rotator

Add a super simple rotating text to your website with little to no markup
HTML
748
star
4

loading-bar

Add a Youtube-like loading bar to all your ajax links
HTML
661
star
5

label_better

Label your form input like a boss with beautiful animation and without taking up space
JavaScript
517
star
6

flat-shadow

A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements
HTML
483
star
7

panorama_viewer

Embed panorama photos on your website with Panorama Viewer
JavaScript
473
star
8

interactive_3d

Create a 3D interactive object using images and one simple JS call
JavaScript
378
star
9

notify-better

An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications
JavaScript
373
star
10

tiltedpage_scroll

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin
JavaScript
323
star
11

autofix_anything

Fix position of anything on your website automatically with one js call
JavaScript
314
star
12

interactive_bg

Create an interactive moving background/object that reacts to viewer's cursor
JavaScript
232
star
13

shuffle-images

The Simplest Way to shuffle through images in a Creative Way
JavaScript
212
star
14

tip_cards

Create a card layout that let your user flip through it like you see on Google Tips
JavaScript
211
star
15

zepto-onepage-scroll

Zepto One Page Scroll is the javascript version of the infamous jQuery One Page Scroll.
JavaScript
186
star
16

adaptive-modal

Create modal windows that can be morphed from anything
JavaScript
168
star
17

fancy-scroll

Add Overflow Scroll Effect like on iOS/Android but for your website
HTML
157
star
18

immersive-slider

Create an immersive slider that changes the whole container to match the viewing slide
JavaScript
138
star
19

square_menu

Create a Square-like Menu Animation for Website using jQuery and CSS3
CSS
124
star
20

fly_sidemenu

Recreate an Airbnb iOS7 App Menu Animation using CSS3 and jQuery
CSS
113
star
21

flipout_cards

Create a Dynamic Multi Level Flip Out Cards
CSS
110
star
22

fullpage-menu

Create a Full Page, Fully CSS3 Animated Menu for your Navigation with Full Page Menu
CSS
106
star
23

jumpto

A plugin that let you create a smooth jump to sub navigational menu in one JS call
JavaScript
105
star
24

zoom-scroller

Create a Subtle Zoom Animation on Images while Scrolling
JavaScript
99
star
25

let_it_snow

Create and Control a Festive Snow on Your Website using HTML5 Canvas
JavaScript
92
star
26

endpage-box

A plugin that let you add an end page box that will display when scrolled to the bottom.
HTML
86
star
27

flipping_gallery

Create a simple but beautiful 3D flipping gallery with on JS call
JavaScript
79
star
28

subscribe-better

Create a better, highly customizable subscription modal or newsletter signup window with jQuery Subscribe Better
CSS
74
star
29

planetarium

Construct an Interactive Planet and Build the Universe on your website
JavaScript
58
star
30

flipping_text

Create a ticking text intro animation for your typography.
JavaScript
55
star
31

fullpagenav

Create a fully responsive and dynamic full page navigation with one JS call
JavaScript
35
star
32

parallax-scroller

Scroll through lists with a smooth parallax effect
JavaScript
27
star
33

flatline_icon_free

180+ high quality & minimal icons webfont for Bootstrap Framework
26
star
34

endpage_next

Navigate without moving your mouse. Pull to refresh/Hold to go next functionality on the web,
JavaScript
12
star