Permalink
Browse files

2.0.8

  • Loading branch information...
Chris Wharton
Chris Wharton committed Oct 31, 2014
1 parent d5f28f8 commit 01b39caad482a8d13612193e6a9fd3d27745eff1
Showing with 302 additions and 5 deletions.
  1. +155 −0 README.html
  2. +4 −0 README.md
  3. +8 −1 demo.html
  4. +10 −3 jquery.meanmenu.js
  5. +1 −1 jquery.meanmenu.min.js
  6. +124 −0 next.html
View
@@ -0,0 +1,155 @@
<h1>MeanMenu v2.0.6</h1>
<h2>Looking for a WordPress version?</h2>
<p>Our friends over at PluginHero have just released the <a href="http://pluginhero.com/portfolio/meanmenu/">WordPress version of MeanMenu</a>.</p>
<p>A menu system for converting a standard menu into a mobile/tablet responsive menu, media query independent.</p>
<p><strong>Please note: This is not a menu system replacement. It is simply a lightweight piece of jQuery to convert a standard navigation into a mobile/tablet navigation.</strong></p>
<p><strong>If you are looking for drop down functionality on the desktop, MeanMenu doesn&rsquo;t do it. Use <a title="Superfish Drop down menus" href="http://plugins.jquery.com/superfish/">Superfish</a> as well as MeanMenu. You can see Superfish + MeanMenu on all of our themes, for example <a title="Literary Theme" href="http://www.meanthemes.com/theme/literary/">Literary</a>.</strong></p>
<p>And yes, it works with jQuery 2.0 - obviously IE 7 &amp; 8 will not work.</p>
<p>Live Demo:
<a href="http://www.meanthemes.com/demo/meanmenu/demo.html">http://www.meanthemes.com/demo/meanmenu/demo.html</a></p>
<p>Just include the jQuery library (http://jquery.com)</p>
<p>Then this file (jquery.meanmenu.js)</p>
<p>in your HTML e.g.</p>
<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"&gt;&lt;/script&gt;
&lt;script src="assets/js/plugins/jquery.meanmenu.js"&gt;&lt;/script&gt;
</code></pre>
<p>Then add the CSS for this after all of your other CSS in the &lt;head&gt; section.</p>
<pre><code>&lt;link rel="stylesheet" href="meanmenu.css" media="all" /&gt;
</code></pre>
<p>Then in your usual document.ready, this is working under the assumption your navigation is in <header><nav> structure&hellip;</p>
<pre><code>jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
</code></pre>
<p>There are the following options (Options are shown with their defaults)&hellip;</p>
<p>meanMenuContainer: &lsquo;body&rsquo;</p>
<ul>
<li>Choose where meanmenu will be placed within the HTML</li>
</ul>
<p>meanMenuClose: &ldquo;X&rdquo;</p>
<ul>
<li>Single character you want to represent the close menu button</li>
</ul>
<p>meanMenuCloseSize: &ldquo;18px&rdquo;</p>
<ul>
<li>Set font size of close button</li>
</ul>
<p>meanMenuOpen: &ldquo;<span /><span /><span />&rdquo;</p>
<ul>
<li>Text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans</li>
</ul>
<p>meanRevealPosition: &ldquo;right&rdquo;</p>
<ul>
<li>Left right or center positions</li>
</ul>
<p>meanRevealPositionDistance: &ldquo;0&rdquo;</p>
<ul>
<li>Tweak the position of the menu</li>
</ul>
<p>meanRevealColour: &ldquo;&rdquo;</p>
<ul>
<li>Override CSS colours for the reveal background</li>
</ul>
<p>meanScreenWidth: &ldquo;480&rdquo;</p>
<ul>
<li>Set the screen width you want meanmenu to kick in at</li>
</ul>
<p>meanNavPush: &ldquo;&rdquo;</p>
<ul>
<li>Set a height here in px, em or % if you want to budge your layout now the navigation is missing.</li>
</ul>
<p>meanShowChildren: true</p>
<ul>
<li>true to show children in the menu, false to hide them</li>
</ul>
<p>meanExpandableChildren: true</p>
<ul>
<li>true to allow expand/collapse children</li>
</ul>
<p>meanExpand: &ldquo;+&rdquo;</p>
<ul>
<li>single character you want to represent the expand for ULs</li>
</ul>
<p>meanContract: &ldquo;-&rdquo;</p>
<ul>
<li>single character you want to represent the contract for ULs</li>
</ul>
<p>meanRemoveAttrs: false
- true to remove classes and IDs, false to keep them</p>
<p>onePage: false</p>
<ul>
<li>set to true for one page sites, the navigation will close back up on itself on click</li>
</ul>
<p>removeElements: &ldquo;&rdquo;</p>
<ul>
<li>enter comma separated values in here of elements you want hidden from the container of meanmenu e.g. if you had a search box called .search, enter &ldquo;.search&rdquo; in here</li>
</ul>
<p>meanDisplay: &ldquo;&rdquo;</p>
<ul>
<li>by default this is block, sometimes you may want to switch this to table or table-cell or inline-block etc. so now you can.</li>
</ul>
View
@@ -100,3 +100,7 @@ onePage: false
removeElements: ""
- enter comma separated values in here of elements you want hidden from the container of meanmenu e.g. if you had a search box called .search, enter ".search" in here
meanDisplay: ""
- by default this is block, sometimes you may want to switch this to table or table-cell or inline-block etc. so now you can.
View
@@ -20,6 +20,12 @@
font-weight: 100;
text-align: center;
}
h2 {
font-size: 18px;
font-weight: 100;
text-align: center;
margin-top: 40px;
}
header nav {
text-align: center;
background: #efefef;
@@ -75,7 +81,7 @@
<header>
<nav>
<ul>
<li><a href="#">Top Level Link</a>
<li><a href="next.html">Top Level Link</a>
<ul>
<li><a href="#">Second Level Link</a>
<ul>
@@ -110,6 +116,7 @@
<section>
<article>
<h1>Resize your browser to under 480 pixels</h1>
<h2><a href="http://www.meanthemes.com/our-themes/">Check out our WordPress &amp; Ghost Themes</a></h2>
</article>
</section>
View
@@ -1,5 +1,5 @@
/*!
* jQuery meanMenu v2.0.7
* jQuery meanMenu v2.0.8
* @Copyright (C) 2012-2014 Chris Wharton @ MeanThemes (https://github.com/meanthemes/meanMenu)
*
*/
@@ -44,6 +44,7 @@
meanContract: "-", // single character you want to represent the contract for ULs
meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them
onePage: false, // set to true for one page sites
meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell
removeElements: "" // set to hide page elements
};
options = $.extend(defaults, options);
@@ -69,6 +70,7 @@
var meanContract = options.meanContract;
var meanRemoveAttrs = options.meanRemoveAttrs;
var onePage = options.onePage;
var meanDisplay = options.meanDisplay;
var removeElements = options.removeElements;
//detect known mobile/tablet usage
@@ -128,7 +130,7 @@
var meanOriginal = function() {
jQuery('.mean-bar,.mean-push').remove();
jQuery(meanContainer).removeClass("mean-container");
jQuery(meanMenu).show();
jQuery(meanMenu).css('display', meanDisplay);
menuOn = false;
meanMenuExist = false;
jQuery(removeElements).removeClass('mean-remove');
@@ -151,7 +153,12 @@
// remove all classes from EVERYTHING inside meanmenu nav
if(meanRemoveAttrs) {
jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function() {
jQuery(this).removeAttr("class");
// First check if this has mean-remove class
if (jQuery(this).is('.mean-remove')) {
jQuery(this).attr('class', 'mean-remove');
} else {
jQuery(this).removeAttr("class");
}
jQuery(this).removeAttr("id");
});
}
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
124 next.html
@@ -0,0 +1,124 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MeanMenu Demo</title>
<style>
/* Basic CSS */
html {
-webkit-text-size-adjust: none;
-webkit-font-smoothing: aliased;
}
body {
margin: 0;
padding: 0;
font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
h1 {
font-size: 28px;
font-weight: 100;
text-align: center;
}
header nav {
text-align: center;
background: #efefef;
}
header nav ul {
margin: 0;
padding: 1em;
list-style-type: none;
}
header nav ul li {
display: inline;
margin-left: 1em;
}
header nav ul li:first-child {
margin-left: 0;
}
header nav ul li ul {
display: none;
}
a {
color: #f77564;
}
a:hover {
color: #333;
}
a, a:hover {
-o-transition: color 0.25s ease-in;
-webkit-transition: color 0.25s ease-in;
-moz-transition: color 0.25s ease-in;
transition: color 0.25s ease-in;
}
section, article, header {
display: block;
float: left;
width: 100%;
}
article {
width: 96%;
padding: 3em 2%;
}
</style>
<link rel="stylesheet" href="meanmenu.css" media="all" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="next.html">Top Level Link</a>
<ul>
<li><a href="#">Second Level Link</a>
<ul>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a>
<ul>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
<ul>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul>
</li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Resize your browser to under 480 pixels</h1>
</article>
</section>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
</script>
</body>
</html>

0 comments on commit 01b39ca

Please sign in to comment.