Css mega menu bootstrap

Bootstrap mega menu

In today’s snippet tutorial, I’ll show you how to create your own circle buttons with icons in Bootstrap 4 or 5.

We’ll create:

• 8+ color variants of circular buttons
• 3 sizes for the circular buttons
• we will use Font Awesome icons, but you can use also text content if you’d like.

Explanation of the code

The snippet is a simple way to build an HTML and CSS menu for your website. It’s easy to customize, you can change the color of the menu items, and much more.

• Use the default Bootstrap’s dropdown menu to hold your mega menu.
• Set the .dropdown position to static instead of absolute.
• We use the class .megamenu to hold this static position.
• Use Bootstrap grid’s columns to lay out your megamenu’s content.
• You can also use an image background, as we do in our snippet, for one of the mega menu columns.

What is megamenu?

Megamenu is a large menu. It can be used to organize a lot of links, categories, or other content into a single structure.

When designing mega menus, you can use the same principles as you would for smaller menus.

However, you may want to consider the following:

• Organize content into logical groups.
• Make it easy to scan and understand the information hierarchy.
• Provide enough space for each item so that users don’t have to scroll horizontally to see all of them at once (unless this is necessary for usability).
• Use labels that are short but descriptive enough to convey their meaning quickly (for example, «Products» instead of «Product»).

If you liked this snippet, you might also enjoy exploring Bootstrap table with a fixed header or Bootstrap vertical menu .

Please note that the interactive editor on this page should be viewed on your laptop or desktop for the best results.

How to use the snippet

There are two ways to use the snippet:

• a] Copy it into your project. This means:
  1. Copy content of the HTML, CSS, JavaScript tabs into your project
  2. Make sure that you have jQuery 3 and Bootstrap 4’s CSS and JS included in your project too.
  3. That should be it, and you should be good to go.
• b] Use the «Edit in JSFiddle» link in the top right and play with it in the JSFiddle. After adjusting what you need, you can use the same steps as in a] to develop it locally.

Template Categories

Источник

19+ Bootstrap 5 Mega Menu Responsive/Drop Down Examples

Yet another Bootstrap 5 responsive mega menu with multilevel dropdown examples and search box. This mega navigation system is built with the Bootstrap 5 navbar component with multiple levels of dropdowns. Besides this, a mega dropdown is also placed inside the main navbar that contains the Bootstrap grid layout for links, cards, and link groups.

You are not limited to place only cards and links inside the mega dropdown, you can also place any Bootstrap element like forms, accordions, and images, etc. The menu comes with an animated hamburger button (for mobile view) to toggle nav items.

Basically, this mega menu doesn’t require any JavaScript function as it uses Bootstrap 5 native dropdowns and navbar components. Even, the additional styles are not necessary, the menu is quite compatible with Bootstrap 5.0.2 and above. Anyhow, a little JS function requires to toggle the hamburger on small screens.

How to Create a Responsive Mega Menu using Bootstrap 5

1. First of all, load the Bootstrap 5 CSS, Font Awesome CSS (for icons), Google Fonts CSS, and Additional CSS (Optional) into the head tag of your webpage.

 [email protected]/dist/css/bootstrap.min.css'>   [email protected];700&display=swap'>  

2. After that, create the HTML structure for the mega menu as follows:

3. Load the Bootstrap 5 JS by adding the following CDN link just before closing the body tag.

4. Finally, initialize the hamburger button in the JS function to make the mega menu responsive.

document.addEventListener('click',function(e) < // Hamburger menu if(e.target.classList.contains('hamburger-toggle'))< e.target.children[0].classList.toggle('active'); >>)

That’s all! Hopefully, you have successfully integrated this Bootstrap 5 responsive mega menu with multilevel examples into your web project. If you have any questions or suggestions, let me know by comment below.

Related Code Snippets:

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

2 thoughts on “19+ Bootstrap 5 Mega Menu Responsive/Drop Down Examples”

Hello Sir! thanks for your idea! awesome and beautiful teaching about mega menu! God bless your good work! Reply

• 

Leave a Comment Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Источник

Bootstrap Dropdown Mega Menu

Follow these steps to create a Bootstrap 5 mega menu using the Bootstrap navbar with a dropdown.

Final output:

1. Let’s start with the first navbar from the official Bootstrap Navbar page:

2. Replace the dropdown-menu list with the mega menu items as required.

3. Yes, it’s a mess. Let’s begin styling it.

Get rid of the bullets and unnecessary padding.

I’m also changing the navbar background color and using the bootstrap class navbar-dark instead of navbar-light.

Modify the Search button to match the new navbar background.

4. By default, the display type of dropdown-menu is block. To make it look like the mega menu, change the display type to flex.

To make the first elements of each list stand out as headings, I am changing its color to match the navbar background and adding some basic styling.

.dropdown-menu li:first-child a

5. Add some styles to the other list items.

.dropdown-menu li .dropdown-item

Style the overall dropdown(mega menu).

6. For now, the mega menu opens only on click. Let’s open it on hover as well.

Also, let’s apply the display type that we changed earlier only for larger screens.

@media only screen and (min-width: 992px) < .dropdown:hover .dropdown-menu < display: flex; >.dropdown-menu.show < display: flex; >>

I am changing the look of other links on the navbar a bit. You can also add some hover effects like underline or background-color change.

.navbar-dark .navbar-nav a.nav-link

7. On mobile screens, you don’t want the navbar to take up all the space. Set a fixed height and make it scrollable.

@media only screen and (max-width: 992px) < .dropdown:hover .dropdown-menu < max-height: 350px; overflow-y: scroll; >>

(minimize the window to check)

Video tutorial for Bootstrap 5 Mega Menu:

Final Output Code for Bootstrap 5 Mega Menu #1:

.navbar-dark .navbar-nav a.nav-link < color: #ffffff; font-size: 1.1em; >.dropdown-menu < box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); border: none; border-radius: 0; padding: 0.7em; >@media only screen and (min-width: 992px) < .dropdown:hover .dropdown-menu < display: flex; >.dropdown-menu.show < display: flex; >> .dropdown-menu ul < list-style: none; padding: 0; >.dropdown-menu li .dropdown-item < color: gray; font-size: 1em; padding: 0.5em 1em; >.dropdown-menu li .dropdown-item:hover < background-color: #f1f1f1; >.dropdown-menu li:first-child a < font-weight: bold; font-size: 1.2em; text-transform: uppercase; color: #516beb; >.dropdown-menu li:first-child a:hover < background-color: #f1f1f1; >@media only screen and (max-width: 992px) < .dropdown-menu.show < flex-wrap: wrap; max-height: 350px; overflow-y: scroll; >> @media only screen and (min-width: 992px) and (max-width: 1140px) < .dropdown:hover .dropdown-menu < width: 40vw; flex-wrap: wrap; >>

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar’s Discord server.

Источник