jPanelMenu

Using jRespond with jPanelMenu

Responsive design is an amazing revolution in our industry. It’s changing every part of our process — definition, planning, design, development, and beyond. But, as we all know, design is only one part of the equation.

Responsive behavior is a big thing that no one is talking about, but everyone needs to be. I’ve tried a few different things to accomplish this, but the best thing I’ve found is jRespond.

jRespond is “a simple way to globally manage JavaScript on responsive websites.” It’s really straightforward to use, and it makes a world of difference in your JavaScript on responsive sites.

jPanelMenu and jRespond are the perfect couple. Many people want the functionality that jPanelMenu provides, but only at smaller sizes (this page, for example). jRespond is there to help accomplish that task, and it couldn’t be easier to do.

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, a developer at Happy Cog.

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

Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?

Talk to me on Twitter, where I am @acolangelo, or send me a message, and let’s talk!.