モノグサにお灸

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

作成日： 2019年7月18日

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

元々Bootstrapにはメニューアイテムをクリックすると、ドロップダウンとしてサブメニューが表示される機能が実装されています。

この仕様を元にメニューアイテムをマウスオーバーするとすぐ下にメガメニューを表示するように設定します。

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

CSS [1-6]
.mega-menu {
  position: static;
}
.mega-menu .dropdown-menu {
  width: 100%;
}

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

CSS [7-17]
.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;
}
になります。

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

参考はこちら

favicon
Bootstrap 4 Megamenu - HTML&CSS Snippet https://bootstrapious.com/p/bootstrap-mega-menu

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

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
filter_inputで配列値を読み込む場合はオプションが必要になります
次の記事 ➡
Bootstrapでモーダルウィンドウを画面中央でズーム表示するCSS設定

関連投稿

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。