jQuery

【レスポンシブ】スマホのドロワーメニューをHiraku.jsで実装【jQuery】

スマホ表示したときに、ハンバーガーメニューをクリックしたらニョキッと出てくるメニューのことです。

レスポンシブ対応されているサイトを見ると、よく実装されているので、必ず覚えておきましょう。

 

今回は、jQueryのプラグインHiraku.jsを使いました。

参考サイト

Hiraku.js実装の流れ

Hiraku.jsでドロワーメニューを実装するのはとても簡単。

手順としては以下の通りです。

 

  1. Hiraku.jsのダウンロード
  2. ファイルの読み込み
  3. HTMLのマークアップ
  4. CSSで調整

 

 

Hiraku.jsのダウンロード

Hiraku.jsのファイルを公式サイトからダウンロードします。

hiraku.js

hiraku.css

この二つのファイルがあればオッケーです。

ダウンロードしたフォルダから、作業フォルダに移動しておきましょう。

 

ファイルの読み込み

読み込みコードは

hiraki.css

jQueryCDN

hiraki.js

をそれぞれ記述していきます。(jQueryは最新版でも動作確認しました。)

 

<link rel="stylesheet" type="text/css" href=“css/hiraku.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src=“js/hiraku.js"></script>

 

→jQueryを先に読み込むこと

 

HTMLのマークアップ

マークアップする前に、ドロワーのデモを確認してみましょう。

Hirakuの公式サイトには、デモが用意されていまして、そのデモのHTMLソースをそのままコピーするだけも実装できてしまいます。

 

 

ただ、デザインに応じて色々と変更しないといけないので、今回は、以下の条件で変更していきたいと思います。

 

  • 右寄せのナビバー
  • ナビバーは固定
  • スマホ時にハンバーガーメニューへ切り替え

 

 

<button class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1">
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
  <span class="hiraku-open-btn-line"></span>
</button>
<div class="offcanvas-right">
  <ul><li>hogehoge</li></ul>
</div>

 

公式サイトからコピーしたコードがこちらです。

 

id=”offcanvas-btn-right”

class=”offcanvas-right”

このidとクラス名を変更することで、右寄せと左寄せを変更できます。

right→右寄せ

left→左寄せ

 

javascriptも公式サイトからコピーします。

 

$(".offcanvas-left").hiraku({

    btn:"#offcanvas-btn-left",

    direction:"left"

});

 

この部分も、leftとなっていれば左寄せになります。

今回は右寄せにしたいのでrightに変更します。

 

 

CSSで調整

このままでも使えるのですが、ちょっとだけデザインを修正する必要があります。

まず、HTMLコードをそのままコピーして、デベロッパーツールでどんなスタイルが当てられているかを確認します。

デベロッパーツールって本当便利です。

hiraki.cssのスタイルを直接編集し、上書きしていきます。

 

HTMLとCSSのソースはこちら

 

 HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/hiraku.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Noto+Sans+JP:400,700&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="js/hiraku.js"></script>
<title>The Company</title>
</head>

<body>
<header class="header" id="header">
  <div class="inner header__inner">
    <div class="header__logo__block">
      <img src="img/logo.png" class="header__logo">
    </div> 
    <!-- ハンバーガーボタン -->
    <button class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1">
      <span class="hiraku-open-btn-line"></span>
    </button>
    <nav class="header__nav">
      <ul class="header__nav__list">
        <li class="header__nav__list__item"><a href="#"class="header__nav__list__item--link">Card</a></li>
        <li class="header__nav__list__item"><a href="#"class="header__nav__list__item--link">News</a></li>
        <li class="header__nav__list__item"><a href="#"class="header__nav__list__item--link">Price</a></li>
        <li class="header__nav__list__item"><a href="#"class="header__nav__list__item--link">Access</a></li>
        <li class="header__nav__list__item"><a href="#"class="header__nav__list__item--link">Contact</a></li>
      </ul>
    </nav>
    <!-- ドロワーメニュー -->
    <nav class="offcanvas-right">
      <ul>
        <li><a href="#">Card<img src="img/arrow-b.svg" class="arrow"></a></li>
        <li><a href="#">News<img src="img/arrow-b.svg" class="arrow"></a></li>
        <li><a href="#">Price<img src="img/arrow-b.svg" class="arrow"></a></li>
        <li><a href="#">Access<img src="img/arrow-b.svg" class="arrow"></a></li>
        <li><a href="#">Contact<img src="img/arrow-b.svg" class="arrow"></a></li>
      </ul>
    </nav>
  </div>
</header> 

<!-- hiraku --> 
<script>
$(".offcanvas-right").hiraku({
btn:"#offcanvas-btn-right",direction:"right"
});
</script>
</body>
</html>

 

 CSS

.hiraku-open-btn {
  display: none; 
} 
@media screen and (max-width: 1179px) {
  .hiraku-open-btn {
   display: block;   
 } 
} 
.offcanvas-right ul li {
  padding: 15px 0 15px 20px;
  font: size 16px;
  border-bottom: 1px dotted #707070;
  position: relative;
} 
.offcanvas-right ul li a {
  text-decoration: none;
  color: #707070;
} 
.offcanvas-right ul li a .arrow {
  position: absolute;
  right: 21px;
  top: 21px;
    }

PC画面のナビゲーションメニューは、タブレット表示にすると非表示になる設定にしてあります。

.hiraku-open-btndisplay:none;を指定してないと、PC表示の時にもハンバーガーアイコンが表示されてしまいます。タブレット、スマホ時のみ表示するため、標準は非表示にしました。

 

 

hiraku.cssを編集するにはとりあえずここを見る

あとは、ドロワー内のスタイルを整えるだけ。

 

hiraki.cssの修正部分はごくわずかですが、

.js-hiraku-offcanvas-active     background: rgba(0, 0, 0, .3);を上書きすれば、ドロワー表示時のバックが変更できます。

 

以下のコードで、ハンバーガーアイコンが作られていますので、

大きさや位置を変えたい場合はここをいじる。

.hiraku-open-btn-line {
    position: relative;
    display: block;
    width: 28px;
    height: 4px;
    margin: 6px 0;
    transition: .1s all;
    border-radius: 1px;
    background-color: #fff;
} 
.hiraku-open-btn-line:before,
.hiraku-open-btn-line:after {
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    content: '';
    transition: .3s all;
    border-radius: 1px;
    background-color: #fff;
    z-index: 100002;
}

 

 

ドロワーメニュー展開時、ハンバーガーアイコンから×アイコンに変わります。

×アイコンの位置や大きさはこちらから変更します。

 

[aria-expanded='true'] .hiraku-open-btn-line {
    background-color: transparent;
}
[aria-expanded='true'] .hiraku-open-btn-line:before,
[aria-expanded='true'] .hiraku-open-btn-line:after {
    width: 28px;
}
[aria-expanded='true'] .hiraku-open-btn-line:before {
    -ms-transform: translate(-3px, 7px) rotate(45deg);
    transform: translate(-3px, 7px) rotate(45deg);
    top: -24px;
}
[aria-expanded='true'] .hiraku-open-btn-line:after {
    -ms-transform: translate(-3px, -11px) rotate(-45deg);
    transform: translate(-3px, -11px) rotate(-45deg);
    top: -6px;
}

 

 

 

デベロッパーツールをみながら修正を重ねると完成!

 

 

ぬるっとドロワーが表示されて、かっこいいですね。

結論は、デベロッパーツール最強です。ググりつつ、デベロッパーツールを駆使すれば、静的サイトであればどんどん作れそうですね。

Drawer.jsというライブラリも簡単に実装できるようですので、今度試してみたいと思います。