Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial release

  • Loading branch information...
commit 0a1304393398bc69e59d28831bba54fa92572aa9 0 parents
@weare2ndfloor weare2ndfloor authored
Showing with 523 additions and 0 deletions.
  1. +58 −0 README.md
  2. +165 −0 gpl.txt
  3. +199 −0 jquery.meanmenu.js
  4. +101 −0 meanmenu.css
58 README.md
@@ -0,0 +1,58 @@
+meanMenu
+===========
+
+A menu system for responsive designs, media query independent.
+
+Just include the jQuery library (http://jquery.com)
+
+Then this file (jquery.meanmenu.js)
+
+in your HTML e.g.
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
+ <script src="assets/js/plugins/jquery.meanmenu.js"></script>
+
+Then add the CSS for this after all of your other CSS in the <head> section.
+
+ <link rel="stylesheet" href="meanmenu.css" media="all" />
+
+Then in your usual document.ready, this is working under the assumption your navigation is in <header><nav> structure...
+
+ jQuery(document).ready(function () {
+ jQuery.meanmenu();
+ });
+
+There are the following options (Options are shown with their defaults)...
+
+meanMenu: "header nav"
+- Target the current HTML markup you wish to replace
+
+meanMenuClose: "X",
+-Single character you want to represent the close menu button
+
+meanMenuCloseSize: "18px",
+- Set font size of close button
+
+meanMenuOpen: "<span /><span /><span />,
+- Text/markup you want when menu is closed, styling in CSS provides 3 bars with these spans
+
+meanRevealPosition: "right"
+- Left right or center positions
+
+meanRevealPositionDistance: "0"
+- Tweak the position of the menu
+
+meanRevealColour: ""
+- Override CSS colours for the reveal background
+
+meanRevealHoverColour: ""
+- Override CSS colours for the reveal hover
+
+meanScreenWidth: "480"
+- Set the screen width you want meanmenu to kick in at
+
+meanNavPush: ""
+- Set a height here in px, em or % if you want to budge your layout now the navigation is missing.
+
+meanShowChildren: true
+- true to show children in the menu, false to hide them
165 gpl.txt
@@ -0,0 +1,165 @@
+ GNU LESSER GENERAL PUBLIC LICENSE
+ Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+ This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+ 0. Additional Definitions.
+
+ As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+ "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+ An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+ A "Combined Work" is a work produced by combining or linking an
+Application with the Library. The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+ The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+ The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+ 1. Exception to Section 3 of the GNU GPL.
+
+ You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+ 2. Conveying Modified Versions.
+
+ If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+ a) under this License, provided that you make a good faith effort to
+ ensure that, in the event an Application does not supply the
+ function or data, the facility still operates, and performs
+ whatever part of its purpose remains meaningful, or
+
+ b) under the GNU GPL, with none of the additional permissions of
+ this License applicable to that copy.
+
+ 3. Object Code Incorporating Material from Library Header Files.
+
+ The object code form of an Application may incorporate material from
+a header file that is part of the Library. You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+ a) Give prominent notice with each copy of the object code that the
+ Library is used in it and that the Library and its use are
+ covered by this License.
+
+ b) Accompany the object code with a copy of the GNU GPL and this license
+ document.
+
+ 4. Combined Works.
+
+ You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+ a) Give prominent notice with each copy of the Combined Work that
+ the Library is used in it and that the Library and its use are
+ covered by this License.
+
+ b) Accompany the Combined Work with a copy of the GNU GPL and this license
+ document.
+
+ c) For a Combined Work that displays copyright notices during
+ execution, include the copyright notice for the Library among
+ these notices, as well as a reference directing the user to the
+ copies of the GNU GPL and this license document.
+
+ d) Do one of the following:
+
+ 0) Convey the Minimal Corresponding Source under the terms of this
+ License, and the Corresponding Application Code in a form
+ suitable for, and under terms that permit, the user to
+ recombine or relink the Application with a modified version of
+ the Linked Version to produce a modified Combined Work, in the
+ manner specified by section 6 of the GNU GPL for conveying
+ Corresponding Source.
+
+ 1) Use a suitable shared library mechanism for linking with the
+ Library. A suitable mechanism is one that (a) uses at run time
+ a copy of the Library already present on the user's computer
+ system, and (b) will operate properly with a modified version
+ of the Library that is interface-compatible with the Linked
+ Version.
+
+ e) Provide Installation Information, but only if you would otherwise
+ be required to provide such information under section 6 of the
+ GNU GPL, and only to the extent that such information is
+ necessary to install and execute a modified version of the
+ Combined Work produced by recombining or relinking the
+ Application with a modified version of the Linked Version. (If
+ you use option 4d0, the Installation Information must accompany
+ the Minimal Corresponding Source and Corresponding Application
+ Code. If you use option 4d1, you must provide the Installation
+ Information in the manner specified by section 6 of the GNU GPL
+ for conveying Corresponding Source.)
+
+ 5. Combined Libraries.
+
+ You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+ a) Accompany the combined library with a copy of the same work based
+ on the Library, uncombined with any other library facilities,
+ conveyed under the terms of this License.
+
+ b) Give prominent notice with the combined library that part of it
+ is a work based on the Library, and explaining where to find the
+ accompanying uncombined form of the same work.
+
+ 6. Revised Versions of the GNU Lesser General Public License.
+
+ The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+ Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+ If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.
199 jquery.meanmenu.js
@@ -0,0 +1,199 @@
+/**
+ * jQuery meanMenu v1.2
+ * Copyright (C) 2012 Chris Wharton (themes@meanthemes.com)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT
+ * HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
+ * INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR
+ * FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE
+ * OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD PARTY PATENTS,
+ * COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.COPYRIGHT HOLDERS WILL NOT
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL
+ * DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENTATION.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://gnu.org/licenses/>.
+ *
+ * Find more information at http://www.meanthemes.com/plugins/meanmenu/
+ *
+ */
+(function ($) {
+ $.fn.meanmenu = function (options) {
+ var defaults = {
+ meanMenu: "header nav", // Target the current HTML markup you wish to replace
+ meanMenuClose: "X", // single character you want to represent the close menu button
+ meanMenuCloseSize: "18px", // set font size of close button
+ meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed
+ meanRevealPosition: "right", // left right or center positions
+ meanRevealPositionDistance: "0", // Tweak the position of the menu
+ meanRevealColour: "", // override CSS colours for the reveal background
+ meanRevealHoverColour: "", // override CSS colours for the reveal hover
+ meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at
+ meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
+ meanShowChildren: true // true to show children in the menu, false to hide them
+ };
+ var options = $.extend(defaults, options);
+
+ // get browser width
+ currentWidth = jQuery(window).width();
+
+ return this.each(function () {
+ var meanMenu = options.meanMenu;
+ var meanReveal = options.meanReveal;
+ var meanMenuClose = options.meanMenuClose;
+ var meanMenuCloseSize = options.meanMenuCloseSize;
+ var meanMenuOpen = options.meanMenuOpen;
+ var meanRevealPosition = options.meanRevealPosition;
+ var meanRevealPositionDistance = options.meanRevealPositionDistance;
+ var meanRevealColour = options.meanRevealColour;
+ var meanRevealHoverColour = options.meanRevealHoverColour;
+ var meanScreenWidth = options.meanScreenWidth;
+ var meanNavPush = options.meanNavPush;
+ var meanTarget = jQuery(this);
+ var meanRevealClass = ".meanmenu-reveal";
+ meanShowChildren = options.meanShowChildren;
+
+ //detect known mobile/tablet usage
+ 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))) {
+ var isMobile = true;
+ }
+
+ function meanCentered() {
+ if (meanRevealPosition == "center") {
+ var newWidth = jQuery(window).width();
+ var meanCenter = ( (newWidth/2)-22 )+"px";
+ meanRevealPos = "left:" + meanCenter + ";right:auto;";
+
+ if (!isMobile) {
+ jQuery('.meanmenu-reveal').css("left",meanCenter);
+ } else {
+ jQuery('.meanmenu-reveal').animate({
+ left: meanCenter
+ });
+ }
+ }
+ }
+
+ if (meanRevealPosition == "right") {
+ meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;";
+ }
+ if (meanRevealPosition == "left") {
+ meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;";
+ }
+ // run center function
+ meanCentered();
+
+ // set all styles for mean-reveal
+ meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
+
+ function meanInner() {
+ // get last class name
+ navOpen = $navreveal.attr('class').split(' ').slice(-1);
+ if (navOpen == "meanclose") {
+ $navreveal.html(meanMenuClose);
+ } else {
+ $navreveal.html(meanMenuOpen);
+ }
+ }
+
+ //re-instate original nav (and call this on window.width functions)
+ function meanOriginal() {
+ jQuery('.mean-bar,.mean-push').replaceWith('');
+ jQuery('body').removeClass("mean-container");
+ jQuery(meanMenu).show();
+ }
+
+ //navigation reveal
+ function showMeanMenu() {
+ if (currentWidth <= meanScreenWidth) {
+ // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container'
+ jQuery('body').addClass("mean-container");
+ 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>');
+
+ //push meanMenu navigation into .mean-nav
+ var meanMenuContents = jQuery(meanMenu).html();
+ jQuery('.mean-nav').html(meanMenuContents);
+
+ // push in a holder div (this can be used if removal of nav is causing layout issues)
+ jQuery(meanMenu).before('<div class="mean-push" />');
+ jQuery('.mean-push').css("margin-top",meanNavPush);
+
+ // hide current navigation and reveal mean nav link
+ jQuery(meanMenu).hide();
+ jQuery(".meanmenu-reveal").show();
+
+ // turn 'X' on or off
+ jQuery(meanRevealClass).html(meanMenuOpen);
+ $navreveal = jQuery(meanRevealClass);
+
+ //hide mean-nav ul
+ jQuery('.mean-nav ul').hide();
+ $navreveal.removeClass("meanclose");
+ $navreveal.toggle(
+ function (e) {
+ e.preventDefault;
+ $navreveal.toggleClass("meanclose");
+ $navreveal.css("text-align", "center");
+ $navreveal.css("text-indent", "0");
+ $navreveal.css("font-size", meanMenuCloseSize);
+ meanInner();
+ // hide sub nav
+ if(meanShowChildren) {
+ jQuery('.mean-nav ul ul').show();
+ } else {
+ jQuery('.mean-nav ul ul').hide();
+ }
+
+ jQuery('.mean-nav ul').slideDown();
+
+ }, function (e) {
+ e.preventDefault;
+ $navreveal.html(meanMenuOpen);
+ $navreveal.toggleClass("meanclose");
+ meanInner();
+ // hide sub nav
+ if(meanShowChildren) {
+ jQuery('.mean-nav ul ul').show();
+ } else {
+ jQuery('.mean-nav ul ul').hide();
+ }
+
+ jQuery('.mean-nav ul').slideUp();
+
+ });
+ } else {
+ meanOriginal();
+ }
+ }
+ showMeanMenu();
+ if (!isMobile) {
+ //reset menu on resize above meanScreenWidth
+ jQuery(window).resize(function () {
+ currentWidth = jQuery(window).width();
+ if (currentWidth > meanScreenWidth) {
+ meanOriginal();
+ } else {
+ meanOriginal();
+ }
+ if (currentWidth <= meanScreenWidth) {
+ showMeanMenu();
+ meanCentered();
+ } else {
+ meanOriginal();
+ }
+ });
+ }
+
+ // adjust menu positioning on centered navigation
+ window.onorientationchange = function() {
+ meanCentered();
+ }
+
+ });
+ };
+})(jQuery);
101 meanmenu.css
@@ -0,0 +1,101 @@
+
+
+/* #######################################################################
+
+ meanMenu
+ --------
+
+ To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/)
+
+####################################################################### */
+
+/* hide the link until viewport size is reached */
+a.meanmenu-reveal {
+display: none;
+}
+
+/* when under viewport size, .mean-container is added to body */
+.mean-container .mean-bar {
+float: left;
+width: 100%;
+position: relative;
+background: #0c1923;
+padding: 4px 0;
+min-height: 33px;
+}
+.mean-container a.meanmenu-reveal {
+width: 22px;
+height: 22px;
+padding: 10px 10px 8px 10px;
+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: 33px;
+}
+.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,0.5);
+text-decoration: none;
+text-transform: uppercase;
+}
+.mean-container .mean-nav ul li:first-child a {
+border: none;
+}
+.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,0.25);
+opacity: 0.75;
+filter: alpha(opacity=75);
+text-shadow: none !important;
+visibility: visible;
+}
+.mean-container .mean-nav ul li li:first-child a {
+border-top: 1px solid #f1f1f1;
+border-top: 1px solid rgba(255,255,255,0.25);
+}
+.mean-container .mean-nav ul li a:hover {
+background: #252525;
+background: rgba(255,255,255,0.1);
+}
+.mean-container .mean-push {
+float: left;
+width: 100%;
+padding: 0;
+margin: 0;
+clear: both;
+}
+.mean-nav .wrapper {
+width: 100%;
+padding: 0;
+margin: 0;
+}
Please sign in to comment.
Something went wrong with that request. Please try again.