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>
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;" ...>
.)
You need to change trigger to anchor tag
<a class="menu-trigger" href="#menu">Click Me</div>
You can see it in the Jpanelmenu webpage source.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.