左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」

27.08.17 03:35 | コメント(0)

左右から表示させるハンバーガーメニューJavaScript

レスポンシブサイトが多くなって来ましたが、グローバルメニューは色々な方法があります。
レスポンシブサイトで対応する場合、PC用とスマートフォン用のグローバルメニューの見せ方はこだわりたいところです。
グローバルメニューをどう見せるかでデザイン性が見えてくるWebサイトですが、メニューを出来る限り見易くする事が最も重要です。
色々なWebサイトを見るとグローバルメニューが左から表示されるメニューや右から表示されるメニュー「drawer」jQueryがあります。
今回は左右から表示させるハンバーガーメニューを表示する「drawer」jQueryの作成方法をご紹介したいと思います。

サンプルページ

左右から表示させるハンバーガーメニュー jQuery サンプルページはこちら

 1. 「jQuery」プラグインをダウンロード
 2. ヘッダーの記載
 3. 「html」「css」「JavaScript」ファイルの作成

「jQuery」プラグインをダウンロード

▼「jquery.js」「drawer.js」「iscroll.js」「drawer.css」ファイル
doubletaptogo.jsダウンロード

ヘッダーの記載

まず最初に「drawer.js」ファイルを読み込む「JavaScript」ファイルへの読み込みコードをヘッダーへ記載しましょう。

【ヘッダーに記述】
<head>
<meta charset="UTF-8">
<title>左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」|WEBデザイナー 【キングサイト】</title>
<meta name="description" content="左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」のご紹介を致します。">
<meta name="keywords" content="レスポンシブ,slick,slick.js,スライダー,jQuery">
<meta name="robots" content="all">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/sample/027/base.css" media="all" />
<link rel="stylesheet" href="/sample/027/drawer.css" />
<!--グローバル-->
<script src="/sample/027/jquery.js"></script>
<script src="/sample/027/iscroll.js"></script>
<script src="/sample/027/drawer.js"></script>
<script>
    $(document).ready(function() {
      $(".drawer").drawer();
    });
</script>
</head>

「html」「css」「JavaScript」ファイルの作成

次にスライダー表示用のソースコードを作成します。
【htmlファイルに記述】
※index.htmlにコードを記載します。
<!-- header -->
<header role="banner" class="global-header">
<div class="assist-nav">
<ul>
<li class="home">
<a href="http://www.kingsite.jp/"><big>WEBデザイナーブログ</big><small>ウェブデザイナーのお仕事</small></a>
</li>
</ul>
</div>
<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">
<div class="drawer-menu">
<ul>
<li><a href="">グローバルメニュー01</a></li>
<li><a href="">グローバルメニュー02</a></li>
<li><a href="">グローバルメニュー03</a></li>
<li><a href="">グローバルメニュー04</a></li>
<li><a href="">グローバルメニュー05</a></li>
<li><a href="">グローバルメニュー06</a></li>
<li><a href="">グローバルメニュー07</a></li>
</ul>
</div>
<div class="drawer-menu-sub">
<ul>
<li><a href="">お問い合わせ</a></li>
<li><a href="">03-000-0000<small>(通話無料)</small></a></li>
</ul>
</div>
</nav>
</header>
<!-- header end -->

【cssファイルに記述】
※drawer.cssにコードを記載します。

.global-header {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: transparent;
    transition: all .8s ease;
	background-color: rgba(255,255,255,0.8);
	border-bottom:1px solid #CCC;
}
.global-header .assist-nav {
    padding: 0 1.5em;
}
.global-header .assist-nav ul {
    padding: 0;
    margin: 0;
}
.global-header .assist-nav ul li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
}
.global-header .assist-nav ul li a {
    color: #333;
    text-decoration: none;
}
.global-header .assist-nav ul li a span {
    vertical-align: top;
}
.global-header .assist-nav ul li .translate {
    margin-left: 1em;
}
.global-header .assist-nav ul li .translate ul li {
    display: block;
    text-align: center;
}
.global-header .assist-nav ul li .translate ul li:not(:last-child) {
    border-bottom: 1px solid #333;
}
.global-header .assist-nav ul li .translate ul li:not(:last-child) a {
    line-height: 1em;
}
.global-header .assist-nav ul li .translate span {
    display: none;
}
.global-header .assist-nav ul .home a {
    line-height:60px;
    position: relative;
}
.global-header .assist-nav ul .home a strong {
    font-weight: 400;
}
.global-header .assist-nav ul .home a small {
    display: inline-block;
    position: relative;
    bottom: .05em;
    left: 0;
    margin-left: .25em;
}
.drawer-open {
    overflow: hidden!important;
}
.drawer-nav {
    position: fixed;
    z-index: 2;
    top: 0;
    overflow: hidden;
    width: 280px;
    height: 100%;
    color: #222;
    background-color: #fff;
}
.drawer-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.drawer-menu ul{
	width:100%;
	border-top:1px solid #CCC;
}
.drawer-menu ul li{
	font-size:90%;
	border-bottom:1px solid #CCC;
}
.drawer-menu ul li a{
	display:block;
	padding:5%;
}
.drawer-menu-sub {
    margin: 0;
    padding: 0;
    list-style: none;
}
.drawer-menu-sub ul{
	width:100%;
}
.drawer-menu-sub ul li{
	font-size:90%;
	border-bottom:1px solid #CCC;
	background-color:#5ac2a0;
}
.drawer-menu-sub ul li a{
	color:#FFF;
	display:block;
	padding:5%;
}
.drawer-overlay {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.2);
}
.drawer-open .drawer-overlay {
    display: block;
}
.drawer--top .drawer-nav {
    top: -100%;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    -webkit-transition: top 0.6s cubic-bezier(.19,1,.22,1);
    transition: top 0.6s cubic-bezier(.19,1,.22,1);
}
.drawer--top.drawer-open .drawer-nav {
    top: 0;
}
.drawer--top .drawer-hamburger,
.drawer--top.drawer-open .drawer-hamburger {
    right: 0;
}
.drawer--left .drawer-nav {
    left: -280px;
    -webkit-transition: left 0.6s cubic-bezier(.19,1,.22,1);
    transition: left 0.6s cubic-bezier(.19,1,.22,1);
}
.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-nav,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
    left: 0;
}
.drawer--left.drawer-open .drawer-hamburger {
    left: 280px;
}
.drawer--right .drawer-nav {
    right: -280px;
    -webkit-transition: right 0.6s cubic-bezier(.19,1,.22,1);
    transition: right 0.6s cubic-bezier(.19,1,.22,1);
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
    right: 0;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: 280px;
}
.drawer-hamburger {
    position: fixed;
    z-index: 4;
    top: 0;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    padding: 18px 0.75rem 30px;
    -webkit-transition: all 0.6s cubic-bezier(.19,1,.22,1);
    transition: all 0.6s cubic-bezier(.19,1,.22,1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    border: 0;
    outline: 0;
    background-color: transparent;
}
.drawer-hamburger:hover {
    cursor: pointer;
    background-color: transparent;
}
.drawer-hamburger-icon {
    position: relative;
    display: block;
    margin-top: 10px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    width: 100%;
    height: 2px;
    -webkit-transition: all 0.6s cubic-bezier(.19,1,.22,1);
    transition: all 0.6s cubic-bezier(.19,1,.22,1);
    background-color: #222;
}
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
    position: absolute;
    top: -10px;
    left: 0;
    content: " ";
}
.drawer-hamburger-icon:after {
    top: 10px;
}
.drawer-open .drawer-hamburger-icon {
    background-color: transparent;
}
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
    top: 0;
}
.drawer-open .drawer-hamburger-icon:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.drawer-open .drawer-hamburger-icon:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
    margin: 0;
}
.drawer--sidebar,
.drawer--sidebar .drawer-contents {
    background-color: #fff;
}
@media screen and (max-width:767px) {
.global-header .assist-nav ul .home a small {
	display:none;
}
.drawer-menu ul li a{
	display:block;
	padding:1% 5% 1% 5%;
}
.drawer-menu-sub ul li a{
	color:#FFF;
	display:block;
	padding:1% 5% 1% 5%;
}
}
@media (min-width:64em) {
    .drawer--sidebar .drawer-hamburger {
        display: none;
        visibility: hidden;
    }
    .drawer--sidebar .drawer-nav {
        display: block;
        -webkit-transform: none;
        transform: none;
        position: fixed;
        width: 12.5rem;
        height: 100%;
    }
    .drawer--sidebar.drawer--left .drawer-nav {
        left: 0;
        border-right: 1px solid #ddd;
    }
    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 12.5rem;
    }
    .drawer--sidebar.drawer--right .drawer-nav {
        right: 0;
        border-left: 1px solid #ddd;
    }
    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 12.5rem;
    }
    .drawer--sidebar .drawer-container {
        max-width: 48rem;
    }
}
@media (min-width:75em) {
    .drawer--sidebar .drawer-nav {
        width: 16.25rem;
    }
    .drawer--sidebar.drawer--left .drawer-contents {
        margin-left: 16.25rem;
    }
    .drawer--sidebar.drawer--right .drawer-contents {
        margin-right: 16.25rem;
    }
    .drawer--sidebar .drawer-container {
        max-width: 60rem;
    }
}
.drawer--navbarTopGutter {
    padding-top: 3.75rem;
}
.drawer-navbar .drawer-navbar-header {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}
.drawer-navbar {
    z-index: 3;
    top: 0;
    width: 100%;
}
.drawer-navbar--fixed {
    position: fixed;
}
.drawer-navbar-header {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 100%;
    height: 3.75rem;
    padding: 0 0.75rem;
    text-align: center;
}
.drawer-navbar .drawer-brand {
    line-height: 3.75rem;
    display: inline-block;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
}
.drawer-navbar .drawer-brand:hover {
    background-color: transparent;
}
.drawer-navbar .drawer-nav {
    padding-top: 3.75rem;
}
.drawer-navbar .drawer-menu {
    padding-bottom: 7.5rem;
}
@media (min-width:64em) {
    .drawer-navbar {
        height: 3.75rem;
        border-bottom: 1px solid #ddd;
        background-color: #fff;
    }
    .drawer-navbar .drawer-navbar-header {
        position: relative;
        display: block;
        float: left;
        width: auto;
        padding: 0;
        border: 0;
    }
    .drawer-navbar .drawer-menu--right {
        float: right;
    }
    .drawer-navbar .drawer-menu li {
        float: left;
    }
    .drawer-navbar .drawer-menu-item {
        line-height: 3.75rem;
        padding-top: 0;
        padding-bottom: 0;
    }
    .drawer-navbar .drawer-hamburger {
        display: none;
    }
    .drawer-navbar .drawer-nav {
        position: relative;
        left: 0;
        overflow: visible;
        width: auto;
        height: 3.75rem;
        padding-top: 0;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .drawer-navbar .drawer-menu {
        padding: 0;
    }
    .drawer-navbar .drawer-dropdown-menu {
        position: absolute;
        width: 16.25rem;
        border: 1px solid #ddd;
    }
    .drawer-navbar .drawer-dropdown-menu-item {
        padding-left: 0.75rem;
    }
}
.drawer-dropdown-menu {
    display: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}
.drawer-dropdown-menu > li {
    width: 100%;
    list-style: none;
}
.drawer-dropdown-menu-item {
    line-height: 3.75rem;
    display: block;
    padding: 0 0.75rem 0 1.5rem;
    text-decoration: none;
    color: #222;
}
.drawer-dropdown-menu-item:hover {
    text-decoration: underline;
    color: #555;
    background-color: transparent;
}
.drawer-dropdown.open > .drawer-dropdown-menu {
    display: block;
}
.drawer-dropdown .drawer-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    -webkit-transition: opacity 0.2s ease,-webkit-transform 0.2s ease;
    transition: opacity 0.2s ease,-webkit-transform 0.2s ease;
    transition: transform 0.2s ease,opacity 0.2s ease;
    transition: transform 0.2s ease,opacity 0.2s ease,-webkit-transform 0.2s ease;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.drawer-dropdown.open .drawer-caret {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.drawer-container {
    margin-right: auto;
    margin-left: auto;
}
@media (min-width:64em) {
    .drawer-container {
        max-width: 60rem;
    }
}
@media (min-width:75em) {
    .drawer-container {
        max-width: 70rem;
    }
}

【JavaScriptファイルに記述】
※drawer.jsにコードを記載します。
/*!
 * jquery-drawer v3.2.2
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta  (http://blivesta.com/)
 */

!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){"use strict";var t=void 0!==document.ontouchstart,s={init:function(t){return t=e.extend({iscroll:{mouseWheel:!0,preventDefault:!1},showOverlay:!0},t),s.settings={state:!1,events:{opened:"drawer.opened",closed:"drawer.closed"},dropdownEvents:{opened:"shown.bs.dropdown",closed:"hidden.bs.dropdown"}},s.settings.class=e.extend({nav:"drawer-nav",toggle:"drawer-toggle",overlay:"drawer-overlay",open:"drawer-open",close:"drawer-close",dropdown:"drawer-dropdown"},t.class),this.each(function(){var n=this,r=e(this);r.data("drawer")||(t=e.extend({},t),r.data("drawer",{options:t}),s.refresh.call(n),t.showOverlay&&s.addOverlay.call(n),e("."+s.settings.class.toggle).on("click.drawer",function(){return s.toggle.call(n),n.iScroll.refresh()}),e(window).on("resize.drawer",function(){return s.close.call(n),n.iScroll.refresh()}),e("."+s.settings.class.dropdown).on(s.settings.dropdownEvents.opened+" "+s.settings.dropdownEvents.closed,function(){return n.iScroll.refresh()}))})},refresh:function(){this.iScroll=new IScroll("."+s.settings.class.nav,e(this).data("drawer").options.iscroll)},addOverlay:function(){var t=e(this),n=e("
").addClass(s.settings.class.overlay+" "+s.settings.class.toggle);return t.append(n)},toggle:function(){var e=this;return s.settings.state?s.close.call(e):s.open.call(e)},open:function(){var n=e(this);return t&&n.on("touchmove.drawer",function(e){e.preventDefault()}),n.removeClass(s.settings.class.close).addClass(s.settings.class.open).drawerCallback(function(){s.settings.state=!0,n.trigger(s.settings.events.opened)})},close:function(){var n=e(this);return t&&n.off("touchmove.drawer"),n.removeClass(s.settings.class.open).addClass(s.settings.class.close).drawerCallback(function(){s.settings.state=!1,n.trigger(s.settings.events.closed)})},destroy:function(){return this.each(function(){var t=this,n=e(this);e("."+s.settings.class.toggle).off("click.drawer"),e(window).off("resize.drawer"),e("."+s.settings.class.dropdown).off(s.settings.dropdownEvents.opened+" "+s.settings.dropdownEvents.closed),t.iScroll.destroy(),n.removeData("drawer").find("."+s.settings.class.overlay).remove()})}};e.fn.drawerCallback=function(t){var s="transitionend webkitTransitionEnd";return this.each(function(){var n=e(this);n.on(s,function(){return n.off(s),t.call(this)})})},e.fn.drawer=function(t){return s[t]?s[t].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof t&&t?void e.error("Method "+t+" does not exist on jQuery.drawer"):s.init.apply(this,arguments)}});

以上で左右から表示させるハンバーガーメニューを表示するレスポンシブドロワーメニュー jQuery「drawer.js」を設置する方法になります。
カテゴリ:CSS3, HTML5, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術, ホームページ(WEB)制作と作成方法, 使えるjQueryとJavaScript

Facebookでコメントする

コメントする

おすすめの記事

Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

PAGE TOP