jPanelMenu

Setting It Up

First, get jPanelMenu and jRespond!

For detailed documentation on jRespond, please visit the jRespond Github page. I won’t go very in-depth on the ins and outs of jRespond here, but I will at least cover enough to get started using it in conjunction with jPanelMenu.

Note: The following example is pulled directly from this page. Resize your browser window and you’ll see the example outlined below in action.

Start off by setting up jPanelMenu, referring to the documentation for specifics on options and API functions.

var jPM = $.jPanelMenu({
    menu: '#menu-selector'
});

Once jPanelMenu is ready to go, set up jRespond. Refer to the jRespond documentation for detailed instructions on this step. All it takes is an array of objects — each object specifies breakpoint names and sizes (enter and exit widths, in pixels).

var jRes = jRespond([
    {
        label: 'small',
        enter: 0,
        exit: 800
    },{
        label: 'large',
        enter: 800,
        exit: 10000
    }
]);

Note: This is a very simple setup with only two breakpoints, small and large.

Adding Functionality

After your breakpoints have been registered with jRespond, you need to add some functionality hooks to those breakpoints.

This is done by calling addFunc() (on the saved jRespond instance), and passing in an object containing the following: the breakpoint (by name) that these actions apply to, a function to call upon entering that breakpoint, and a function to call when exiting that breakpoint.

In this example (this page), we want to turn jPanelMenu on, by calling jPM.on(), when entering the ‘small’ breakpoint (< 800 pixels), and turn it off, by calling jPM.off(), when exiting the ‘small’ breakpoint (> 800 pixels).

jRes.addFunc({
    breakpoint: 'small',
    enter: function() {
        jPM.on();
    },
    exit: function() {
        jPM.off();
    }
});

That’s it! Enjoy your awesomely responsive navigation!

Who Made This Wonderful Little Plugin?

jPanelMenu was created, and is maintained, by Anthony Colangelo.

You can find him (@acolangelo) on Twitter and Github.