Current state
This commit is contained in:
62
public/legacy/js/mmenu/demo/advanced.html
Normal file
62
public/legacy/js/mmenu/demo/advanced.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<!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="../dist/css/jquery.mmenu.all.css" />
|
||||
|
||||
<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.all.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('nav#menu').mmenu({
|
||||
extensions : [ 'effect-slide', 'pageshadow' ],
|
||||
header : true,
|
||||
searchfield : true,
|
||||
counters : true,
|
||||
footer : {
|
||||
add : true,
|
||||
content : '<a href="mmenu.frebsite.nl">Visit website ›</a>'
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div class="header">
|
||||
<a href="#menu"></a>
|
||||
Demo
|
||||
</div>
|
||||
<div class="content">
|
||||
<p><strong>This is an advanced demo.</strong><br />
|
||||
Click the menu icon to open the menu.</p>
|
||||
<p>For more demos, a tutorial, documentation and support, please visit <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#about">About us</a>
|
||||
<ul>
|
||||
<li><a href="#about/history">History</a></li>
|
||||
<li><a href="#about/team">The team</a>
|
||||
<ul>
|
||||
<li><a href="#about/team/management">Management</a></li>
|
||||
<li><a href="#about/team/sales">Sales</a></li>
|
||||
<li><a href="#about/team/development">Development</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#about/address">Our address</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
98
public/legacy/js/mmenu/demo/css/demo.css
Normal file
98
public/legacy/js/mmenu/demo/css/demo.css
Normal file
@@ -0,0 +1,98 @@
|
||||
html, body
|
||||
{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
body
|
||||
{
|
||||
background-color: #fff;
|
||||
font-family: Arial, Helvetica, Verdana;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #666;
|
||||
position: relative;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
body *
|
||||
{
|
||||
text-shadow: none;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6
|
||||
{
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
margin: 20px 0 10px 0;
|
||||
}
|
||||
h1, h2, h3
|
||||
{
|
||||
font-size: 18px;
|
||||
}
|
||||
h4, h5, h6
|
||||
{
|
||||
font-size: 16px;
|
||||
}
|
||||
p
|
||||
{
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
a, a:link, a:active, a:visited, a:hover
|
||||
{
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav:not(.mm-menu)
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header,
|
||||
.content,
|
||||
.footer
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
.header,
|
||||
.footer
|
||||
{
|
||||
background: #777;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
line-height: 40px;
|
||||
|
||||
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
.header.fixed
|
||||
{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.footer.fixed
|
||||
{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.header a
|
||||
{
|
||||
background: center center no-repeat transparent;
|
||||
background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
|
||||
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
}
|
||||
.content
|
||||
{
|
||||
padding: 150px 50px 50px 50px;
|
||||
}
|
||||
65
public/legacy/js/mmenu/demo/css/site.css
Normal file
65
public/legacy/js/mmenu/demo/css/site.css
Normal file
File diff suppressed because one or more lines are too long
53
public/legacy/js/mmenu/demo/default.html
Normal file
53
public/legacy/js/mmenu/demo/default.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<!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="../dist/css/jquery.mmenu.all.css" />
|
||||
|
||||
<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.all.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('nav#menu').mmenu();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div class="header">
|
||||
<a href="#menu"></a>
|
||||
Demo
|
||||
</div>
|
||||
<div class="content">
|
||||
<p><strong>This is a demo.</strong><br />
|
||||
Click the menu icon to open the menu.</p>
|
||||
<p>For more demos, a tutorial, documentation and support, please visit <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#about">About us</a>
|
||||
<ul>
|
||||
<li><a href="#about/history">History</a></li>
|
||||
<li><a href="#about/team">The team</a>
|
||||
<ul>
|
||||
<li><a href="#about/team/management">Management</a></li>
|
||||
<li><a href="#about/team/sales">Sales</a></li>
|
||||
<li><a href="#about/team/development">Development</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#about/address">Our address</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
143
public/legacy/js/mmenu/demo/onepage.html
Normal file
143
public/legacy/js/mmenu/demo/onepage.html
Normal file
@@ -0,0 +1,143 @@
|
||||
<!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="../dist/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="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/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>
|
||||
Reference in New Issue
Block a user