下準備

ドロップダウンメニューを作るということはしっかりとしたカテゴリ分けをしている方は大丈夫だと思いますがいい加減な形でなんとなくしていた人にはツライ作業になるかもしれません。

• ドロップダウンで表示させたい部分の親カテゴリと子カテゴリをしっかりと把握する

例えば私の場合は「ミニマリスト」という部分が親カテゴリです。
子カテゴリは「ミニマリストさん」「ゆるりまいさんのドラマ」「ミニマリストネタ」になります。

そして親カテゴリにはリンクが貼れるので子カテゴリの記事全てに「ミニマリスト」というカテゴリをつけました。
今まで親-子を意識していなかったのでカテゴリの整理も大変でした（^_^;)
そんな感じで親と子カテゴリを整理しました。
ただココは私のやり方が間違っている場合やもっと簡単にできる方法があるかもしれませんが知識がないのでその辺はご了承下さい。

あと必ず作業前にはメモ帳などに以前のコードをとっておいて下さいね。

ドロップダウンメニュー＆トグルメニューカスタマイズ

いよいよ作業に入ります。
ココからはゆきひーさんのサイトを見てしっかりと作業して下さい。
www.yukihy.com

初心者さんが迷いそうなところ

カテゴリ名はただ書けばいいだけですがリンクはそれぞれのカテゴリのリンクを貼ります。
例えば私の場合「ミニマリスト」の部分にリンクを貼るときは自分のカテゴリ「ミニマリスト」をクリックして出てくるURLを入れる形になります。

細かいカスタマイズ

私の場合、メニューの幅が少し長かったためそこの部分を％を変更して収まるようにしました。
全てこまかい修正方法もゆきひーさんのサイトに記載されているので便利ですね。
色も変えようかと思いましたがProでないと消せないヘッダとお揃いでいいかなと思いそのままにしました。

まとめ

今回もまたやり始めてからカテゴリを修正しながらやることになり大変でした。
子カテゴリはそのまま使えましたが親を考えてなかったので慌ててまとめたのでモレがありそうです。
これからはしっかりと親カテゴリと子カテゴリを考えていきたいと思いました。

作業自体はコピペしてカテゴリ名変えてリンクを貼るのが主なのでそこはすごく簡単で感動しました。
PCでのデザインもシンプルだし使いやすくスマホのトグルメニューもきちんと機能していてユーザーさんも使いやすくなったかなと思います。
これで他の記事も読んでくれるようになったら嬉しいです。

ゆきひーさん今回もお世話になりました。
素敵なコードをありがとうございます！