Skip to content
aka, circular menu, wheel menu, circular navigation, wheel navigation
Branch: master
Clone or download
Latest commit 4469e16 Nov 18, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
dist
examples
sass
src
.gitignore
README.md
config.rb
index.js
package.json

README.md

Circular-Menu

aka, circular menu, wheel menu, circular navigation, wheel navigation.

##Thanks for Circular Navigation With CSS Transforms by Sara Soueidan

install

```npm install circular-menu```

usage

Directly include dist/js/circular-menu.js and dist/css/circular-menu.css
It is wrapped as AMD module, meaning could use with RequireJS or commonJS, or just global varible "CMenu" 

Sample

sample menus

Live Demo

jsfiddle Demo

Browser compatibility

I tested in newer chrome, firefox, and IE Edge.

Config

Options

  • totalAngle (demo):

    • value: 0-360 (unit is unnecessary)
    • default: 360deg (complete circle)
  • spaceDeg (demo):

    • value: Int (0-5 is suitable)
    • default: 0 (The default is good)
  • background:

    • value: Acceptable CSS color value
    • default: #323232
  • backgroundHover:

    • value: Acceptable CSS color value
    • default: #515151
  • pageBackground (For antialiasing, example explanation):

    • value: Acceptable CSS color value ( You should pass the color of your page. )
    • default: transparent
  • diameter(circular menu radius):

    • value: Int (unit is unnecessary)
    • default: 300px
  • position(demo):

    • value: "top" | "left" | "right" | "bottom"
    • default: "top"
  • start(demo):

    • value: 0-360 (unit is unnecessary)
    • default: 0 deg
  • horizontal (Whether horizontal icon and text demo):

    • value: true | false
    • default: true
  • hideAfterClick (Whether hide menu after click):

    • value: true | false
    • default: true
  • menus: (Array of objects, specifying menu items, angle of each item mush < 90deg, it meaning "totalAngle / items number" must <= 90deg wrong use demo )

    • title: String (Title is not too long, otherwise it will overflow container)
    • icon: String (css class, e.g. "fa fa-facebook" "custom-icon icon1")
    • href:
      • String (like "http://google.com" or "#hash")
      • Object (like {url: "..", blank: true} )
        • url: String
        • blank: true | false (True will open a new browser tab)
    • click: Function (click callback function)
    • disabled:
      • String: true | false
      • Function: (Function must return boolean value)

Method

  • styles(properties): add styles to menus

    • properties: Acceptable css properties object ( like { "background-color": "#ffe", "border-left": "5px solid #ccc" })
  • show ([left, top]):show menus

    • [left, top] : Optional, set menu fixed position left and top, (like menus.show([e.pageX, e.pageY]), unit is unnecessary)
  • hide(): hide menus

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.