Liberty

こんにちは、yutaです。

今回は、Bootstrapを利用したトグル可能なメニューバーの作り方について解説します。作っていくメニューバーは上のgifのようなものです。Bootstrapは有名なCSSフレームワークですが、ご存知でない方は以下を参照してください。また、ググるとたくさん情報が出てきます。

Bootstrapによるレスポンシブ対応の基礎(目次から3-1に飛ぶと導入方法が確認できます)

もしくは以下にBootstrap実装済みのHTMLテンプレートを載せるのでそちらをコピペして使っていただいてもOKです。

Bootstrap実装済みのHTMLテンプレート(コピペ用)

こちらをコピペしていただければ、Bootstrapを別途ダウンロードする必要もなくそのままBootstrapを利用したHTMLが書けます。

1.BootstrapのNavbarサンプルをコピペ
2.不要箇所の削除
3.メニューバー項目の追加
4.CSSで体裁を調整
5.aタグのリンクを設定
6.完成形コード

1.BootstrapのNavbarサンプルをコピペ

今回、メニューバーの実装にはBoostrapのNavbarを使用します。

まずは、Bootstrap公式サイトのNavbarサンプルをコピペします。

Navbarサンプル

正直、Bootstrapが優秀すぎて、ブラウザを更新するとわかりますが、下の画像の様にこの時点でほぼデザインはできていますし、ブラウザを縮めるとトグルメニューに切り替わる機能も実装されています。

2.不要箇所の削除

今回、実装するメニューバーはプルダウンメニューや検索機能を実装しませんし、メニューバーの最初に記載されている「Navbar」という部分も使用しませんので、2行目のaタグ、12~28行目のコード、30~33行目のformタグは削除してください。(※この行番号はNavbarサンプルのコードの番号なのでエディターに貼り付けた後の行番号とは異なります。)

削除すると以下の様になります。(“Home”だけが表示された状態。)

不要箇所削除後のコードは以下の様になります。

不要箇所を削除したコード

次に9行目のliタグに記載されている”active”クラスを削除します。(これがついているとHomeという文字が強調されますが特に必要ないので消します。)

3.メニューバー項目の追加

そして、削除後のliタグ(9~11行目)を2回コピペしてliタグを合計3つ作ります。この状態で、ブラウザを更新するとHomeが3つできていると思います。

この3つのHomeを好きな名前に変えればとりあえずメニューバーができますね。今回は、Home、Blog、Profileとしましょうか。書き換えると以下の様になります。

4.CSSで体裁を調整

少しフォントの色が薄いので、CSSで色を変えてみましょう。自作のCSSファイルに書き込んでいただいても結構ですが、今回はHTMLに記載している<style>タグ内にCSSを記述していきます。

CSSのセレクタは、aだけだと他のものと競合する恐れがあるため、”.navbar a”としておきます。もともと、メニューにマウスを合わせた時にフォント色が少し濃くなる様になっていますが、とりあえずそこは気にせず、フォント色を黒にします。

【注意】
Bootstrapではあらかじめフォント色などをCSSで指定されている場合が多く、今回も指定されています。すでにCSSで指定されている設定を書き換えるためには”!important”を記載する必要があるので書き忘れの無いようにしてください。

具体的には以下の様に記述します。

.navbar a{
color: black !important;
}

このままだとメニューバーの項目にマウスを合わせた時に変化がないので、マウスオーバーでフォントサイズが変わるエフェクトをつけて面白くしてみます。

まず、マウスオーバー時にエフェクトを効かせるために擬似クラスのhoverを使用して以下の様にフォントサイズを指定します。

.navbar a:hover{
font-size: 1.5em; /* 1.5倍のフォントサイズにする */
}

これだけでも良いですが、transitionを使ってよりアニメーション感を加えてみましょう。以下の通り.navbar aに追記します。

.navbar a{
color: black !important;
transition: font-size 0.3s ease-in 0;
}

マウスオーバーすると0.3秒書けてフォントサイズが変化するのでアニメーション感が出ましたね。

5.aタグのリンクを設定

これで見た目はできたので、最後に各aタグのリンクを設定していきます。リンク先のURLが分かっている場合は、そちらをhref内に記載すればOKです。

WordPressのカテゴリー別ページへのリンクを載せたい場合は、WordPress管理画面→投稿→カテゴリー画面で一覧表示されているカテゴリー名から、リンクを載せたいカテゴリー名を選んで以下の様なPHPコードを記述します。

例：”Blog”というカテゴリー名の記事一覧ページをリンクしたい場合

また、メニューバーのHomeにはトップページへのリンクを載せると思いますので、href内に以下のPHPコードを記述してください。

<?php echo esc_url(get_home_url()); ?>

6.完成形コード

最終的にできあがった完成形コードを載せておきます。

完成形コード

以上、ブログのオリジナルテーマなどに使えるトグル可能なメニューバーの作り方でした。では、また！

ブログランキングに参加していますので、僕のモチベアップの為にもバナーを押していただけると嬉しいです！(※別タブで開きます)