まりぞーです(∩°ω°∩)
PCのときは横並びのレイアウトで、モバイル端末など画面が小さい場合はぬるりと動くハンバーガーに格納されるjQueryでレスポンシブなメニューを作ってみました。
以前作成した初心者向けのアコーディオンメニューはこちらです。
初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方
今回もデモを用意しました。
ご確認ください。
目次
目次
ハンバーガーメニュー
概要
ハンバーガーの構造は下記のようになります。また、上記のアニメーションのように静止したメニューではなく、にゅーっと動いてかっこいいインパクトを与えます。
- aタグの中に空のspanを3つ用意し3本の線にする
- jQueryでclassを制御
- CSSで見た目を調整
- ボタンの次に来る要素を格納する
HTML
<p class="btn_hamburger"> <a href="#"> <span></span> <span></span> <span></span> </a> </p>
jQuery
$(function() {
var activeClass = 'active';
function hamburgBtn() {
$('.btn_hamburger').on('click', function(event) {
$button = $(this);
event.preventDefault();
$button.find('a').toggleClass(activeClass);
$button.next().slideToggle(250);
});
};
});
hamburgBtn();
CSS
.btn_hamburger {
margin: 0 auto 2em !important;
width: 40px;
}
.btn_hamburger a {
position: relative;
display: block;
height: 30px;
-webkit-transition: all .4s;
transition: all .4s;
box-sizing: border-box;
}
.btn_hamburger span {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 2px;
background-color: #161b1d;
border-radius: 2px;
-webkit-transition: all .4s;
transition: all .4s;
box-sizing: border-box;
}
.btn_hamburger span:nth-of-type(1) {
top: 0;
}
.btn_hamburger span:nth-of-type(2) {
top: 14px;
}
.btn_hamburger span:nth-of-type(3) {
bottom: 0;
}
.btn_hamburger span:nth-of-type(2)::after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 2px;
background-color: #161b1d;
border-radius: 2px;
-webkit-transition: all .4s;
transition: all .4s;
}
.btn_hamburger .active span:nth-of-type(2) {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.btn_hamburger .active span:nth-of-type(2)::after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.btn_hamburger .active span:nth-of-type(1) {
-webkit-transform: translateY(20px) scale(0);
-ms-transform: translateY(20px) scale(0);
transform: translateY(20px) scale(0);
}
.btn_hamburger .active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) scale(0);
-ms-transform: translateY(-20px) scale(0);
transform: translateY(-20px) scale(0);
}
DEMO 1 : アコーディオンメニュー
概要
- 画面幅が広いときは横並びのレイアウトに、狭いときは縦並びのレイアウトにしてハンバーガーの中へ格納される可変レイアウトにする
- jQueryはclassの切り替えと.slideToggle()の処理程度に留め、CSSを調整して切り替えを演出する。
HTML
<p class="btn_hamburger"> <a href="#"> <span></span> <span></span> <span></span> </a> </p> <section id="demo1" class="section_demo section_demo1"> <ul class="section_demo_list"> <li> <h3 class="trigger"><a href="#">CATEGORY 1</a></h3> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> <li><a href="#">ITEM 1-3</a></li> <li><a href="#">ITEM 1-4</a></li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 2</a></h3> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 3</a></h3> <div class="target"> <ul> <li><a href="#">ITEM 3-1</a></li> <li><a href="#">ITEM 3-2</a></li> <li><a href="#">ITEM 3-3</a></li> <li><a href="#">ITEM 3-4</a></li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 4</a></h3> <div class="target"> <ul> <li><a href="#">ITEM 4-1</a></li> <li><a href="#">ITEM 4-2</a></li> </ul> </div> </li> </ul> </section>
jQuery
$(function() {
function demo1_2(triggerSelector) {
// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
$(triggerSelector).on('click', function(event) {
$trigger = $(triggerSelector);
event.preventDefault();
$(this).toggleClass(activeClass);
$(this).next().slideToggle(250);
});
};
// 引数でトリガーを指定
demo1_2('#demo1 .trigger');
demo1_2('#demo2 .trigger');
});
DEMO 2 : 多階層アコーディオンメニュー
概要
何かしらのナビゲーションで7つ以上の選択肢があるととにかく戦慄しますが、多階層のアコーディオンメニューにも対応してみます。
だいたいDEMO01と同様。項目は多くしないこと。
HTML
<p class="btn_hamburger"> <a href="#"> <span></span> <span></span> <span></span> </a> </p> <section id="demo2" class="section_demo section_demo2"> <ul class="section_demo_list"> <li> <h3 class="trigger"><a href="#">CATEGORY 1</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> <li><a href="#">ITEM 1-3</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 3</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 3-1</a></li> <li><a href="#">ITEM 3-2</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 2</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 3</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 3-1</a></li> <li><a href="#">ITEM 3-2</a></li> <li><a href="#">ITEM 3-3</a></li> <li><a href="#">ITEM 3-4</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 3</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> <li><a href="#">ITEM 1-3</a></li> <li><a href="#">ITEM 1-4</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 4</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> <li><a href="#">ITEM 2-5</a></li> <li><a href="#">ITEM 2-6</a></li> </ul> </div> </li> </ul> </div> </li> </ul> </section>
jQuery (DEMO 1と同様)
$(function() {
function demo1_2(triggerSelector) {
// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
$(triggerSelector).on('click', function(event) {
$trigger = $(triggerSelector);
event.preventDefault();
$(this).toggleClass(activeClass);
$(this).next().slideToggle(250);
});
};
// 引数でトリガーを指定
demo1_2('#demo2 .trigger');
});
DEMO 3 : コンテンツの格納
概要
アコーディオンって、メニューだけでなくFAQとかコンテンツにもふんふん使われるよねってことでコンテンツも入れてみました。
特にレイアウトは変えず、リキッドな感じに可変です。
HTML
<section id="demo2" class="section_demo section_demo2"> <ul class="section_demo_list"> <li> <h3 class="trigger"><a href="#">CATEGORY 1</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> <li><a href="#">ITEM 1-3</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 3</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 3-1</a></li> <li><a href="#">ITEM 3-2</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 2</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 3</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 3-1</a></li> <li><a href="#">ITEM 3-2</a></li> <li><a href="#">ITEM 3-3</a></li> <li><a href="#">ITEM 3-4</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 3</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> <li><a href="#">ITEM 1-3</a></li> <li><a href="#">ITEM 1-4</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> </ul> </div> </li> </ul> </div> </li> <li> <h3 class="trigger"><a href="#">CATEGORY 4</a></h3> <div class="target"> <ul> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 1</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 1-1</a></li> <li><a href="#">ITEM 1-2</a></li> </ul> </div> </li> <li> <h4 class="trigger"> <a href="#">SUB CATEGORY 2</a> </h4> <div class="target"> <ul> <li><a href="#">ITEM 2-1</a></li> <li><a href="#">ITEM 2-2</a></li> <li><a href="#">ITEM 2-3</a></li> <li><a href="#">ITEM 2-4</a></li> <li><a href="#">ITEM 2-5</a></li> <li><a href="#">ITEM 2-6</a></li> </ul> </div> </li> </ul> </div> </li> </ul> </section>
jQuery
$(function() {
function demo3(triggerSelector) {
// 引数で指定したトリガーをクリックしたとき、クリックしたトリガーの次の要素を展開
$(triggerSelector).on('click', function(event) {
$trigger = $(triggerSelector);
event.preventDefault();
// 他に既に開いている項目がある場合は一度全て閉じる
if (!$(this).hasClass(activeClass)) {
if ($trigger.hasClass(activeClass)) {
$trigger.removeClass(activeClass);
$trigger.next().slideUp(250);
}
}
$(this).toggleClass(activeClass);
$(this).next().slideToggle(250);
});
};
// 引数でトリガーを指定
demo3('#demo3 .trigger');
});
まとめ
いかがでしょうか。
ワンソースで可変レイアウトってなかなか厳しかったりしますよね。
我々人類が哲学的な気持ちになりつつもいろんな可能性を模索した先で辿り着く答えにはきっと大きな意味があります。
レスポンシブなのにワンソースじゃないーーーーーー闇ですね。
ところで自分のカーソル捌きがなかなか挙動不審で戦慄しました。精進します。
