Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
Marco van Ree committed Oct 23, 2013
1 parent 485258c commit fcdbed0
Show file tree
Hide file tree
Showing 51 changed files with 8,020 additions and 0 deletions.
364 changes: 364 additions & 0 deletions demo/advanced.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,364 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<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 - Examples</title>

<link type="text/css" rel="stylesheet" href="demo.css" />
<link type="text/css" rel="stylesheet" href="../source/jquery.mmenu.all.css" />
<style type="text/css">
.mm-menu li.img a
{
font-size: 16px;
}
.mm-menu li.img a img
{
float: left;
margin: -5px 10px -5px 0;
}
.mm-menu li.img a small
{
font-size: 12px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="../source/jquery.mmenu.min.all.js"></script>
<script type="text/javascript">

// The menu on the left
$(function() {
$('nav#menu-left').mmenu();
});


// The menu on the right
$(function() {

var $menu = $('nav#menu-right');

$menu.mmenu({
position : 'right',
classes : 'mm-light',
counters : true,
searchfield : true,
header : {
add : true,
update : true,
title : 'Contacts'
}
});

// Click a menu-item
var $confirm = $('#confirmation');
$menu.find( 'li a' ).not( '.mm-subopen' ).not( '.mm-subclose' ).bind(
'click.example',
function( e )
{
e.preventDefault();
$confirm.show().text( 'You clicked "' + $.trim( $(this).text() ) + '"' );
$('#menu-right').trigger( 'close' );
}
);
});
</script>
</head>
<body>
<div id="page">
<div id="header">
<a href="#menu-left"></a>
This is a demo page
<a href="#menu-right" class="friends right"></a>
</div>
<div id="content">
<p id="confirmation"></p>
<h4>Sliding menus for your website</h4>
<p>Create an unlimited amount of app look-alike sliding menus, all with an unlimited amount of submenus.</p>
<h4>Try it!</h4>
<p>Click the menu-button in the header to open the menu on the left. Or click the contacts-button in the header to open a second menu on the right.</p>
<h4>Search</h4>
<p>The right menu has a search field prepended to it, so go ahead and try typing something in the search fields.</p>
</div>
<nav id="menu-left">
<ul>
<li><a href="index.html">Introduction</a></li>
<li><a href="horizontal-submenus.html">Horizontal submenus example</a></li>
<li><a href="vertical-submenus.html">Vertical submenus example</a></li>
<li><a href="photos.html">Photos in sliding panels</a></li>
<li><a href="positions.html">Positioning the menu</a></li>
<li><a href="colors.html">Coloring the menu</a></li>
<li class="Selected"><a href="advanced.html">Advanced example</a></li>
<li><a href="onepage.html">One page scrolling example</a></li>
<li><a href="jqmobile/index.html">jQuery Mobile example</a></li>
</ul>
</nav>
<nav id="menu-right">
<ul>
<li>
<span>Friends</span>
<ul>
<li class="Label">A</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/1/" />
Alexa<br />
<small>Johnson</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/2/" />
Alexander<br />
<small>Brown</small>
</a>
</li>

<li class="Label">F</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/3/" />
Fred<br />
<small>Smith</small>
</a>
</li>

<li class="Label">J</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/4/" />
James<br />
<small>Miller</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/5/" />
Jefferson<br />
<small>Jackson</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/6/" />
Jordan<br />
<small>Lee</small>
</a>
</li>

<li class="Label">K</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/7/" />
Kim<br />
<small>Adams</small>
</a>
</li>

<li class="Label">M</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/8/" />
Meagan<br />
<small>Miller</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/9/" />
Melissa<br />
<small>Johnson</small>
</a>
</li>

<li class="Label">N</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/10/" />
Nicole<br />
<small>Smith</small>
</a>
</li>

<li class="Label">S</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/1/" />
Samantha<br />
<small>Harris</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/2/" />
Scott<br />
<small>Thompson</small>
</a>
</li>
</ul>
</li>

<li>
<span>Family</span>
<ul>
<li class="Label">A</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/3/" />
Adam<br />
<small>White</small>
</a>
</li>

<li class="Label">B</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/4/" />
Ben<br />
<small>Robinson</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/5/" />
Bruce<br />
<small>Lee</small>
</a>
</li>

<li class="Label">E</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/6/" />
Eddie<br />
<small>Williams</small>
</a>
</li>

<li class="Label">J</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/7/" />
Jack<br />
<small>Johnson</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/8/" />
John<br />
<small>Jackman</small>
</a>
</li>

<li class="Label">M</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/9/" />
Martina<br />
<small>Thompson</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/10/" />
Matthew<br />
<small>Watson</small>
</a>
</li>

<li class="Label">O</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/1/" />
Olivia<br />
<small>Taylor</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/2/" />
Owen<br />
<small>Wilson</small>
</a>
</li>
</ul>
</li>

<li>
<span>Work colleagues</span>
<ul>
<li class="Label">D</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/3/" />
David<br />
<small>Harris</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/4/" />
Dennis<br />
<small>King</small>
</a>
</li>

<li class="Label">E</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/5/" />
Eliza<br />
<small>Walker</small>
</a>
</li>

<li class="Label">L</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/6/" />
Larry<br />
<small>Turner</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/7/" />
Lisa<br />
<small>Wilson</small>
</a>
</li>

<li class="Label">M</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/8/" />
Michael<br />
<small>Jordan</small>
</a>
</li>

<li class="Label">R</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/9/" />
Rachelle<br />
<small>Cooper</small>
</a>
</li>
<li class="img">
<a href="#">
<img src="http://lorempixel.com/50/50/people/10/" />
Rick<br />
<small>James</small>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Loading

0 comments on commit fcdbed0

Please sign in to comment.