https://fujigreenhotel.co.jp/js/jquery.mobile-menu.js

1/* Mobile Menu jQuery Plugin
2 *
3 * Creates a side nav bar that mimics the native IOS nav slide drawer
4 *
5 * Author: Nick Brewer
6 * Version: 0.5
7 *
8 * REQUIRES: jQuery
9 */
10
11var mobileApp = mobileApp || {};
12
13;(function(mobileApp,$){
14  var MobileMenu = function(elem, options){
15    this.elem = elem;
16    this.$elem = $(elem);
17    this.options = options;
18  };
19
20  MobileMenu.prototype = {
21    defaults: {
22      page_id: 'build-menu-page',
23      menu: '', // set as an array for multiple menus
24      menu_width: 260,
25      menu_id: "mobile-nav",
26      button_content: 'MENU',
27      prepend_button_to: '',
28      menu_bar: ''
29    },
30
31    /*
32     * Initiate app. Set Layout.
33     *
34     * @return this
35     */
36    init: function(){
37      var _this = this;
38      _this.config = $.extend({}, _this.defaults, _this.options);
39
40      if($(_this.config.menu_id).length === 0){
41        this.setLayout();
42      }
43
44      return _this;
45    },
46
47    /*
48     * Clone site navigation and set it as mobile nav, set Class on each new menu
49     *
50     * @return false if no menu option is provided
51     */
52
53    buildMenu: function(){
54      var _this = this;
55      _this.config = $.extend({}, _this.defaults, _this.options);
56      var menu = _this.config.menu,
57          mobile_menu = $("#build-menu"),
58          menu_collection = [];
59
60      // GET MENU AND BUILD MOBILE NAV
61      if(menu){
62        if($.isArray(menu)){
63          $(menu).each(function(i, e){
64            mobile_menu.append($(e).clone().addClass(_this.config.menu_id+"-"+i));
65            $(e).hide();
66          });
67        } else {
68          mobile_menu.append($(menu).clone().addClass(_this.config.menu_id+"-0").removeAttr("id"));
69          $(menu).hide();
70        }
71      } else {
72        return false;
73      }
74    },
75
76    /*
77     * Set CSS for new layout.
78     *
79     * @return void
80     */
81    setCSS: function(){
82      var _this = this;
83      _this.config = $.extend({}, _this.defaults, _this.options);
84
85      $("#build-menu-overlay").css({
86        position: "absolute",
87        top: 0,
88        bottom: 0,
89        right: 0,
90        left: 0,
91        "z-index": 99,
92        background: "#fff",
93        opacity: 0.5,
94        display: "none"
95      });
96
97      $("html,body").css("height","100%");
98
99      if(_this.config.menu_bar){
100        $(_this.config.menu_bar).css({
101          position: "fixed"
102        });
103      }
104
105      //$("<style />").appendTo("head").html('#'+_this.config.page_id+' { position: relative; min-height: 100% }');
106      //$("style").append('html.build-menu-open #'+_this.config.page_id+' { position: fixed; overflow: hidden; width: 100%; left: 0; top: 0; bottom: 0 }');
107    },
108
109    /*
110     * Set Layout, Build Menu, Set CSS. Set event handler for menu.
111     *
112     * @return void
113     */
114    setLayout: function(){
115      var _this = this;
116          _this.config = $.extend({}, _this.defaults, _this.options);
117
118      // If prepend_button_to is not set to something custom, then just prepend to the page setting
119      if(_this.config.prepend_button_to == ''){
120        var prepend_button_to = "#"+_this.config.page_id;
121      } else {
122        var prepend_button_to = _this.config.prepend_button_to;
123      }
124
125      // SET HTML FRAMEWORK
126      _this.$elem.wrapInner('<div id="'+_this.config.page_id+'" />').find("#"+_this.config.page_id).before('<div id="build-menu" />');
127      $(prepend_button_to).prepend('<a href="#" id="build-menu-button">'+_this.config.button_content+'</a>');
128      $("#"+_this.config.page_id).prepend('<div id="build-menu-overlay" />');
129
130      this.buildMenu();
131      this.setCSS();
132
133      var element = document.getElementById(_this.config.page_id);
134      element.addEventListener("oTransitionEnd", remove_animation_class,false);
135      element.addEventListener("transitionend", remove_animation_class,false);
136      element.addEventListener("webkitTransitionEnd", remove_animation_class,false);
137      element.addEventListener("MSTransitionEnd", remove_animation_class,false);
138
139      function remove_animation_class(){
140        if($("html").hasClass("build-menu-close")){
141          $("html").removeClass("build-menu-animating");
142        }
143      }
144
145      // EVENT HANDLER FOR MENU BUTTON
146      $("#build-menu-button, #build-menu-overlay").on("click", function(e){
147        e.preventDefault();
148        var html = $("html");
149        var page = $("#"+_this.config.page_id);

150        var overlay = $("#build-menu-overlay");
151
152        html.addClass("build-menu-animating");
153
154        if(html.hasClass("build-menu-open")){
155          html.removeClass("build-menu-open");
156          html.addClass("build-menu-close");
157
158          page.css({
159            "-webkit-transform": "translateX(0px)",
160            "-moz-transform": "translateX(0px)",
161            "-o-transform": "translateX(0px)",
162            "-ms-transform": "translateX(0px)",
163            "transform": "translateX(0px)"
164          });
165
166          overlay.fadeTo("slow",0, function(){
167            $(this).css("visibility", "hidden");
168          });
169        } else {
170          html.addClass("build-menu-open");
171          html.removeClass("build-menu-close");
172
173          page.css({
174            "-webkit-transform": "translateX(-"+_this.config.menu_width+"px"+")",
175            "-moz-transform": "translateX(-"+_this.config.menu_width+"px"+")",
176            "-o-transform": "translateX(-"+_this.config.menu_width+"px"+")",
177            "-ms-transform": "translateX(-"+_this.config.menu_width+"px"+")",
178            "transform": "translateX(-"+_this.config.menu_width+"px"+")"
179          });
180
181          overlay.css("visibility", "visible").fadeTo("slow",0.5);
182        }
183      });
184    }
185  };
186
187  MobileMenu.defaults = MobileMenu.prototype.defaults;
188
189  $.fn.mobile_menu = function(options) {
190    return this.each(function() {
191      new MobileMenu(this, options).init();
192    });
193  };
194
195  mobileApp.MobileMenu = MobileMenu;
196})(mobileApp,jQuery);