WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2019(令和元)年5月29日/最終更新日:

Knowledge Base Wordpress ha-Basic テーマ



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)で完全に表示するという時間の指定です。

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

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)