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.

参考はこちら

Bootstrap 4 Megamenu - HTML&CSS Snippet
参考
Bootstrap 4 Megamenu - HTML&CSS Snippet

Find an effortless way to create Bootstrap 4 megamenu in our snippet. Snippet explained: Use the default Bootstrap's dropdown menu to hold…

Bootstrap 4 Megamenu - HTML&CSS Snippet Bootstrapious - Free Bootstrap Themes & Templates

今日はここまで

関連する記事



こちらはいかが?


コメントを残す