├── .gitignore
├── README.md
├── demo.html
├── gpl.txt
├── jquery.meanmenu.js
├── jquery.meanmenu.min.js
├── meanmenu.css
└── meanmenu.min.css


/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | config.codekit
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | MeanMenu v2.0.8
  2 | ===========
  3 | 
  4 | Looking for a WordPress version?
  5 | ---
  6 | Our friends over at PluginHero have just released the <a href="http://pluginhero.com/portfolio/meanmenu/">WordPress version of MeanMenu</a>.
  7 | 
  8 | A menu system for converting a standard menu into a mobile/tablet responsive menu, media query independent.
  9 | 
 10 | **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.**
 11 | 
 12 | **MeanMenu only works for one menu per page.**
 13 | 
 14 | If you are looking for drop down functionality on the desktop, MeanMenu doesn'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>.
 15 | 
 16 | And yes, it works with jQuery 2.0 - obviously IE 7 & 8 will not work.
 17 | 
 18 | Live Demo:
 19 | <a href="http://www.meanthemes.com/demo/meanmenu/demo.html">http://www.meanthemes.com/demo/meanmenu/demo.html</a>
 20 | 
 21 | 
 22 | Just include the jQuery library (http://jquery.com)
 23 | 
 24 | Then this file (jquery.meanmenu.js)
 25 | 
 26 | in your HTML e.g.
 27 | 
 28 |     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
 29 |     <script src="assets/js/plugins/jquery.meanmenu.js"></script>
 30 | 
 31 | Then add the CSS for this after all of your other CSS in the &lt;head&gt; section.
 32 | 
 33 | 	<link rel="stylesheet" href="meanmenu.css" media="all" />
 34 | 
 35 | Then in your usual document.ready, this is working under the assumption your navigation is in <header><nav> structure...
 36 | 
 37 |     jQuery(document).ready(function () {
 38 |     	jQuery('header nav').meanmenu();
 39 |     });
 40 | 
 41 | There are the following options (Options are shown with their defaults)...
 42 | 
 43 | meanMenuContainer: 'body'
 44 | 
 45 | - Choose where meanmenu will be placed within the HTML
 46 | 
 47 | meanMenuClose: "X"
 48 | 
 49 | - Single character you want to represent the close menu button
 50 | 
 51 | meanMenuCloseSize: "18px"
 52 | 
 53 | - Set font size of close button
 54 | 
 55 | meanMenuOpen: "<span /><span /><span />"
 56 | 
 57 | - Text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans
 58 | 
 59 | meanRevealPosition: "right"
 60 | 
 61 | - Left right or center positions
 62 | 
 63 | meanRevealPositionDistance: "0"
 64 | 
 65 | - Tweak the position of the menu
 66 | 
 67 | meanRevealColour: ""
 68 | 
 69 | - Override CSS colours for the reveal background
 70 | 
 71 | meanScreenWidth: "480"
 72 | 
 73 | - Set the screen width you want meanmenu to kick in at
 74 | 
 75 | meanNavPush: ""
 76 | 
 77 | - Set a height here in px, em or % if you want to budge your layout now the navigation is missing.
 78 | 
 79 | meanShowChildren: true
 80 | 
 81 | - true to show children in the menu, false to hide them
 82 | 
 83 | meanExpandableChildren: true
 84 | 
 85 | - true to allow expand/collapse children
 86 | 
 87 | meanExpand: "+"
 88 | 
 89 | - single character you want to represent the expand for ULs
 90 | 
 91 | meanContract: "-"
 92 | 
 93 | - single character you want to represent the contract for ULs
 94 | 
 95 | meanRemoveAttrs: false
 96 | - true to remove classes and IDs, false to keep them
 97 | 
 98 | onePage: false
 99 | 
100 | - set to true for one page sites, the navigation will close back up on itself on click
101 | 
102 | removeElements: ""
103 | 
104 | - 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
105 | 
106 | meanDisplay: "block"
107 | 
108 | - 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.
109 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html class="no-js" lang="en">
  3 | <head>
  4 | <meta charset="utf-8">
  5 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 | <title>MeanMenu Demo</title>
  7 | <style>
  8 | /* Basic CSS */
  9 | html {
 10 |   -webkit-text-size-adjust: none;
 11 |   -webkit-font-smoothing: aliased;
 12 | }
 13 | body {
 14 | 	margin: 0;
 15 | 	padding: 0;
 16 | 	font: 16px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 17 | }
 18 | h1 {
 19 | 	font-size: 28px;
 20 | 	font-weight: 100;
 21 | 	text-align: center;
 22 | }
 23 | h2 {
 24 | font-size: 18px;
 25 | font-weight: 100;
 26 | text-align: center;
 27 | margin-top: 40px;
 28 | }
 29 | header nav {
 30 | 	text-align: center;
 31 | 	background: #efefef;
 32 | }
 33 | header nav ul {
 34 | 	margin: 0;
 35 | 	padding: 1em;
 36 | 	list-style-type: none;
 37 | }
 38 | header nav ul li {
 39 | 	display: inline;
 40 | 	margin-left: 1em;
 41 | }
 42 | header nav ul li:first-child {
 43 | 	margin-left: 0;
 44 | }
 45 | header nav ul li ul {
 46 | 	display: none;
 47 | }
 48 | a {
 49 | 	color: #f77564;
 50 | }
 51 | a:hover {
 52 | 	color: #333;
 53 | }
 54 | a, a:hover {
 55 | 	-o-transition: color 0.25s ease-in;
 56 | 	-webkit-transition: color 0.25s ease-in;
 57 | 	-moz-transition: color 0.25s ease-in;
 58 | 	transition: color 0.25s ease-in;
 59 | }
 60 | section, article, header {
 61 | 	display: block;
 62 | 	float: left;
 63 | 	width: 100%;
 64 | }
 65 | article {
 66 | 	width: 96%;
 67 | 	padding: 3em 2%;
 68 | }
 69 | </style>
 70 | 
 71 | <link rel="stylesheet" href="meanmenu.css" media="all" />
 72 | 
 73 | <!--[if lt IE 9]>
 74 | 		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 75 | <![endif]-->
 76 | 	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
 77 | </head>
 78 | 
 79 | <body>
 80 | 
 81 | <header>
 82 | 	<nav>
 83 | 		<ul>
 84 | 			<li><a href="#">Top Level Link</a>
 85 | 				<ul>
 86 | 					<li><a href="#">Second Level Link</a>
 87 | 						<ul>
 88 | 							<li><a href="#">Third Level Link</a></li>
 89 | 							<li><a href="#">Third Level Link</a></li>
 90 | 							<li><a href="#">Third Level Link</a>
 91 | 								<ul>
 92 | 									<li><a href="#">Fourth Level Link</a></li>
 93 | 									<li><a href="#">Fourth Level Link</a></li>
 94 | 									<li><a href="#">Fourth Level Link with extra long name so it wraps</a>
 95 | 										<ul>
 96 | 											<li><a href="#">Fifth Level Link</a></li>
 97 | 											<li><a href="#">Fifth Level Link</a></li>
 98 | 											<li><a href="#">Fifth Level Link</a></li>
 99 | 										</ul>
100 | 									</li>
101 | 								</ul>
102 | 							</li>
103 | 						</ul>
104 | 					</li>
105 | 					<li><a href="#">Second Level Link</a></li>
106 | 					<li><a href="#">Second Level Link</a></li>
107 | 				</ul>
108 | 			</li>
109 | 			<li><a href="#">Top Level Link</a></li>
110 | 			<li><a href="#">Top Level Link</a></li>
111 | 			<li><a href="#">Top Level Link</a></li>
112 | 		</ul>
113 | 	</nav>
114 | </header>
115 | 
116 | <section>
117 | 	<article>
118 | 		<h1>Resize your browser to under 480 pixels</h1>
119 |     <h2><a href="http://www.meanthemes.com/our-themes/">Check out our WordPress &amp; Ghost Themes</a></h2>
120 | 	</article>
121 | </section>
122 | 
123 | <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
124 | <script src="jquery.meanmenu.js"></script>
125 | <script>
126 | 	jQuery(document).ready(function () {
127 | 	    jQuery('header nav').meanmenu();
128 | 	});
129 | </script>
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------
/gpl.txt:
--------------------------------------------------------------------------------
  1 |                    GNU LESSER GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 | 
  9 |   This version of the GNU Lesser General Public License incorporates
 10 | the terms and conditions of version 3 of the GNU General Public
 11 | License, supplemented by the additional permissions listed below.
 12 | 
 13 |   0. Additional Definitions.
 14 | 
 15 |   As used herein, "this License" refers to version 3 of the GNU Lesser
 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU
 17 | General Public License.
 18 | 
 19 |   "The Library" refers to a covered work governed by this License,
 20 | other than an Application or a Combined Work as defined below.
 21 | 
 22 |   An "Application" is any work that makes use of an interface provided
 23 | by the Library, but which is not otherwise based on the Library.
 24 | Defining a subclass of a class defined by the Library is deemed a mode
 25 | of using an interface provided by the Library.
 26 | 
 27 |   A "Combined Work" is a work produced by combining or linking an
 28 | Application with the Library.  The particular version of the Library
 29 | with which the Combined Work was made is also called the "Linked
 30 | Version".
 31 | 
 32 |   The "Minimal Corresponding Source" for a Combined Work means the
 33 | Corresponding Source for the Combined Work, excluding any source code
 34 | for portions of the Combined Work that, considered in isolation, are
 35 | based on the Application, and not on the Linked Version.
 36 | 
 37 |   The "Corresponding Application Code" for a Combined Work means the
 38 | object code and/or source code for the Application, including any data
 39 | and utility programs needed for reproducing the Combined Work from the
 40 | Application, but excluding the System Libraries of the Combined Work.
 41 | 
 42 |   1. Exception to Section 3 of the GNU GPL.
 43 | 
 44 |   You may convey a covered work under sections 3 and 4 of this License
 45 | without being bound by section 3 of the GNU GPL.
 46 | 
 47 |   2. Conveying Modified Versions.
 48 | 
 49 |   If you modify a copy of the Library, and, in your modifications, a
 50 | facility refers to a function or data to be supplied by an Application
 51 | that uses the facility (other than as an argument passed when the
 52 | facility is invoked), then you may convey a copy of the modified
 53 | version:
 54 | 
 55 |    a) under this License, provided that you make a good faith effort to
 56 |    ensure that, in the event an Application does not supply the
 57 |    function or data, the facility still operates, and performs
 58 |    whatever part of its purpose remains meaningful, or
 59 | 
 60 |    b) under the GNU GPL, with none of the additional permissions of
 61 |    this License applicable to that copy.
 62 | 
 63 |   3. Object Code Incorporating Material from Library Header Files.
 64 | 
 65 |   The object code form of an Application may incorporate material from
 66 | a header file that is part of the Library.  You may convey such object
 67 | code under terms of your choice, provided that, if the incorporated
 68 | material is not limited to numerical parameters, data structure
 69 | layouts and accessors, or small macros, inline functions and templates
 70 | (ten or fewer lines in length), you do both of the following:
 71 | 
 72 |    a) Give prominent notice with each copy of the object code that the
 73 |    Library is used in it and that the Library and its use are
 74 |    covered by this License.
 75 | 
 76 |    b) Accompany the object code with a copy of the GNU GPL and this license
 77 |    document.
 78 | 
 79 |   4. Combined Works.
 80 | 
 81 |   You may convey a Combined Work under terms of your choice that,
 82 | taken together, effectively do not restrict modification of the
 83 | portions of the Library contained in the Combined Work and reverse
 84 | engineering for debugging such modifications, if you also do each of
 85 | the following:
 86 | 
 87 |    a) Give prominent notice with each copy of the Combined Work that
 88 |    the Library is used in it and that the Library and its use are
 89 |    covered by this License.
 90 | 
 91 |    b) Accompany the Combined Work with a copy of the GNU GPL and this license
 92 |    document.
 93 | 
 94 |    c) For a Combined Work that displays copyright notices during
 95 |    execution, include the copyright notice for the Library among
 96 |    these notices, as well as a reference directing the user to the
 97 |    copies of the GNU GPL and this license document.
 98 | 
 99 |    d) Do one of the following:
100 | 
101 |        0) Convey the Minimal Corresponding Source under the terms of this
102 |        License, and the Corresponding Application Code in a form
103 |        suitable for, and under terms that permit, the user to
104 |        recombine or relink the Application with a modified version of
105 |        the Linked Version to produce a modified Combined Work, in the
106 |        manner specified by section 6 of the GNU GPL for conveying
107 |        Corresponding Source.
108 | 
109 |        1) Use a suitable shared library mechanism for linking with the
110 |        Library.  A suitable mechanism is one that (a) uses at run time
111 |        a copy of the Library already present on the user's computer
112 |        system, and (b) will operate properly with a modified version
113 |        of the Library that is interface-compatible with the Linked
114 |        Version.
115 | 
116 |    e) Provide Installation Information, but only if you would otherwise
117 |    be required to provide such information under section 6 of the
118 |    GNU GPL, and only to the extent that such information is
119 |    necessary to install and execute a modified version of the
120 |    Combined Work produced by recombining or relinking the
121 |    Application with a modified version of the Linked Version. (If
122 |    you use option 4d0, the Installation Information must accompany
123 |    the Minimal Corresponding Source and Corresponding Application
124 |    Code. If you use option 4d1, you must provide the Installation
125 |    Information in the manner specified by section 6 of the GNU GPL
126 |    for conveying Corresponding Source.)
127 | 
128 |   5. Combined Libraries.
129 | 
130 |   You may place library facilities that are a work based on the
131 | Library side by side in a single library together with other library
132 | facilities that are not Applications and are not covered by this
133 | License, and convey such a combined library under terms of your
134 | choice, if you do both of the following:
135 | 
136 |    a) Accompany the combined library with a copy of the same work based
137 |    on the Library, uncombined with any other library facilities,
138 |    conveyed under the terms of this License.
139 | 
140 |    b) Give prominent notice with the combined library that part of it
141 |    is a work based on the Library, and explaining where to find the
142 |    accompanying uncombined form of the same work.
143 | 
144 |   6. Revised Versions of the GNU Lesser General Public License.
145 | 
146 |   The Free Software Foundation may publish revised and/or new versions
147 | of the GNU Lesser General Public License from time to time. Such new
148 | versions will be similar in spirit to the present version, but may
149 | differ in detail to address new problems or concerns.
150 | 
151 |   Each version is given a distinguishing version number. If the
152 | Library as you received it specifies that a certain numbered version
153 | of the GNU Lesser General Public License "or any later version"
154 | applies to it, you have the option of following the terms and
155 | conditions either of that published version or of any later version
156 | published by the Free Software Foundation. If the Library as you
157 | received it does not specify a version number of the GNU Lesser
158 | General Public License, you may choose any version of the GNU Lesser
159 | General Public License ever published by the Free Software Foundation.
160 | 
161 |   If the Library as you received it specifies that a proxy can decide
162 | whether future versions of the GNU Lesser General Public License shall
163 | apply, that proxy's public statement of acceptance of any version is
164 | permanent authorization for you to choose that version for the
165 | Library.


--------------------------------------------------------------------------------
/jquery.meanmenu.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 | * jQuery meanMenu v2.0.8
  3 | * @Copyright (C) 2012-2014 Chris Wharton @ MeanThemes (https://github.com/meanthemes/meanMenu)
  4 | *
  5 | */
  6 | /*
  7 | * This program is free software: you can redistribute it and/or modify
  8 | * it under the terms of the GNU General Public License as published by
  9 | * the Free Software Foundation, either version 3 of the License, or
 10 | * (at your option) any later version.
 11 | *
 12 | * THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT
 13 | * HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
 14 | * INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR
 15 | * FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE
 16 | * OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD PARTY PATENTS,
 17 | * COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.COPYRIGHT HOLDERS WILL NOT
 18 | * BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL
 19 | * DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENTATION.
 20 | *
 21 | * You should have received a copy of the GNU General Public License
 22 | * along with this program. If not, see <http://gnu.org/licenses/>.
 23 | *
 24 | * Find more information at http://www.meanthemes.com/plugins/meanmenu/
 25 | *
 26 | */
 27 | (function ($) {
 28 | 	"use strict";
 29 | 		$.fn.meanmenu = function (options) {
 30 | 				var defaults = {
 31 | 						meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace
 32 | 						meanMenuContainer: 'body', // Choose where meanmenu will be placed within the HTML
 33 | 						meanMenuClose: "X", // single character you want to represent the close menu button
 34 | 						meanMenuCloseSize: "18px", // set font size of close button
 35 | 						meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed
 36 | 						meanRevealPosition: "right", // left right or center positions
 37 | 						meanRevealPositionDistance: "0", // Tweak the position of the menu
 38 | 						meanRevealColour: "", // override CSS colours for the reveal background
 39 | 						meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at
 40 | 						meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
 41 | 						meanShowChildren: true, // true to show children in the menu, false to hide them
 42 | 						meanExpandableChildren: true, // true to allow expand/collapse children
 43 | 						meanExpand: "+", // single character you want to represent the expand for ULs
 44 | 						meanContract: "-", // single character you want to represent the contract for ULs
 45 | 						meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them
 46 | 						onePage: false, // set to true for one page sites
 47 | 						meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell
 48 | 						removeElements: "" // set to hide page elements
 49 | 				};
 50 | 				options = $.extend(defaults, options);
 51 | 
 52 | 				// get browser width
 53 | 				var currentWidth = window.innerWidth || document.documentElement.clientWidth;
 54 | 
 55 | 				return this.each(function () {
 56 | 						var meanMenu = options.meanMenuTarget;
 57 | 						var meanContainer = options.meanMenuContainer;
 58 | 						var meanMenuClose = options.meanMenuClose;
 59 | 						var meanMenuCloseSize = options.meanMenuCloseSize;
 60 | 						var meanMenuOpen = options.meanMenuOpen;
 61 | 						var meanRevealPosition = options.meanRevealPosition;
 62 | 						var meanRevealPositionDistance = options.meanRevealPositionDistance;
 63 | 						var meanRevealColour = options.meanRevealColour;
 64 | 						var meanScreenWidth = options.meanScreenWidth;
 65 | 						var meanNavPush = options.meanNavPush;
 66 | 						var meanRevealClass = ".meanmenu-reveal";
 67 | 						var meanShowChildren = options.meanShowChildren;
 68 | 						var meanExpandableChildren = options.meanExpandableChildren;
 69 | 						var meanExpand = options.meanExpand;
 70 | 						var meanContract = options.meanContract;
 71 | 						var meanRemoveAttrs = options.meanRemoveAttrs;
 72 | 						var onePage = options.onePage;
 73 | 						var meanDisplay = options.meanDisplay;
 74 | 						var removeElements = options.removeElements;
 75 | 
 76 | 						//detect known mobile/tablet usage
 77 | 						var isMobile = false;
 78 | 						if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) {
 79 | 								isMobile = true;
 80 | 						}
 81 | 
 82 | 						if ( (navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i)) ) {
 83 | 							// add scrollbar for IE7 & 8 to stop breaking resize function on small content sites
 84 | 								jQuery('html').css("overflow-y" , "scroll");
 85 | 						}
 86 | 
 87 | 						var meanRevealPos = "";
 88 | 						var meanCentered = function() {
 89 | 							if (meanRevealPosition === "center") {
 90 | 								var newWidth = window.innerWidth || document.documentElement.clientWidth;
 91 | 								var meanCenter = ( (newWidth/2)-22 )+"px";
 92 | 								meanRevealPos = "left:" + meanCenter + ";right:auto;";
 93 | 
 94 | 								if (!isMobile) {
 95 | 									jQuery('.meanmenu-reveal').css("left",meanCenter);
 96 | 								} else {
 97 | 									jQuery('.meanmenu-reveal').animate({
 98 | 											left: meanCenter
 99 | 									});
100 | 								}
101 | 							}
102 | 						};
103 | 
104 | 						var menuOn = false;
105 | 						var meanMenuExist = false;
106 | 
107 | 
108 | 						if (meanRevealPosition === "right") {
109 | 								meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;";
110 | 						}
111 | 						if (meanRevealPosition === "left") {
112 | 								meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;";
113 | 						}
114 | 						// run center function
115 | 						meanCentered();
116 | 
117 | 						// set all styles for mean-reveal
118 | 						var $navreveal = "";
119 | 
120 | 						var meanInner = function() {
121 | 								// get last class name
122 | 								if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) {
123 | 										$navreveal.html(meanMenuClose);
124 | 								} else {
125 | 										$navreveal.html(meanMenuOpen);
126 | 								}
127 | 						};
128 | 
129 | 						// re-instate original nav (and call this on window.width functions)
130 | 						var meanOriginal = function() {
131 | 							jQuery('.mean-bar,.mean-push').remove();
132 | 							jQuery(meanContainer).removeClass("mean-container");
133 | 							jQuery(meanMenu).css('display', meanDisplay);
134 | 							menuOn = false;
135 | 							meanMenuExist = false;
136 | 							jQuery(removeElements).removeClass('mean-remove');
137 | 						};
138 | 
139 | 						// navigation reveal
140 | 						var showMeanMenu = function() {
141 | 								var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
142 | 								if (currentWidth <= meanScreenWidth) {
143 | 								jQuery(removeElements).addClass('mean-remove');
144 | 									meanMenuExist = true;
145 | 									// add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container'
146 | 									jQuery(meanContainer).addClass("mean-container");
147 | 									jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>');
148 | 
149 | 									//push meanMenu navigation into .mean-nav
150 | 									var meanMenuContents = jQuery(meanMenu).html();
151 | 									jQuery('.mean-nav').html(meanMenuContents);
152 | 
153 | 									// remove all classes from EVERYTHING inside meanmenu nav
154 | 									if(meanRemoveAttrs) {
155 | 										jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function() {
156 | 											// First check if this has mean-remove class
157 | 											if (jQuery(this).is('.mean-remove')) {
158 | 												jQuery(this).attr('class', 'mean-remove');
159 | 											} else {
160 | 												jQuery(this).removeAttr("class");
161 | 											}
162 | 											jQuery(this).removeAttr("id");
163 | 										});
164 | 									}
165 | 
166 | 									// push in a holder div (this can be used if removal of nav is causing layout issues)
167 | 									jQuery(meanMenu).before('<div class="mean-push" />');
168 | 									jQuery('.mean-push').css("margin-top",meanNavPush);
169 | 
170 | 									// hide current navigation and reveal mean nav link
171 | 									jQuery(meanMenu).hide();
172 | 									jQuery(".meanmenu-reveal").show();
173 | 
174 | 									// turn 'X' on or off
175 | 									jQuery(meanRevealClass).html(meanMenuOpen);
176 | 									$navreveal = jQuery(meanRevealClass);
177 | 
178 | 									//hide mean-nav ul
179 | 									jQuery('.mean-nav ul').hide();
180 | 
181 | 									// hide sub nav
182 | 									if(meanShowChildren) {
183 | 											// allow expandable sub nav(s)
184 | 											if(meanExpandableChildren){
185 | 												jQuery('.mean-nav ul ul').each(function() {
186 | 														if(jQuery(this).children().length){
187 | 																jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');
188 | 														}
189 | 												});
190 | 												jQuery('.mean-expand').on("click",function(e){
191 | 														e.preventDefault();
192 | 															if (jQuery(this).hasClass("mean-clicked")) {
193 | 																	jQuery(this).text(meanExpand);
194 | 																jQuery(this).prev('ul').slideUp(300, function(){});
195 | 														} else {
196 | 																jQuery(this).text(meanContract);
197 | 																jQuery(this).prev('ul').slideDown(300, function(){});
198 | 														}
199 | 														jQuery(this).toggleClass("mean-clicked");
200 | 												});
201 | 											} else {
202 | 													jQuery('.mean-nav ul ul').show();
203 | 											}
204 | 									} else {
205 | 											jQuery('.mean-nav ul ul').hide();
206 | 									}
207 | 
208 | 									// add last class to tidy up borders
209 | 									jQuery('.mean-nav ul li').last().addClass('mean-last');
210 | 									$navreveal.removeClass("meanclose");
211 | 									jQuery($navreveal).click(function(e){
212 | 										e.preventDefault();
213 | 								if( menuOn === false ) {
214 | 												$navreveal.css("text-align", "center");
215 | 												$navreveal.css("text-indent", "0");
216 | 												$navreveal.css("font-size", meanMenuCloseSize);
217 | 												jQuery('.mean-nav ul:first').slideDown();
218 | 												menuOn = true;
219 | 										} else {
220 | 											jQuery('.mean-nav ul:first').slideUp();
221 | 											menuOn = false;
222 | 										}
223 | 											$navreveal.toggleClass("meanclose");
224 | 											meanInner();
225 | 											jQuery(removeElements).addClass('mean-remove');
226 | 									});
227 | 
228 | 									// for one page websites, reset all variables...
229 | 									if ( onePage ) {
230 | 										jQuery('.mean-nav ul > li > a:first-child').on( "click" , function () {
231 | 											jQuery('.mean-nav ul:first').slideUp();
232 | 											menuOn = false;
233 | 											jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen);
234 | 										});
235 | 									}
236 | 							} else {
237 | 								meanOriginal();
238 | 							}
239 | 						};
240 | 
241 | 						if (!isMobile) {
242 | 								// reset menu on resize above meanScreenWidth
243 | 								jQuery(window).resize(function () {
244 | 										currentWidth = window.innerWidth || document.documentElement.clientWidth;
245 | 										if (currentWidth > meanScreenWidth) {
246 | 												meanOriginal();
247 | 										} else {
248 | 											meanOriginal();
249 | 										}
250 | 										if (currentWidth <= meanScreenWidth) {
251 | 												showMeanMenu();
252 | 												meanCentered();
253 | 										} else {
254 | 											meanOriginal();
255 | 										}
256 | 								});
257 | 						}
258 | 
259 | 					jQuery(window).resize(function () {
260 | 								// get browser width
261 | 								currentWidth = window.innerWidth || document.documentElement.clientWidth;
262 | 
263 | 								if (!isMobile) {
264 | 										meanOriginal();
265 | 										if (currentWidth <= meanScreenWidth) {
266 | 												showMeanMenu();
267 | 												meanCentered();
268 | 										}
269 | 								} else {
270 | 										meanCentered();
271 | 										if (currentWidth <= meanScreenWidth) {
272 | 												if (meanMenuExist === false) {
273 | 														showMeanMenu();
274 | 												}
275 | 										} else {
276 | 												meanOriginal();
277 | 										}
278 | 								}
279 | 						});
280 | 
281 | 					// run main menuMenu function on load
282 | 					showMeanMenu();
283 | 				});
284 | 		};
285 | })(jQuery);
286 | 


--------------------------------------------------------------------------------
/jquery.meanmenu.min.js:
--------------------------------------------------------------------------------
1 | !function($){"use strict";$.fn.meanmenu=function(e){var n={meanMenuTarget:jQuery(this),meanMenuContainer:"body",meanMenuClose:"X",meanMenuCloseSize:"18px",meanMenuOpen:"<span /><span /><span />",meanRevealPosition:"right",meanRevealPositionDistance:"0",meanRevealColour:"",meanScreenWidth:"480",meanNavPush:"",meanShowChildren:!0,meanExpandableChildren:!0,meanExpand:"+",meanContract:"-",meanRemoveAttrs:!1,onePage:!1,meanDisplay:"block",removeElements:""};e=$.extend(n,e);var a=window.innerWidth||document.documentElement.clientWidth;return this.each(function(){var n=e.meanMenuTarget,t=e.meanMenuContainer,r=e.meanMenuClose,i=e.meanMenuCloseSize,s=e.meanMenuOpen,u=e.meanRevealPosition,m=e.meanRevealPositionDistance,l=e.meanRevealColour,o=e.meanScreenWidth,c=e.meanNavPush,v=".meanmenu-reveal",h=e.meanShowChildren,d=e.meanExpandableChildren,y=e.meanExpand,j=e.meanContract,Q=e.meanRemoveAttrs,f=e.onePage,g=e.meanDisplay,p=e.removeElements,C=!1;(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/Blackberry/i)||navigator.userAgent.match(/Windows Phone/i))&&(C=!0),(navigator.userAgent.match(/MSIE 8/i)||navigator.userAgent.match(/MSIE 7/i))&&jQuery("html").css("overflow-y","scroll");var w="",x=function(){if("center"===u){var e=window.innerWidth||document.documentElement.clientWidth,n=e/2-22+"px";w="left:"+n+";right:auto;",C?jQuery(".meanmenu-reveal").animate({left:n}):jQuery(".meanmenu-reveal").css("left",n)}},A=!1,E=!1;"right"===u&&(w="right:"+m+";left:auto;"),"left"===u&&(w="left:"+m+";right:auto;"),x();var M="",P=function(){M.html(jQuery(M).is(".meanmenu-reveal.meanclose")?r:s)},W=function(){jQuery(".mean-bar,.mean-push").remove(),jQuery(t).removeClass("mean-container"),jQuery(n).css("display",g),A=!1,E=!1,jQuery(p).removeClass("mean-remove")},b=function(){var e="background:"+l+";color:"+l+";"+w;if(o>=a){jQuery(p).addClass("mean-remove"),E=!0,jQuery(t).addClass("mean-container"),jQuery(".mean-container").prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+e+'">Show Navigation</a><nav class="mean-nav"></nav></div>');var r=jQuery(n).html();jQuery(".mean-nav").html(r),Q&&jQuery("nav.mean-nav ul, nav.mean-nav ul *").each(function(){jQuery(this).is(".mean-remove")?jQuery(this).attr("class","mean-remove"):jQuery(this).removeAttr("class"),jQuery(this).removeAttr("id")}),jQuery(n).before('<div class="mean-push" />'),jQuery(".mean-push").css("margin-top",c),jQuery(n).hide(),jQuery(".meanmenu-reveal").show(),jQuery(v).html(s),M=jQuery(v),jQuery(".mean-nav ul").hide(),h?d?(jQuery(".mean-nav ul ul").each(function(){jQuery(this).children().length&&jQuery(this,"li:first").parent().append('<a class="mean-expand" href="#" style="font-size: '+i+'">'+y+"</a>")}),jQuery(".mean-expand").on("click",function(e){e.preventDefault(),jQuery(this).hasClass("mean-clicked")?(jQuery(this).text(y),jQuery(this).prev("ul").slideUp(300,function(){})):(jQuery(this).text(j),jQuery(this).prev("ul").slideDown(300,function(){})),jQuery(this).toggleClass("mean-clicked")})):jQuery(".mean-nav ul ul").show():jQuery(".mean-nav ul ul").hide(),jQuery(".mean-nav ul li").last().addClass("mean-last"),M.removeClass("meanclose"),jQuery(M).click(function(e){e.preventDefault(),A===!1?(M.css("text-align","center"),M.css("text-indent","0"),M.css("font-size",i),jQuery(".mean-nav ul:first").slideDown(),A=!0):(jQuery(".mean-nav ul:first").slideUp(),A=!1),M.toggleClass("meanclose"),P(),jQuery(p).addClass("mean-remove")}),f&&jQuery(".mean-nav ul > li > a:first-child").on("click",function(){jQuery(".mean-nav ul:first").slideUp(),A=!1,jQuery(M).toggleClass("meanclose").html(s)})}else W()};C||jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,a>o,W(),o>=a?(b(),x()):W()}),jQuery(window).resize(function(){a=window.innerWidth||document.documentElement.clientWidth,C?(x(),o>=a?E===!1&&b():W()):(W(),o>=a&&(b(),x()))}),b()})}}(jQuery);


--------------------------------------------------------------------------------
/meanmenu.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /*! #######################################################################
  3 | 
  4 | 	MeanMenu 2.0.7
  5 | 	--------
  6 | 
  7 | 	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
  8 | 
  9 | ####################################################################### */
 10 | 
 11 | /* hide the link until viewport size is reached */
 12 | a.meanmenu-reveal {
 13 | 	display: none;
 14 | }
 15 | 
 16 | /* when under viewport size, .mean-container is added to body */
 17 | .mean-container .mean-bar {
 18 | 	float: left;
 19 | 	width: 100%;
 20 | 	position: relative;
 21 | 	background: #0c1923;
 22 | 	padding: 4px 0;
 23 | 	min-height: 42px;
 24 | 	z-index: 999999;
 25 | }
 26 | 
 27 | .mean-container a.meanmenu-reveal {
 28 | 	width: 22px;
 29 | 	height: 22px;
 30 | 	padding: 13px 13px 11px 13px;
 31 | 	position: absolute;
 32 | 	top: 0;
 33 | 	right: 0;
 34 | 	cursor: pointer;
 35 | 	color: #fff;
 36 | 	text-decoration: none;
 37 | 	font-size: 16px;
 38 | 	text-indent: -9999em;
 39 | 	line-height: 22px;
 40 | 	font-size: 1px;
 41 | 	display: block;
 42 | 	font-family: Arial, Helvetica, sans-serif;
 43 | 	font-weight: 700;
 44 | }
 45 | 
 46 | .mean-container a.meanmenu-reveal span {
 47 | 	display: block;
 48 | 	background: #fff;
 49 | 	height: 3px;
 50 | 	margin-top: 3px;
 51 | }
 52 | 
 53 | .mean-container .mean-nav {
 54 | 	float: left;
 55 | 	width: 100%;
 56 | 	background: #0c1923;
 57 | 	margin-top: 44px;
 58 | }
 59 | 
 60 | .mean-container .mean-nav ul {
 61 | 	padding: 0;
 62 | 	margin: 0;
 63 | 	width: 100%;
 64 | 	list-style-type: none;
 65 | }
 66 | 
 67 | .mean-container .mean-nav ul li {
 68 | 	position: relative;
 69 | 	float: left;
 70 | 	width: 100%;
 71 | }
 72 | 
 73 | .mean-container .mean-nav ul li a {
 74 | 	display: block;
 75 | 	float: left;
 76 | 	width: 90%;
 77 | 	padding: 1em 5%;
 78 | 	margin: 0;
 79 | 	text-align: left;
 80 | 	color: #fff;
 81 | 	border-top: 1px solid #383838;
 82 | 	border-top: 1px solid rgba(255,255,255,0.5);
 83 | 	text-decoration: none;
 84 | 	text-transform: uppercase;
 85 | }
 86 | 
 87 | .mean-container .mean-nav ul li li a {
 88 | 	width: 80%;
 89 | 	padding: 1em 10%;
 90 | 	border-top: 1px solid #f1f1f1;
 91 | 	border-top: 1px solid rgba(255,255,255,0.25);
 92 | 	opacity: 0.75;
 93 | 	filter: alpha(opacity=75);
 94 | 	text-shadow: none !important;
 95 | 	visibility: visible;
 96 | }
 97 | 
 98 | .mean-container .mean-nav ul li.mean-last a {
 99 | 	border-bottom: none;
100 | 	margin-bottom: 0;
101 | }
102 | 
103 | .mean-container .mean-nav ul li li li a {
104 | 	width: 70%;
105 | 	padding: 1em 15%;
106 | }
107 | 
108 | .mean-container .mean-nav ul li li li li a {
109 | 	width: 60%;
110 | 	padding: 1em 20%;
111 | }
112 | 
113 | .mean-container .mean-nav ul li li li li li a {
114 | 	width: 50%;
115 | 	padding: 1em 25%;
116 | }
117 | 
118 | .mean-container .mean-nav ul li a:hover {
119 | 	background: #252525;
120 | 	background: rgba(255,255,255,0.1);
121 | }
122 | 
123 | .mean-container .mean-nav ul li a.mean-expand {
124 | 	margin-top: 1px;
125 | 	width: 26px;
126 | 	height: 32px;
127 | 	padding: 12px !important;
128 | 	text-align: center;
129 | 	position: absolute;
130 | 	right: 0;
131 | 	top: 0;
132 | 	z-index: 2;
133 | 	font-weight: 700;
134 | 	background: rgba(255,255,255,0.1);
135 | 	border: none !important;
136 | 	border-left: 1px solid rgba(255,255,255,0.4) !important;
137 | 	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
138 | }
139 | 
140 | .mean-container .mean-nav ul li a.mean-expand:hover {
141 | 	background: rgba(0,0,0,0.9);
142 | }
143 | 
144 | .mean-container .mean-push {
145 | 	float: left;
146 | 	width: 100%;
147 | 	padding: 0;
148 | 	margin: 0;
149 | 	clear: both;
150 | }
151 | 
152 | .mean-nav .wrapper {
153 | 	width: 100%;
154 | 	padding: 0;
155 | 	margin: 0;
156 | }
157 | 
158 | /* Fix for box sizing on Foundation Framework etc. */
159 | .mean-container .mean-bar, .mean-container .mean-bar * {
160 | 	-webkit-box-sizing: content-box;
161 | 	-moz-box-sizing: content-box;
162 | 	box-sizing: content-box;
163 | }
164 | 
165 | 
166 | .mean-remove {
167 | 	display: none !important;
168 | }
169 | 


--------------------------------------------------------------------------------
/meanmenu.min.css:
--------------------------------------------------------------------------------
1 | /*! #######################################################################
2 | 
3 | 	MeanMenu 2.0.7
4 | 	--------
5 | 
6 | 	To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
7 | 
8 | ####################################################################### */a.meanmenu-reveal{display:none}.mean-container .mean-bar{float:left;width:100%;position:relative;background:#0c1923;padding:4px 0;min-height:42px;z-index:999999}.mean-container a.meanmenu-reveal{width:22px;height:22px;padding:13px 13px 11px;position:absolute;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:16px;text-indent:-9999em;line-height:22px;font-size:1px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}.mean-container a.meanmenu-reveal span{display:block;background:#fff;height:3px;margin-top:3px}.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-container .mean-nav ul li{position:relative;float:left;width:100%}.mean-container .mean-nav ul li a{display:block;float:left;width:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;text-transform:uppercase}.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}.mean-container .mean-nav ul li li li a{width:70%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:60%;padding:1em 20%}.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width:26px;height:32px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.mean-remove{display:none!important}
9 | 


--------------------------------------------------------------------------------