jPanelMenu: Slick Navigation-Sidebar With CSS Animations And jQuery
jPanelMenu is only a few days old, but you already know the operating principle from your favorite smartphone or tablet using Android or iOS. Most likely you will use either the Facebook or the Google+ app, which both implement an off-canvas slide-in navigation. A small list icon in the upper left corner symbolizes the availability of a navigational menu at a tap of your finger. It is exactly this principle jPanelMenu transports into your webdesigns.
jPanelMenu: Perfect For Responsive Designs
His latest achievement is the jQuery plugin jPanelMenu, which looks as familiar as it is to every digital nomad out there. jPanelMenu delivers a sidebar navigation resembling that of the apps for Facebook and Google + as closely as you can imagine. What distinguishes it from the native app counterparts is its use of web technologies. As such it is the perfect choice for your next responsive web app.
Colangelo wanted it to perfect, thus even implementing the sliding animation the native apps incorporate. He did that by the use of CSS transitions with a fallback to jQuery animations in older browsers. In itself perfectly suited for responsive designs Colangelo recommends to combine it with the jQuery plugin jRespond and delivers an example as to how to do this. jRespond is especially useful to have jPanelMenu turned on or off depending on the break points reached.
This way you know how to react with CSS. All jPanelMenu-specific styles will be descendants of .jPanelMenu, thus only showing their magic when the class exists. Colangelo shows you how to do this, too.
The whole project is thoroughly and comprehensibly documented and elegantly presented. jPanelMenu is up to the mark of today’s development standards. You should definitely give it a try.