【QooQ】ナビバー開閉ボタンのカスタマイズ

2023/09/068
アイキャッチ

QooQ はモバイル表示ではナビバーが折りたたまれていて = ボタンで開閉できるようになっていますが、このちょっとショボい感じ(笑)の = ボタンをいい感じにするカスタマイズをご紹介します。

今回のカスタマイズはこちらの IB-Note さんの記事を参考にして QooQ に応用させて頂きました。Fumaさん、大変わかりやすい記事ありがとうございます。

ファビコンIB-Note
サムネイル
ついにハンバーガーメニューを実装しました | IB-Note
以前から付けたいなぁと思っていたハンバーガーメニューをついに実装しました!今回の記事では私がどのようにハンバーガーメニューを実装したのか、コードや仕組みとともに詳しくご紹介します。
https://itblogger-note.blogspot.com/2020/12/hamburger-menu.html
CONTENTS

ボタンのデザインと挙動をカッコよく

上記の IB-Noteさんや、当ブログのような凝ったハンバーガーメニューにするのではなく、単にボタンのデザインと挙動だけをこんな風にカスタマイズします。

ボタンを押して開閉する度に × にアニメーションで変化するのってカッコいいですよね(´▽`)
JavaScript も FontAwesome 等のアイコンも使わず、CSSだけでこのようなことが出来るんです。

今回のカスタマイズに関して

  • デフォルトでは = 部分だけでなくナビバー全体がタップ可能な状態になっていますが、カスタマイズ後は
    ボタン部分以外をタップしても反応しなくなりますのでご注意ください。
  • ナビバーとヘッダーの位置を入れ替えている環境でも問題なく動作します。※位置の微調整が必要な場合があります。

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。

① ナビバーボタンのコードを書き換え

label for='navigation-button' を検索で探し
この2行のコードを

<label for='navigation-button' id='navigation-label'>=</label>
<input id='navigation-button' type='checkbox'/>

このように変更します↓↓

<input id='navigation-button' type='checkbox'/>
<label for='navigation-button' id='navigation-label'><span/></label>
ナビバーのコード変更箇所

② CSSの追記

あとは以下のCSSを追記するだけでOKです。

@media (max-width: 768px) {
#navigation-label {
float: right;
position: relative;
display: flex;
height: 30px;
width: 30px;
align-items: center;
cursor: pointer;
margin-left: 5px;
z-index: 1;
}
#navigation-label span,
#navigation-label span::before,
#navigation-label span::after {
position: absolute;
content: "";
display: block;
height: 3px;
width: 24px;
border-radius: 3px;
background: #fff;/*ボタンの色*/
transition: .4s;
}
#navigation-label span::before {
bottom: 8px;
}
#navigation-label span::after {
top: 8px;
}
#navigation-button:checked ~ #navigation-label span {
background: transparent;
}
#navigation-button:checked ~ #navigation-label span::before {
bottom: 0;
transform: rotate(45deg);
}
#navigation-button:checked ~ #navigation-label span::after {
top: 0;
transform: rotate(-45deg);
}
}

↓デモです。

See the Pen ≡↔× Button Demo by Fujiyan (@fujiyanx) on CodePen.

簡単にできますのでよろしければお試しくださいませ。