JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Radial Menu

    A highly customizable radial menu that's very easy to setup.
    Filed under  › 

    • 🔾29%Overall
    • 336
    • 1.5 days
    • 🕩10
    • 👥1

    Radial Menu

    A highly customizable radial menu that's very easy to setup.

    screenshot

    See it live here
    Alternative link

    About

    A radial menu, also known as pie menu, is a circular context menu where selection depends on direction. It is a graphical control element. [wikipedia]

    Create a customized and beautiful radial menu for your web app that can be used as a standalone menu or override the default context menu. On a desktop or notebook click the second button of the mouse (context menu). On a smartphone or tablet, click the screen and hold for few seconds and the menu will pop.

    Work in progress. Writing the documentation and doing some tests.

    Feel free to commit new styles and share them with the public.

    Documentation

    Let's create a new radial button so you can see how simple it is. You'll need to add the RadialMenu.js to your web app and then create a new menu. Let's look at the code:

    <script src="RadialMenu.js"></script>
    
    <script>
    const radial = new RadialMenu();
    </script>
    

    That's it. The library has some default buttons included as example so you can see how it works. Let's continue reading the documentation so we can learn how to create our very own radial menu with our very own buttons.

    To create a Radial Menu in your web app you'll need to pass a configuration object to the constructor. By default a lot of values are already setted, but you can fiddle with every single one of them. Let's talk about each one.

    const mySettings = {
        textColor: 'red', //define the color of the text on the buttons
        buttons: [
            {'text': '\uf053', 'action': ()=>{ history.go(-1) } }, //create a button that goes back on history
            {'text': '\uf054', 'action': ()=>{ history.go(1) } }, //create a button tha goes forward on history
        ]
    };
    
    const radial = new RadialMenu(mySettings);
    

    fontFamily : String
    Name of the font to be used. On this example 'FontAwesome' is being used for the free icons. But you can use your own font.
    Default: 'FontAwesome'

    fontSize : Int
    Size of the icons (text) used on the buttons.
    Default: 14

    innerCircle : Int
    Inner circle of the radial menu. Use 0 (zero) if you don't want a hole in the menu.
    Default: 50

    outerCircle : Int
    Outer circle of the radial menu. The outer circle and the inner circle will defined how thick is the menu.
    Default: 100

    innerCircle = 0, outerCircle = 100
    fullCircle

    innerCircle = 50, outerCircle = 100
    perfuratedCircle

    rotation : Int
    This value rotate the whole "circle" of the menu, if you want to better "align" the button's divison. This value is in radians and always rotate the menu clock wise. Default: PI/2 (90º)

    Not rotated
    default

    Rotated
    rotated

    shadowBlur : Int
    How blurred is the shadow.
    Default: 10

    shadowColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    Shadow color.
    Default: rgba(0,0,0,0.2) black with alpha

    shadowOffsetX : Int
    Horizontal displacement of the shadow.
    Default: 3

    shadowOffsetY : Int
    Vertical displacement of the shadow.
    Default: 3

    You can edit every single button individually, or you can set values for all of them at once.

    backgroundColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    The background color of the button.
    Default: #EEE gray

    borderColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    The border color of the button.
    Default: #FFF white

    textColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    Color of the text inside the button.
    Default: #000 black

    textBorderColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    Color of the contour of the text inside the button.
    Default: 'transparent'

    textShadowColor : Color (rgb, rgba, hex) or Gradient Object (read more below)
    Color of the shadow of the text.
    Default: 'transparent'

    textShadowBlur : Int
    How blurred is the shadow of the text.
    Default: 0

    textShadowOffsetX : Int
    Horizontal displacement of the shadow of the text.
    Default: 0

    textShadowOffsetY : Int
    Vertical displacement of the shadow of the text.
    Default: 0

    posX : Int
    Horizontal position of the menu. This value is used only when the menu is fixed on the page.
    Default: 0

    posY : Int
    Vertical position of the menu. This value is used only when the menu is fixed on the page.
    Default: 0

    isFixed : Boolean
    This value determine if the menu will be fixed on the page. This is usefull in case you're making a web app that needs a menu that is always visible.
    Default: False

    zIndex : Int
    This value determine the order the menu will be displayed on the page. Higher values means that it is in front of elements with lower values.
    Default: 9999

    buttons : Array (of buttons object)
    You should pass an array with button objects. A button object is a simple object with only two attributes: text and action.

    text is the icon that will be displayed. see the font-visualizer.html for the unicode of each icon '\uf000'

    action is a function that will be called when the button is clicked.

    Besides that, you can pass all those above metioned settings inside the button object, but this way, the settings will only apply to that particular button. Take a look on the example below. One button will have the default color (black) and the other one will have a red color for the text.

    const ok  = function(){
        alert('ok');
    }
    
    const nok = function(){
        alert('not ok');
    }
    
    const myButtons = [
        {text: '\uf00c', action: ok},
        {text: '\uf001', action: nok, textColor: 'red'} //you can set values for the button individually
    ];
    
    const radial = new RadialMenu({buttons: myButtons});
    

    Gradient Object Every color setting could be a gradient. In order to create a gradient, you need to pass a generic object with a gradient type and some colors. Let's take a look at the example below:

    const gradient = {gradient: 'radial', colors: {0: 'black', 1: 'white'} };
    
    const menu = new RadialMenu({backgroundColor: gradient})
    

    The index keys inside 'colors' will define where the color start and where it ends. 0 is the start, 1 is the end and everything in between is a step. You can add as many colors as you like, respecting these steps. Let's see how we add more colors on the example below:

    const gradient = {gradient: 'radial', colors: {0: 'red', 0.25: 'green', 0.5: 'yellow', 0.75: 'blue', 1: 'orange'} };
    
    const menu = new RadialMenu({backgroundColor: gradient})
    

    That means that the gradient will start with red, 25% along the way it will change to green, 50% after it will become yellow, 75% blue and eventually it will end as orange. The steps indicates where the color change will happen (in percentage).

    The gradient object can have one of this values: radial, linear1, linear2, linear3 and linear4. Let's look at them.

    radial - from inside to outside
    rotated

    linear1 - top to bottom
    linear1

    linear2 - left to right
    linear2

    linear3 - top left to bottom right
    linear3

    linear4 - bottom left to top right
    linear4

    If you want a gradient from black to white set 0 as black and 1 as white, if you want a white to black gradient, invert the colors: set 0 to white and 1 to black.

    You can check out you some styles I've created as examples here

    Methods

    The RadialMenu class also offers some auxiliary methods so you can use the menu as a stand alone menu (like a joypad for a web game).

    show() Show the menu.

    hide() Hide the menu.

    setPos(x : int, y : int) Set the X and Y position of the menu.

    addButtons(buttons : array of Buttons) Useful if you want to load the style from a json file and add the buttons later on. Example below:

    
    const load = async function(){
        const request = await fetch('styles/orange.json');
        const data = await request.json();
    
        const menu = new RadialMenu(data);
        menu.addButtons([
            {text: '\uf000', action: ()=>{ /*your code here*/ } },
            {text: '\uf001', action: ()=>{ /*your code here*/ } },
        ]);
    }
    
    load();
    

    Buy me a coffee

    Donations

    Show All