この記事では、コピペで作れるドロワーナビ(ハンバーガーメニュー)のテンプレートを紹介します。
ドロワーナビとは、以下のように「三」型のボタンをクリックすると上下左右の何からコンテンツが現れるUXデザインです。そこにメニューがあると「ドロワーメニュー」と言われます。スマホサイトでは多く採用されているデザインですので、今後の制作では必須の技術です。また別名で「ハンバーガーメニュー」と言われることが多いですので合わせて覚えておきましょう。
ドロワーナビ(ハンバーガーメニュー)を作る準備
今回紹介するドロワーナビ(ハンバーガーメニュー)の作り方は、以下のjQueryプラグインを使用します。
jQueryプラグイン「drawer」 ▶︎ https://git.blivesta.com/drawer/
使用するファイルは以下の2つだけです。
- drawer.min.js
- drawer.css
まずは「drawer.min.js」をダウンロードしてjsフォルダに入れて下さい。
次に「drawer.css」をcssフォルダの中に入れます。そしたら以下のように両者を読み込みます。
<!-- headタグ内に記述 -->
<link rel="stylesheet" href="/css/drawer.css">
<!-- footerに記述 -->
<script src="/js/drawer.min.js"></script>drawer.min.jsをCDNから読み込む場合は、footerに以下のように記述をしてjsを読み込みます。
<!-- footerに記述 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>これで準備は完了です。
ドロワーナビ(ハンバーガーメニュー)のテンプレート
以下のHTMLとScssはドロワーナビ(ハンバーガーメニュー)がテンプレートです。コピペしてご自身のサイト用に編集して下さい。
HTMLは以下。
<!-- グロナビ（ハンバーガーボタン） -->
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only"></span>
<span class="drawer-hamburger-icon"></span>
</button>
<!-- ここからナビゲーションの中身 -->
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<!-- HOME -->
<li>
<a class="drawer-menu-item first-menu" href="/">
<i class="fas fa-home"></i> HOME
</a>
</li>
<!-- メニュー1 -->
<li>
<a class="drawer-menu-item" href="/creators/">
<i class="fas fa-portrait"></I> メニュー1
</a>
</li>
<!-- メニュー2（ドロップダウン） -->
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#" data-toggle="dropdown">
<i class="fas fa-camera"></I> メニュー2
<span class="drawer-caret"></span>
</a>
<!-- メニュー2の中身 -->
<ul class="drawer-dropdown-menu">
<li>
<a class="drawer-dropdown-menu-item" href="/#2-1/">メニュー2-1</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#2-2/">メニュー2-2</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#2-3/">メニュー2-3</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#2-4/">メニュー2-4</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#2-5/">生物/メニュー2-5</a>
</li>
</ul>
</li>
<!-- メニュー3（ドロップダウン） -->
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#" data-toggle="dropdown">
<i class="fas fa-palette"></I> メニュー3
<span class="drawer-caret"></span>
</a>
<!-- メニュー3の中身 -->
<ul class="drawer-dropdown-menu">
<li>
<a class="drawer-dropdown-menu-item" href="/#3-1/">メニュー3-1</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#3-2/">メニュー3-2</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#3-3/">メニュー3-3ン</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#3-4/">メニュー3-4</a>
</li>
</ul>
</li>
<!-- メニュー4 -->
<li>
<a class="drawer-menu-item" href="/#4/">
<i class="fas fa-pencil-alt"></i> メニュー4
</a>
</li>
<!-- メニュー5（ドロップダウン） -->
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#" data-toggle="dropdown">
<i class="fas fa-envelope"></i> メニュー5
<span class="drawer-caret"></span>
</a>
<!-- メニュー5の中身 -->
<ul class="drawer-dropdown-menu">
<li>
<a class="drawer-dropdown-menu-item" href="/#5-1/">メニュー5-1</a>
</li>
<li>
<a class="drawer-dropdown-menu-item" href="/#5-2/">メニュー5-2</a>
</li>
</ul>
</li>
<!-- SNS -->
<ul class="snsbtniti side-sns">
<li>
<a href="https://twitter.com/#" class="flowbtn">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/#/" class="flowbtn">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</ul>
</nav>Scssは以下。
// グロナビ
.drawer-menu-item , .drawer-dropdown-menu-item {
&:hover {
color: #ec6800;
text-decoration: none;
}
}
.drawer-nav{
.drawer-menu{
overflow: auto;
padding: 0 5px 5em 5px;
}
li {
border-bottom: solid #ddd 1px;
}
.first-menu {
border-top: solid #ddd 1px;
}
.drawer-dropdown-menu{
li {
&:first-child {
border-top: solid #ddd 1px;
}
&:last-child {
border-bottom: solid #fff 1px;
}
}
}
.side-sns {
li {
border-bottom: solid #fff 1px;
}
}
.menu-menu-1-container {
ul {
li {
border-bottom: solid #fff 1px;
}
}
}
}
}Scssが分からない人向けにCSSの場合も記載しておきます↓
.drawer-menu-item:hover, .drawer-dropdown-menu-item:hover {
color: #ec6800;
text-decoration: none;
}
.drawer-nav .drawer-menu {
overflow: auto;
padding: 0 5px 5em 5px;
}
.drawer-nav .drawer-menu li {
border-bottom: solid #ddd 1px;
}
.drawer-nav .drawer-menu .first-menu {
border-top: solid #ddd 1px;
}
.drawer-nav .drawer-menu .drawer-dropdown-menu li:first-child {
border-top: solid #ddd 1px;
}
.drawer-nav .drawer-menu .drawer-dropdown-menu li:last-child {
border-bottom: solid #fff 1px;
}
.drawer-nav .drawer-menu .side-sns li {
border-bottom: solid #fff 1px;
}
.drawer-nav .drawer-menu .menu-menu-1-container ul li {
border-bottom: solid #fff 1px;
}ルールは簡単です。「drawer-menu」のクラスが付いた「ul」タグの中に「li」タグで囲った「drawer-dropdown-menu-item」のクラスが付いた「a」タグがあればメニューになります。また「drawer-dropdown」のクラスをつけるとドロップダウンになります。
*アイコンを使用する場合はFontAwesomeの読み込みを行って下さい。詳しくはこちらを参照ください。
以上が「横からスライドするドロワーメニュー(ハンバーガーメニュー)のテンプレート」でした。
非常に簡単に出来るので是非試してみて下さい。
