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

公開日: 更新日: Ver1.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のカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

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


【スポンサーリンク】








コメントは受け付けていません。