Knowledge Base
[Ha-Basic] How to display the Wordpress submenu softly (with delay)

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

公開日： 制作備忘録
Knowledge Base Wordpress　ha-Basic テーマ
☆☆　この機能は【ha-Basic】テーマ　バージョン1.1で実装（対応）済みです　☆☆

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

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

キーボードからブラウザのスーパーリロード（キャッシュクリア）をする方法（Windows用）

CSSの編集後すぐに変更が適用されないときに以下の方法で一時保存されている情報をクリアします

  • Google Chrome／Microsoft Internet Exproler／Mozilla Firefox
    • ctrlを押しながらf5
  • Microsoft EDGE
    • F5を押す、またはctrlを押しながらR
  • Apple Safari
    • ctrlを押しながらR

ひまあーと（管理人）
  • 記事の作者: ひまあーと（管理人）
  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。
  • 作者の記事一覧はこちら

いつでもご相談・サイトカスタマイズの依頼を受け付けています

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

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。

【スポンサーリンク】

記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報