jquery-mobile-menu-plugin
Version:
The best jQuery plugin for app look-alike on- and off-canvas menus with sliding submenus for your website and webapp.
143 lines (131 loc) • 3.58 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<title>jQuery.mmenu demo</title>
<link type="text/css" rel="stylesheet" href="css/demo.css" />
<link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.css" />
<link type="text/css" rel="stylesheet" href="../dist/addons/dragopen/jquery.mmenu.dragopen.css" />
<!-- for the one page layout -->
<style type="text/css">
#intro,
#first,
#second,
#third
{
height: 400px;
}
#intro
{
padding-top: 0;
}
#first,
#second,
#third
{
border-top: 1px solid #ccc;
padding-top: 150px;
}
</style>
<!-- for the fixed header -->
<style type="text/css">
.header,
.footer
{
box-sizing: border-box;
width: 100%;
position: fixed;
}
.header
{
top: 0;
}
.footer
{
bottom: 0;
}
</style>
<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="../dist/addons/dragopen/jquery.mmenu.dragopen.min.js"></script>
<script type="text/javascript" src="../dist/addons/fixedelements/jquery.mmenu.fixedelements.min.js"></script>
<script type="text/javascript">
$(function() {
var $menu = $('nav#menu'),
$html = $('html, body');
$menu.mmenu({
dragOpen: true
});
var $anchor = false;
$menu.find( 'li > a' ).on(
'click',
function( e )
{
$anchor = $(this);
}
);
var api = $menu.data( 'mmenu' );
api.bind( 'closed',
function()
{
if ( $anchor )
{
var href = $anchor.attr( 'href' );
$anchor = false;
// if the clicked link is linked to an anchor, scroll the page to that anchor
if ( href.slice( 0, 1 ) == '#' )
{
$html.animate({
scrollTop: $( href ).offset().top
});
}
}
}
);
});
</script>
</head>
<body>
<div id="page">
<div class="header Fixed">
<a href="#menu"></a>
Demo
</div>
<div class="content" id="content">
<div id="intro">
<p><strong>This is a demo.</strong><br />
Click the menu icon to open the menu.</p>
<p>The links in the menu link to a section on the same page, some small javascript makes the page scroll smoothly.</p>
</div>
<div id="first">
<p><strong>This is the first section.</strong><br />
Notice how the fixed header and footer slide out along with the page.</p>
<p><a href="#menu">Open the menu.</a></p>
</div>
<div id="second">
<p><strong>This is the second section.</strong><br />
You can also drag the page to the right to open the menu.</p>
<p><a href="#menu">Open the menu.</a></p>
</div>
<div id="third">
<p><strong>This is the third section.</strong><br />
<a href="#menu">Open the menu.</a></p>
</div>
</div>
<div class="footer Fixed">
Fixed footer :-)
</div>
<nav id="menu">
<ul>
<li><a href="#content">Introduction</a></li>
<li><a href="#first">First section</a></li>
<li><a href="#second">Second section</a></li>
<li><a href="#third">Third section</a></li>
</ul>
</nav>
</div>
</body>
</html>