Skip to content

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

Notifications You must be signed in to change notification settings

yandongCoder/circular-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

70 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published