<!DOCTYPE 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="css/jquery.mmenu.css" />
<link type="text/css" rel="stylesheet" href="../dist/css/addons/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="js/hammer.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="../dist/js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="../dist/js/addons/jquery.mmenu.dragopen.min.js"></script>
<script type="text/javascript" src="../dist/js/addons/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>
jQuery.mmenu侧滑菜单· （205个子文件） 
jquery.mmenu.all.css 43KB jquery.mmenu.all.css 43KB site.css 43KB jquery.mmenu.css 9KB jquery.mmenu.css 9KB jquery.mmenu.effects.css 9KB jquery.mmenu.effects.css 9KB jquery.mmenu.oncanvas.css 8KB jquery.mmenu.oncanvas.css 8KB jquery.mmenu.themes.css 6KB jquery.mmenu.themes.css 6KB jquery.mmenu.navbars.css 3KB jquery.mmenu.navbars.css 3KB jquery.mmenu.positioning.css 3KB jquery.mmenu.positioning.css 3KB jquery.mmenu.toggles.css 2KB jquery.mmenu.toggles.css 2KB jquery.mmenu.tileview.css 2KB jquery.mmenu.tileview.css 2KB jquery.mmenu.fullscreen.css 2KB jquery.mmenu.fullscreen.css 2KB jquery.mmenu.offcanvas.css 2KB jquery.mmenu.offcanvas.css 2KB jquery.mmenu.iconpanels.css 2KB jquery.mmenu.iconpanels.css 2KB demo.css 1KB jquery.mmenu.searchfield.css 1KB jquery.mmenu.searchfield.css 1KB jquery.mmenu.leftsubpanel.css 1KB jquery.mmenu.leftsubpanel.css 1KB jquery.mmenu.widescreen.css 1015B jquery.mmenu.widescreen.css 1015B jquery.mmenu.dividers.css 968B jquery.mmenu.dividers.css 968B jquery.mmenu.sectionindexer.css 925B jquery.mmenu.sectionindexer.css 925B jquery.mmenu.counters.css 686B jquery.mmenu.counters.css 686B jquery.mmenu.pageshadow.css 468B jquery.mmenu.pageshadow.css 468B jquery.mmenu.iconbar.css 451B jquery.mmenu.iconbar.css 451B jquery.mmenu.dragopen.css 398B jquery.mmenu.dragopen.css 398B jquery.mmenu.autoheight.css 344B jquery.mmenu.autoheight.css 344B jquery.mmenu.multiline.css 323B jquery.mmenu.multiline.css 323B jquery.mmenu.borderstyle.css 270B jquery.mmenu.borderstyle.css 270B jquery.mmenu.panelshadow.css 182B jquery.mmenu.panelshadow.css 182B
onepage.html 3KB advanced.html 2KB default.html 2KB jquery.js 123KB jquery.mmenu.umd.all.js 35KB jquery.mmenu.min.all.js 35KB jquery.mmenu.min.all.js 35KB jquery.mmenu.oncanvas.js 18KB jquery.mmenu.oncanvas.js 18KB jquery.mmenu.umd.js 14KB jquery.mmenu.min.js 14KB jquery.mmenu.min.js 14KB hammer.min.js 10KB jquery.mmenu.oncanvas.umd.js 10KB jquery.mmenu.oncanvas.min.js 10KB jquery.mmenu.oncanvas.min.js 10KB jquery.mmenu.debugger.js 10KB jquery.mmenu.debugger.js 10KB jquery.mmenu.searchfield.js 8KB jquery.mmenu.searchfield.js 8KB jquery.mmenu.offcanvas.js 8KB jquery.mmenu.offcanvas.js 8KB jquery.mmenu.dragopen.js 6KB jquery.mmenu.dragopen.js 6KB jquery.mmenu.navbars.umd.js 5KB jquery.mmenu.navbars.min.js 5KB jquery.mmenu.navbars.min.js 5KB jquery.mmenu.dividers.js 5KB jquery.mmenu.dividers.js 5KB jquery.mmenu.offcanvas.umd.js 5KB jquery.mmenu.offcanvas.min.js 4KB jquery.mmenu.offcanvas.min.js 4KB jquery.mmenu.sectionindexer.js 4KB jquery.mmenu.sectionindexer.js 4KB jquery.mmenu.searchfield.umd.js 4KB jquery.mmenu.searchfield.min.js 3KB jquery.mmenu.searchfield.min.js 3KB jquery.mmenu.navbars.js 3KB jquery.mmenu.navbars.js 3KB jquery.mmenu.dragopen.umd.js 3KB jquery.mmenu.dividers.umd.js 3KB jquery.mmenu.dragopen.min.js 2KB jquery.mmenu.dragopen.min.js 2KB jquery.mmenu.counters.js 2KB jquery.mmenu.counters.js 2KB jquery.mmenu.sectionindexer.umd.js 2KB jquery.mmenu.iconpanels.js 2KB jquery.mmenu.iconpanels.js 2KB共 205 条
- 1
- 2
- 3
资源评论
xhmmbb1984
- 粉丝: 0
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
