Bootstrapでメガメニュー表示するCSS設定

Bootstrapでメガメニュー表示するCSS設定



Bootstrapの標準機能に少しスタイルシートをカスタマイズすることで、簡単にメガメニューを実装することが出来ます。

元々Bootstrapにはメニューアイテムをクリックすると、ドロップダウンとしてサブメニューが表示される機能が実装されています。
この仕様を元にメニューアイテムをマウスオーバーするとすぐ下にメガメニューを表示するように設定します。

追加するスタイルシートはシンプルで、メニューアイテムにmega-menuクラスを追加して以下の設定

.mega-menu {
  position: static;
}
.mega-menu .dropdown-menu {
  width: 100%;
}

同じくメニューアイテムにdropdown-hoverクラスを追加して以下の設定

.dropdown-hover .dropdown-menu {
  transition: all 0.3s;
  max-height: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
}
.dropdown-hover:hover .dropdown-menu {
  max-height: 500px;
  opacity: 1;
}

になります。

とてもシンプルで簡単です。

See the Pen
Bootstrapでメガメニュー
by JaSTIN (@JaSTIN)
on CodePen.

参考はこちら

Google
参考
Google

世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。

Google

今日はここまで

関連する記事



こちらはいかが?


コメントを残す