QooQ はモバイル表示ではナビバーが折りたたまれていて = ボタンで開閉できるようになっていますが、このちょっとショボい感じ(笑)の = ボタンをいい感じにするカスタマイズをご紹介します。
今回のカスタマイズはこちらの IB-Note さんの記事を参考にして QooQ に応用させて頂きました。Fumaさん、大変わかりやすい記事ありがとうございます。
IB-Noteついにハンバーガーメニューを実装しました | IB-Note以前から付けたいなぁと思っていたハンバーガーメニューをついに実装しました!今回の記事では私がどのようにハンバーガーメニューを実装したのか、コードや仕組みとともに詳しくご紹介します。https://itblogger-note.blogspot.com/2020/12/hamburger-menu.html
ボタンのデザインと挙動をカッコよく
上記の 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.
簡単にできますのでよろしければお試しくださいませ。
コメントを投稿
別ページに移動します8 件のコメント (新着順)
ふじやん
phraram9さん、こんにちは。
お役に立てたようで良かったです。
また何かお困りの時はお気軽にお尋ねくださいね。
phraram9
ふじやんさん、おはようございます。
真夜中に即答して頂いたようで恐縮です。
ご提案の内容で試したところ、正常動作しました。
qooqオリジナルのだとボタンなのか何なのかわかりにくくて、
メニュー項目も少ないので、表示されたままにしておきたかった次第です。
とてもすっきりした表示になりました。
本当にありがとうございました。
ふじやん
phraram9さん、こんばんは。
CSSの以下のところを書き換えるだけでナビメニューを常時表示できると思いますのでお試しください。
(もしくは、変更前のコードは残したまま、その下に変更後のコードを追記してもOKです)
@media ( max-width : 768px ) {
#navigation-label{
display: block;
text-align: center;
}
#navigation-content{
display:none;
}
#navigation-button:checked ~ #navigation-content{
display: block;
}
}
↓この様に変更↓
#navigation-label{
display: none;
}
#navigation-content{
display:initial;
}
phraram9
ふじやんさん、初めまして。
ナビバー開閉ボタンを削除して、PC版と同様に常時表示させておきたいのですが、
簡単に修正できるようでしたら、教えて下さい。
よろしくお願いします。
ふじやん
アタルさん、お役に立てたようで良かったです。
私も安心して眠れそうです(´▽`)
なるほど、干渉していたのは🔍でしたか。
CSSもHTMLも弄っていく内に色々分かってきて楽しいですので、アタルさんも色々トライしてみてくださいね。
アタル
ふじやん様、こんばんは。 即答、ありがとうございます!
感激です! 無事、直りました。 丸一日、悩んでいた自分が恥ずかしいです。
なるほど、 z-index で要素を最上位に押し上げたのですね。 勉強になります。
スマホだと検索(虫眼鏡)アイコンの位置がずれるので、その調整をしました、
そのため、「検索フォームの同アイコンボタン」と要素(navigation-label span)が重なっているみたいです。
@media (max-width: 768px) {
#search-box-submit {
right: 2em !important; /* 20210516 Add by Ataruchi スマホ調整 */
}
}
CSS、奥が深いですね。 勉強を始めたばかりなのですが...
本当にありがとうございました。 お休みなさいませ。
ふじやん
アタルさん、こんばんは。
×が押せない件ですが、以下のCSSを追加するだけで直ると思います。z-indexの数値は1でも大丈夫ですが、一応念の為大きめに設定しとけば確実でしょう。
(アタルさんがで臨時対処で追加された /*20210516 Ataruchi Xボタンを押せないため*/ の箇所は削除してください)
#navigation-label span {
z-index: 999;
}
で、原因ですが、おそらく↑↓ボタンと干渉しちゃってるのではないかな?という気はしますが…正直はっきりとは断定できません(^^;
もしまだ何かしら問題があるようでしたらお気軽にコメントくださいね。
アタル
ふじやん様、初めまして こんばんは。
ライブドアブログから移行のため、「QooQ」テーマに決めた「アタル」と申します。
ふじやん様等の記事を参考にさせて頂き「QooQ」テーマをカスタマイズしてブログ雛形を作っている最中なのですが、ナビバー開閉ボタンの「X」ボタンが どうやっても 押せません。 「3本線のハンバーガーメニュー」は押せるのに...
iPhone6s、Android スマホ2台の計3台にて検証しましたが、同じ症状でした。
いろいろやってはみたのですがダメで、仕方がなくスマホ時のコード先頭に、
#navigation-button
display: inline; /* 20210516 Ataruchi Xボタンを押せないため */
}
を付け加えて、臨時対処としました。 チェックボックスをスマホ時のみ表示すると、「ナビバー開閉ボタン」はきちんと動作します。
なお、ふじやん様の記事を読み、ナビバーに「検索フォーム」と「ページ先頭」、「ページ末尾」リンクを組み込んでいます。
ふじやん様のお時間のある時に「不具合理由」を調べて頂けたら、嬉しく思います。
ブログのURLは、 https://mac-excel-vba.blogspot.com となります。
美しさに欠けるだけで(臨時対処できているので)全く急ぐ必要はございませんが、どうかよろしくお願いいたします。
それでは、失礼させて頂きます。