I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library : jPanelMenu Here is my redered html: ``` Overview Usage Inner-Workings Animation Options API Tips & Examples About $(document).ready(function () { var jPM = $.jPanelMenu(); jPM.on(); }); ``` All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong? Thanks! EDIT: Here is updated code with solution from dbaseman…

You need to add a "trigger" element to enable the menu (it looks for `.menu-trigger` by default): ``` Click me to trigger ``` (Also, apparently it expects the menu element to be hidden initially, so use ` `.) Demo

How do i use jPanelMenu? (jquery menu plugin)

javascript, jquery

Solution

You need to add a "trigger" element to enable the menu (it looks for `.menu-trigger` by default):

<div class="menu-trigger">Click me to trigger</div>

(Also, apparently it expects the menu element to be hidden initially, so use `<ul style="display: none;" ...>`.)

Demo

Problem

I'm no javascript ninja, but i'd like to incorporate this library in a site targeting tablets. Here is the library : jPanelMenu Here is my redered html: ``` <script src="/Scripts/jquery-1.7.1.js"></script> <script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script> <header class="main"> <ul id="menu"> <li><a href="/">Overview</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#inner-workings">Inner-Workings</a></li> <li><a href="#animation">Animation</a></li> <li><a href="#options">Options</a></li> <li><a href="#api">API</a></li> <li><a href="#tips">Tips & Examples</a></li> <li><a href="#about">About</a></li> </ul> </header> <script type="text/javascript"> $(document).ready(function () { var jPM = $.jPanelMenu(); jPM.on(); }); </script> <body> ``` All i see in the browser is a normal UL bulleted list. No Js errors in chromes dev tools. Anyone ever use this plugin or know what im doing wrong? Thanks! EDIT: Here is updated code with solution from dbaseman ``` <html> <script src="/Scripts/jquery-1.7.1.js"></script> <script src="/Scripts/jPanelMenu-1.0.0.min.js" type="text/javascript"></script> <header class="main"> <div class="menu-trigger">Click Me</div> <ul id="menu" style="display: none;"> <li><a href="/">Overview</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#inner-workings">Inner-Workings</a></li> <li><a href="#animation">Animation</a></li> <li><a href="#options">Options</a></li> <li><a href="#api">API</a></li> <li><a href="#tips">Tips & Examples</a></li> <li><a href="#about">About</a></li> </ul> </header> <script type="text/javascript"> $(document).ready(function () { var jPM = $.jPanelMenu(); jPM.on(); }); </script> <body> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index.Tablet</title> </head> <body> <div> tablet home </div> </body> </html> </body> </html> ```

Original source