【ha-Basic】WordPressのサブメニューをふわっと表示（遅れて表示）させる方法

WordPressでは簡単に階層（親子関係）を持つメニューの設定ができるようになっているのはご存知ですよね？そしてヘッダーメニューでは親メニューをマウスオーバーすると勝手に自動で子メニューが表示されるようになっているので、特に苦労することなく階層メニューの表示ができるようになっていてとても便利です。

このマウスオーバー時のサブメニューの表示、ちょっと機械的な感じがしませんか？パッと開くので何か高級感がないというかなんというか・・・。

今回はこの動作にちょっと手を加えてマウスオーバーでふわーーっとサブメニューが表示されていくようにするカスタマイズの方法を紹介します。

あまりイメージ湧かないですか？？百聞は一見に如かずということでこのサイトにも採用していますので、試しに上のメニュー項目をマウスオーバーしてみてください。どうでしょう？いい感じだと思った方の参考になれば幸いです。

タイトルにも書いた通り、メニューに当たっているCSSセレクタさえわかればどんなテーマでも使用できる方法です。

WordPressのサブメニューをふわっと表示（遅れて表示）させる方法

【ha-Basic】テーマをお使いの方向けに紹介していきます。

手順としては外観→テーマの編集を開き、「a-insert-css.css」というファイルを開いて、以下のコードを末尾に追加する、たったそれだけの作業です。

/********************* パソコン表示のサブメニューをふわっと表示 ***********************/
.header-nav .sub-menu {
	opacity: 0;
}
.header-nav li:hover .sub-menu {
	opacity: 1;
	animation-duration: 2s;
	animation-name: fade-in;
	-moz-animation-duration: 2s;
	-moz-animation-name: fade-in;
	-webkit-animation-duration: 2s;
	-webkit-animation-name: fade-in;
}
@keyframes fade-in {
	0% {display: none; opacity: 0;}
	100% {display: block; opacity: 1;}
}
@-moz-keyframes fade-in {
	0% {display: none; opacity: 0;}
	100% {display: block; opacity: 1;}
}
@-webkit-keyframes fade-in {
	0% {display: none; opacity: 0;}
	100% {display: block; opacity: 1;}
}

追記したら保存してサイトを表示してみてください。

ね！いい感じに表示されますよね？？

まあまあ細かいコード説明は省いて、もう少し早く（遅く）サブメニューが表示されるようにするには、上記コードの「2s」となっているところを変更するだけです。
「2s」というのは2秒（second）で完全に表示するという時間の指定です。

もしもコピペして保存したのに変わらないという方は、ブラウザのキャッシュをクリアしてください

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。