ヘッダーにナビゲーション機能を設置する方法！！

ヘッダーにナビゲーション機能を付けたくて行ってみた設定のやり方です。
参考にした記事から追記したところもある記事になります。

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 本体は既に読み込んでいる場合は不要です。

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

"#"の部分は飛び先のアドレスに変更してください。
私はそのままコピペしただけだったので、クリックしても無反応のままで、
なぜかわからず困ったので注意してください。

カスタマイズ

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

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

www.colordic.org

中央寄せにする

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

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

参考にした記事はこちらです。
ありがとうございます。

moonnote.hateblo.jp