ホバーでふわっと現れるおしゃれなメニューをCSSで作る方法【Cocoon】【WordPress】

サイトのヘッダーはシンプルで分かりやすいと使いやすいですが、アイコンでシンプルにしつつマウスホバー時に表示されるアニメーションを加えると動きのあるオシャレなナビゲーションになります。

本記事では、Cocoonテーマに対応した、ホバーでふわっと現れるヘッダーメニューをCSSで実装する方法を紹介します。

Cocoonテーマのメニューをカスタマイズする基本設定

まずはCocoonテーマでヘッダーをカスタマイズする準備を整えましょう。

ヘッダーを作成していなければWordPress管理画面の「外観」「メニュー」でメニューを作成。

また、アイコンではFontAwesome5を使用するので「Cocoon設定」「全体設定」の「サイトアイコンフォント」が「FontAwesome5」になっていることを確認しておきましょう。

編集はCSSで行うので「外観」「カスタマイズ」より「追加CSS」に記載するか、子テーマを導入してstyle.cssファイルを作成する方法で実装してください。

ホバーでふわっと現れるラベルをCSSで実装

以下のCSSを追加することで、マウスを重ねたときに“ふわっ”とラベルが表示されるエフェクトを作れます。

CSSクラスはCocoonを想定しており、ヘッダー全体に適用する形で指定しているので、自身の環境に合わせてクラス指定は調整してください。

#navi .menu-item a{
	padding: 0 45%;
}

#navi .menu-item a:before{
  font-family: "Font Awesome 5 Free";
	content: '\\f27a';
}

#navi .menu-item .caption-wrap{
	position: absolute;
	left: 0;
}

#navi .menu-item .item-label{
	opacity: 0;
	transition: 0.5s;
	position: relative;
	background-color: #222;
	border-radius: 10px;
	color: #fff;
	bottom:0;
	padding: 0 10px;
	overflow: visible;
	pointer-events: none;
}

#navi .menu-item .item-label:after{
	position: absolute;
  content: '';
  top: 100%;
  left: calc(50% - 12px);
  border: 10px solid transparent;
  border-top: 10px solid #222;
}

#navi .menu-item a:hover .item-label{
	bottom: 45px;
	opacity: 1;
}

このCSSではヘッダーのラベルを「opacity」で透明→表示、また「bottom」を0pxから45pxに動かすことで下から上にフワッと現れるようなアニメーションを実現。

ラベルが現れた際にマウスが触れてしまうと挙動がおかしくなってしまうので、「pointer-events: none」でラベルをマウスが反応しないように調整しています。

そしてラベルが透明になっているのでbefore要素にFont Awesomeアイコンを使用して普段はアイコンのみが表示されるメニューとして使用。

after要素はborderを使った擬似要素で吹き出しの下の三角部分を作成しています。

デザインを自分好みにカスタマイズするポイント

基本構造を理解したら、下記を参考にオリジナリティを出してみてください。

• 背景色を変更：iteml-labelクラスの「background-color」とitem-labelクラスのafter要素の「border-top」のカラー（#222）を好きなカラーコードに変更
• 表示速度を調整：「transition」の数値を調整
• 位置を調整：item-labelクラスのhoverのbottomを増減して表示位置を調整

まとめ

WordPressのCocoon無料テーマでも、プラグインやJavaScriptを使わずに少しのCSSを加えるだけでプロっぽいメニューが作れます。

「動きのあるデザインを取り入れたい」「印象的なヘッダーを作りたい」という方は、ぜひ今回の方法を試してみてください。