https://www.s-store.co.jp/meanthemes-meanMenu-d5f28f8/jquery.meanmenu.js

1/*!
2* jQuery meanMenu v2.0.7
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						removeElements: "" // set to hide page elements
48				};
49				options = $.extend(defaults, options);
50
51				// get browser width
52				var currentWidth = window.innerWidth || document.documentElement.clientWidth;
53
54				return this.each(function () {
55						var meanMenu = options.meanMenuTarget;
56						var meanContainer = options.meanMenuContainer;
57						var meanMenuClose = options.meanMenuClose;
58						var meanMenuCloseSize = options.meanMenuCloseSize;
59						var meanMenuOpen = options.meanMenuOpen;
60						var meanRevealPosition = options.meanRevealPosition;
61						var meanRevealPositionDistance = options.meanRevealPositionDistance;
62						var meanRevealColour = options.meanRevealColour;
63						var meanScreenWidth = options.meanScreenWidth;
64						var meanNavPush = options.meanNavPush;
65						var meanRevealClass = ".meanmenu-reveal";
66						var meanShowChildren = options.meanShowChildren;
67						var meanExpandableChildren = options.meanExpandableChildren;
68						var meanExpand = options.meanExpand;
69						var meanContract = options.meanContract;
70						var meanRemoveAttrs = options.meanRemoveAttrs;
71						var onePage = options.onePage;
72						var removeElements = options.removeElements;
73
74						//detect known mobile/tablet usage
75						var isMobile = false;
76						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)) ) {
77								isMobile = true;
78						}
79
80						if ( (navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i)) ) {
81							// add scrollbar for IE7 & 8 to stop breaking resize function on small content sites
82								jQuery('html').css("overflow-y" , "scroll");
83						}
84
85						var meanRevealPos = "";
86						var meanCentered = function() {
87							if (meanRevealPosition === "center") {
88								var newWidth = window.innerWidth || document.documentElement.clientWidth;
89								var meanCenter = ( (newWidth/2)-22 )+"px";
90								meanRevealPos = "left:" + meanCenter + ";right:auto;";
91
92								if (!isMobile) {
93									jQuery('.meanmenu-reveal').css("left",meanCenter);
94								} else {
95									jQuery('.meanmenu-reveal').animate({
96											left: meanCenter
97									});
98								}
99							}
100						};
101
102						var menuOn = false;

103						var meanMenuExist = false;
104
105
106						if (meanRevealPosition === "right") {
107								meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;";
108						}
109						if (meanRevealPosition === "left") {
110								meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;";
111						}
112						// run center function
113						meanCentered();
114
115						// set all styles for mean-reveal
116						var $navreveal = "";
117
118						var meanInner = function() {
119								// get last class name
120								if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) {
121										$navreveal.html(meanMenuClose);
122								} else {
123										$navreveal.html(meanMenuOpen);
124								}
125						};
126
127						// re-instate original nav (and call this on window.width functions)
128						var meanOriginal = function() {
129							jQuery('.mean-bar,.mean-push').remove();
130							jQuery(meanContainer).removeClass("mean-container");
131							jQuery(meanMenu).show();
132							menuOn = false;
133							meanMenuExist = false;
134							jQuery(removeElements).removeClass('mean-remove');
135						};
136
137						// navigation reveal
138						var showMeanMenu = function() {
139								var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
140								if (currentWidth <= meanScreenWidth) {
141								jQuery(removeElements).addClass('mean-remove');
142									meanMenuExist = true;
143									// add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container'
144									jQuery(meanContainer).addClass("mean-container");
145									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>');
146
147									//push meanMenu navigation into .mean-nav
148									var meanMenuContents = jQuery(meanMenu).html();
149									jQuery('.mean-nav').html(meanMenuContents);
150
151									// remove all classes from EVERYTHING inside meanmenu nav
152									if(meanRemoveAttrs) {
153										jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function() {
154											jQuery(this).removeAttr("class");
155											jQuery(this).removeAttr("id");
156										});
157									}
158
159									// push in a holder div (this can be used if removal of nav is causing layout issues)
160									jQuery(meanMenu).before('<div class="mean-push" />');
161									jQuery('.mean-push').css("margin-top",meanNavPush);
162
163									// hide current navigation and reveal mean nav link
164									jQuery(meanMenu).hide();
165									jQuery(".meanmenu-reveal").show();
166
167									// turn 'X' on or off
168									jQuery(meanRevealClass).html(meanMenuOpen);
169									$navreveal = jQuery(meanRevealClass);
170
171									//hide mean-nav ul
172									jQuery('.mean-nav ul').hide();
173
174									// hide sub nav
175									if(meanShowChildren) {
176											// allow expandable sub nav(s)
177											if(meanExpandableChildren){
178												jQuery('.mean-nav ul ul').each(function() {
179														if(jQuery(this).children().length){
180																jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');
181														}
182												});
183												jQuery('.mean-expand').on("click",function(e){
184														e.preventDefault();
185															if (jQuery(this).hasClass("mean-clicked")) {
186																	jQuery(this).text(meanExpand);
187																jQuery(this).prev('ul').slideUp(300, function(){});
188														} else {
189																jQuery(this).text(meanContract);
190																jQuery(this).prev('ul').slideDown(300, function(){});
191														}
192														jQuery(this).toggleClass("mean-clicked");
193												});
194											} else {
195													jQuery('.mean-nav ul ul').show();
196											}
197									} else {
198											jQuery('.mean-nav ul ul').hide();
199									}
200
201									// add last class to tidy up borders
202									jQuery('.mean-nav ul li').last().addClass('mean-last');
203									$navreveal.removeClass("meanclose");
204									jQuery($navreveal).click(function(e){
205										e.preventDefault();
206								if( menuOn === false ) {
207												$navreveal.css("text-align", "center");
208												$navreveal.css("text-indent", "0");
209												$navreveal.css("font-size", meanMenuCloseSize);
210												jQuery('.mean-nav ul:first').slideDown();
211												menuOn = true;
212										} else {
213											jQuery('.mean-nav ul:first').slideUp();
214											menuOn = false;

215										}
216											$navreveal.toggleClass("meanclose");
217											meanInner();
218											jQuery(removeElements).addClass('mean-remove');
219									});
220
221									// for one page websites, reset all variables...
222									if ( onePage ) {
223										jQuery('.mean-nav ul > li > a:first-child').on( "click" , function () {
224											jQuery('.mean-nav ul:first').slideUp();
225											menuOn = false;
226											jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen);
227										});
228									}
229							} else {
230								meanOriginal();
231							}
232						};
233
234						if (!isMobile) {
235								// reset menu on resize above meanScreenWidth
236								jQuery(window).resize(function () {
237										currentWidth = window.innerWidth || document.documentElement.clientWidth;
238										if (currentWidth > meanScreenWidth) {
239												meanOriginal();
240										} else {
241											meanOriginal();
242										}
243										if (currentWidth <= meanScreenWidth) {
244												showMeanMenu();
245												meanCentered();
246										} else {
247											meanOriginal();
248										}
249								});
250						}
251
252					jQuery(window).resize(function () {
253								// get browser width
254								currentWidth = window.innerWidth || document.documentElement.clientWidth;
255
256								if (!isMobile) {
257										meanOriginal();
258										if (currentWidth <= meanScreenWidth) {
259												showMeanMenu();
260												meanCentered();
261										}
262								} else {
263										meanCentered();
264										if (currentWidth <= meanScreenWidth) {
265												if (meanMenuExist === false) {
266														showMeanMenu();
267												}
268										} else {
269												meanOriginal();
270										}
271								}
272						});
273
274					// run main menuMenu function on load
275					showMeanMenu();
276				});
277		};
278})(jQuery);