質問編集履歴

jsとhtmlの追記

2017/05/07 03:22

投稿

yoshimitsu41

スコア36

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -26,6 +26,36 @@
 ```html
+  <body class="drawer drawer--right">
+  <header role="banner">
+    <button type="button" class="drawer-toggle drawer-hamburger">
+      <span class="sr-only">toggle navigation</span>
+      <span class="drawer-hamburger-icon"></span>
+    </button>
+    <nav class="drawer-nav" role="navigation">
+      <ul class="drawer-menu">
+        <li><a class="drawer-menu-item" href="/"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
+        <li><a class="drawer-menu-item" href=""><i class="fa fa-sign-in" aria-hidden="true"></i>お問合わせ</a></li>
+      </ul>
+    </nav>
+  </header>
       <div class="search">
         <div class="container">
@@ -128,4 +158,406 @@
+<script type="text/javascript">
+$(document).ready(function() {
+$('.drawer').drawer({
+  class: {
+    navClass: 'drawer-nav',
+    toggle: 'drawer-toggle',
+    overlay: 'drawer-overlay',
+    open: 'drawer-open',
+    close: 'drawer-close',
+    dropdown: 'drawer-dropdown'
+  }});
+});
+</script>
 ```
+```javascript
+/*!
+ * jquery-drawer v3.2.2
+ * Flexible drawer menu using jQuery, iScroll and CSS.
+ * http://git.blivesta.com/drawer
+ * License : MIT
+ * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
+ */
+;(function umd(factory) {
+  'use strict';
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    module.exports = factory(require('jquery'));
+  } else {
+    factory(jQuery);
+  }
+}(function Drawer($) {
+  'use strict';
+  var namespace = 'drawer';
+  var touches = typeof document.ontouchstart != 'undefined';
+  var __ = {
+    init: function init(options) {
+      options = $.extend({
+        iscroll: {
+          mouseWheel: true,
+          preventDefault: false
+        },
+        showOverlay: true
+      }, options);
+      __.settings = {
+        state: false,
+        events: {
+          opened: 'drawer.opened',
+          closed: 'drawer.closed'
+        },
+        dropdownEvents: {
+          opened: 'shown.bs.dropdown',
+          closed: 'hidden.bs.dropdown'
+        }
+      };
+      __.settings.class = $.extend({
+        nav: 'drawer-nav',
+        toggle: 'drawer-toggle',
+        overlay: 'drawer-overlay',
+        open: 'drawer-open',
+        close: 'drawer-close',
+        dropdown: 'drawer-dropdown'
+      }, options.class);
+      return this.each(function instantiateDrawer() {
+        var _this = this;
+        var $this = $(this);
+        var data = $this.data(namespace);
+        if (!data) {
+          options = $.extend({}, options);
+          $this.data(namespace, { options: options });
+          __.refresh.call(_this);
+          if (options.showOverlay) {
+            __.addOverlay.call(_this);
+          }
+          $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
+            __.toggle.call(_this);
+            return _this.iScroll.refresh();
+          });
+          $(window).on('resize.' + namespace, function close() {
+            __.close.call(_this);
+            return _this.iScroll.refresh();
+          });
+          $('.' + __.settings.class.dropdown)
+            .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
+              return _this.iScroll.refresh();
+            });
+        }
+      }); // end each
+    },
+    refresh: function refresh() {
+      this.iScroll = new IScroll(
+        '.' + __.settings.class.nav,
+        $(this).data(namespace).options.iscroll
+      );
+    },
+    addOverlay: function addOverlay() {
+      var $this = $(this);
+      var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
+      return $this.append($overlay);
+    },
+    toggle: function toggle() {
+      var _this = this;
+      if (__.settings.state) {
+        return __.close.call(_this);
+      } else {
+        return __.open.call(_this);
+      }
+    },
+    open: function open() {
+      var $this = $(this);
+      if (touches) {
+        $this.on('touchmove.' + namespace, function disableTouch(event) {
+          event.preventDefault();
+        });
+      }
+      return $this
+        .removeClass(__.settings.class.close)
+        .addClass(__.settings.class.open)
+        .drawerCallback(function triggerOpenedListeners() {
+          __.settings.state = true;
+          $this.trigger(__.settings.events.opened);
+        });
+    },
+    close: function close() {
+      var $this = $(this);
+      if (touches) $this.off('touchmove.' + namespace);
+      return $this
+        .removeClass(__.settings.class.open)
+        .addClass(__.settings.class.close)
+        .drawerCallback(function triggerClosedListeners() {
+          __.settings.state = false;
+          $this.trigger(__.settings.events.closed);
+        });
+    },
+    destroy: function destroy() {
+      return this.each(function destroyEach() {
+        var _this = this;
+        var $this = $(this);
+        $('.' + __.settings.class.toggle).off('click.' + namespace);
+        $(window).off('resize.' + namespace);
+        $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
+        _this.iScroll.destroy();
+        $this
+          .removeData(namespace)
+          .find('.' + __.settings.class.overlay)
+          .remove();
+      });
+    }
+  };
+  $.fn.drawerCallback = function drawerCallback(callback) {
+    var end = 'transitionend webkitTransitionEnd';
+    return this.each(function setAnimationEndHandler() {
+      var $this = $(this);
+      $this.on(end, function invokeCallbackOnAnimationEnd() {
+        $this.off(end);
+        return callback.call(this);
+      });
+    });
+  };
+  $.fn.drawer = function drawer(method) {
+    if (__[method]) {
+      return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    } else if (typeof method === 'object' || !method) {
+      return __.init.apply(this, arguments);
+    } else {
+      $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
+    }
+  };
+}));
+```