はてなブログテーマ「Innocent」はナビゲーションバーを内蔵しています。面倒なCSSを記述することなく、簡単にナビゲーションバーを表示できます。

• 設置の手順
  • jQuery をフッターに記述する
  • HTML をヘッダーに記述する
• デザイン
  • スマートフォン・タブレット
  • PC
• カスタマイズ
  • 色の変更
  • 中央寄せにする

設置の手順

jQuery をフッターに記述する

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    (function($) {
        $(".menu-toggle").on("click", function() {
            $(".main-navigation").toggleClass("toggled");
        });
    })(jQuery);
</script>

スマートフォン・タブレット閲覧時のメニュー展開ボタンを動作させるために必要なコードになります。フッター上のカスタマイズエリアに貼り付けて下さい。jQuery 本体は既に読み込んでいる場合は不要です。

HTML をヘッダーに記述する

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li><a href="#">ホーム</a></li>
            <li><a href="#">プロフィール</a></li>
            <li><a href="#">アーカイブ</a></li>
            <li>
                <a href="#" class="has-child">カテゴリー</a>
                <ul>
                    <li><a href="#">子カテゴリ1</a></li>
                    <li><a href="#">子カテゴリ2</a></li>
                </ul>
            </li>
            <li><a href="#">リンク</a></li>
        </ul>
    </div>
</nav>

次に、上記の HTML をヘッダー下のカスタマイズエリアに貼り付けます。メニューのリンクとなる <a> 直下に <ul> タグを記述すると、最大で4階層（曾孫）までのサブメニューが表示できます。

<a> に .has-child を指定すると、1階層目では下向きの矢印が、2階層目以降では右向きの矢印が表示されます。指定しなくてもサブメニューは表示されますが、指定したほうが「このメニューにはサブメニューがある」と理解しやすいでしょう。

デザイン

スマートフォン・タブレット

スマートフォン・タブレットでは、「メニュー」ボタンをタップすると開く展開式メニューになります。

PC

PC（幅1024px～）では横並びのナビゲーションバーになります。

カスタマイズ

色の変更

.main-navigation,
.main-navigation ul ul {
    background-color: #66cdaa;
}

.main-navigation と .main-navigation ul ul に背景色を指定するとナビゲーションバーの色が変わります。

中央寄せにする

@media screen and (min-width: 1024px) {
    .main-navigation {
        text-align: center;
    }
}

.main-navigation に text-align: center を指定すると、ナビゲーションバーがセンタリングされます。