Building Mega Menus with Flexbox

Core points

• Flexbox is a CSS layout model that allows developers to create complex UIs without relying on redundant CSS and JavaScript tricks. It uses a linear layout model, making it easier to layout content horizontally or vertically without spacing calculations.
• Flexbox can be used to create websites with giant navigation menus. This layout model allows creating simple navigation bars, single drop-down menu segments, and limiting single drop-down menu segments to three columns. The Flex layout is responsive to elements within the container, reducing the need for media queries.
• The final mega menu created in this tutorial is not fully responsive. The main menu bar will appear on a smaller screen, but the giant menu will not be available, only the top-level links are available. However, this tutorial is a good demonstration of the power and simplicity of Flexbox.
• Giant menu navigation is very useful for displaying all options and can be effectively used on e-commerce websites. However, it is important to consider the usability of such features and understand their pros and cons before implementation.

As you know, Flexbox has attracted much attention recently as the browser support has increased. It allows developers to build complex UIs without relying on redundant CSS and JavaScript tricks.

Flexbox uses a linear layout model, allowing us to layout content horizontally or vertically without spacing calculations. The Flex layout is responsive to elements within the container, reducing the need for media queries.

In this article, I will use this layout model to build a giant navigation menu, and in the process you will see how easy it is to build and extend UI components using Flexbox.

I will not discuss the individual Flexbox properties in detail here, but focus on the practical application of these features. For a basic introduction to Flexbox, please refer to the following resources:

• Guy Routledge's Flexbox tutorial
• Flexbox beginner friendly introduction
• Flexbox Complete Guide

What will we build?

To find out what I will show you how to build, check out the full screen CodePen.

This tutorial is divided into three parts:

1. Build a navigation bar: Use Flexbox to build a simple navigation bar for our fictional e-commerce platform
2. Build a single drop-down menu segment
3. Limit a single drop-down menu segment to three columns

Build navigation bar

The marking of the navigation bar is simple. For demonstration purposes, I will use two classes (navbar and menu) to handle everything. CSS here will exclude any styles that are not related to this tutorial.

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

The

navbar class is responsible for centering our navigation bar in the available space, but I will focus on the menu class, where I will use Flexbox.

I want my navigation items to be arranged horizontally. Also, I want each item to be spaced equally and narrow down on demand if there is insufficient space.

First, I need to create a Flex formatting context on the .menu element, which I will use display: flex to implement. Now all direct children of the .menu element (i.e., Flex container) will become Flex projects.

Next, I want the menu items to be of equal width. I added flex: 1 to make them grow evenly with equal widths. Here is the code:

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

View the code, you may be wondering why I reuse all Flex projects (.navbar .menu li). display: flex

In the demo, the background color changes when you hover over a menu item. If I don't set the

property of the Flex project to display, only the li element will have equal width, and its internal content will not (i.e., some highlighted parts are clickable, while others Some are not clickable). flex

To make the content expand to the entire width of its parent element, I turned the Flex project itself into a Flex container as well. With this setting, I can make each nested a element as wide as its parent (using

), making the entire highlighted area clickable. flex: 1

Alternatively, I can also achieve this without setting the li element to the Flex container, but I have to use three additional properties (

, display: inline-block, width: 100%), and I prefer to avoid it This situation. box-sizing: border-box

This demo shows what has been done so far.

In just five CSS Flexbox properties, the navigation bar is ready. As you can see, this is a neat solution.

In the next section, I will show you a part of how to build a giant navigation.

Build a single drop-down menu segment

The following is the markup that will be used to build a single drop-down menu segment that will be expanded to multiple segments. The container__list project will be copied to create additional segments.

<code class="language-css">.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}</code>

container is a Flex container, and each direct child element (i.e. container__list) is a Flex project. Each container__list has multiple navigation items, each of which is wrapped by container__listItem . I've wrapped the content in a div and I'll go back to it later.

The following is CSS:

<code class="language-html"><ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul></code>

Note that I used the

property on container__list , but I did not use it for the navigation bar itself. As mentioned earlier, I don't want the navigation bar items to wrap when there is insufficient space. Instead, they shrink evenly when the available horizontal space decreases. flex-wrap

However, for container__list projects, the requirements are exactly the opposite. I want my list items to use 25% of the space, so that each row holds up to four items, which I can do with

. flex-wrap: wrap

I also set

to 0. This is useful because it prevents evenly distributed items of less than four. By setting it to 0, I force the project to keep 25% of the space. flex-grow

What about the content wrapped in a div now? I want to deal with a situation where you might want to prevent content from overflowing. This is very simple when your content is directly inside a Flex child element (i.e. container__listItem). I can replace the cut text with an ellipsis ("…") using the following code.

<code class="language-html"><nav class="navbar">
  <ul class="menu">
    <li>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i>
</li>
    </ul>
</nav></code>

However, in this case I put the content in a div which is wrapped by container__listItem . Therefore, the above solution will not work. Articles Flexbox and truncated text provide a solution. In the following code, the following line in each declaration block "Update" comment is the line that handles this problem:

<code class="language-css">.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}</code>

Limit a single drop-down menu segment to three columns

At this stage, most of the work has been completed. For the rest of this section, I will add another drop-down section, which I will force restrict to three column items.

As mentioned earlier, I will copy container__list twice and use it for a new drop-down menu segment called "Appliances". This is for demonstration purposes. In a practical example, you might generate a list through JavaScript or in a backend language.

I will add a has-multi class to adjust the user interface. Using this class, I need to override some properties.

<code class="language-html"><ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul></code>

Here, I set flex-basis to 33.333%, because I want three parts to be displayed in the container. I have changed only flex-basis, but the other two properties flex-grow and flex-shrink have been inherited from single section code. This gives me flexibility when container__list is less than three. If there are only two lists, the container__list project will grow and allocate space between them. That is, each item will occupy 50% of the total width.

Note that .container__listItem is set to flex-basis: 100%, which ensures that there is only one column in container__list. I can use 50% to allow two columns per section.

A few notes on the usability of giant menus

I have chosen the mega menu as my example without considering its usability too much. Before using such features, I have provided some resources to discuss its pros and cons.

In my opinion, the mega menu navigation is very useful for displaying all the options, and this navigation style can be effectively used for e-commerce websites. I like Intel's navigation.

• Availability advantages and disadvantages of mega menus (mega menu part 1)
• The giant menu is perfect for website navigation
• Giant drop-down menu

Conclusion

One should be noted that the final mega menu in this tutorial is not fully responsive. The main menu bar will appear on a smaller screen, but the giant menu will not be available, only the top-level links are available. For the purposes of this tutorial, this should be sufficient. Feel free to copy the demo and improve it if you prefer.

The giant drop-down menu navigation system is a great way to demonstrate the power and simplicity of Flexbox, and I hope I've conveyed that in this tutorial. As you can see, Flexbox is not only used for centering content.

If you use different Flexbox-based technologies to build a mega menu system, feel free to let us know in the comments.

Update: I have built a responsive mobile-friendly version of these mega menus that you can find in this CodePen demo.

FAQ for Building Mega Menu with Flexbox (FAQ)

How to make my mega menu responsive with Flexbox?

It's very easy to make mega menu responsive with Flexbox. You can use media queries to adjust the layout of the menu according to the screen size. For example, you can stack menu items vertically on a smaller screen and display them horizontally on a larger screen. You can also use the flex-wrap property to allow menu items to wrap to multiple lines if necessary. Remember to test your menu on different devices to make sure it looks great and functioning on all screen sizes.

Can I create multi-level mega menus using Flexbox?

Yes, you can create multi-level mega menus using Flexbox. You can nest Flex containers with each other to create multi-level navigation. Each level can be displayed or hidden using CSS and JavaScript. This allows you to create complex navigation structures that are still easy to navigate and understand.

How to add animations to my mega Flexbox menu?

You can use CSS transitions and transformations to add animations to the Flexbox mega menu. For example, you can use transitions to smoothly animate the opening and closing of the submenu. You can also use the transformation to animate the movement of menu items. Remember to keep the animation subtlety and consistency so as not to confuse or distract the user.

How to improve accessibility of Flexbox mega menus?

Improving the accessibility of the Flexbox mega menu involves several steps. First, make sure your menu is navigable via the keyboard. This means that the user should be able to use the Tab key and arrow keys to navigate in the menu. Second, use ARIA roles and attributes to provide additional information about menus to assistive technologies. Third, make sure your menu has enough contrast and is easy to read.

Can I create sticky mega menus using Flexbox?

Yes, you can create sticky mega menus using Flexbox. You can use the "position: sticky" CSS property to make the menu paste to the top of the page as the user scrolls. This ensures that the menu is always visible and accessible, even on long pages.

How to add icons to my mega Flexbox menu?

You can add icons to the Flexbox mega menu using icon fonts or SVG. You can use the flex attribute to control the size and spacing of the icons. You can also use CSS to change the color and hover effect of the icon.

How to add a search bar to my mega Flexbox menu?

You can add a search bar to the Flexbox mega menu by creating a Flex item that contains a form with input fields and submit buttons. You can use the flex attribute to control the size and position of the search bar. You can also use CSS to style the search bar to match the rest of the menu.

How to add a dropdown menu to my mega Flexbox menu?

You can add drop-down menus to the Flexbox mega menu by creating nested Flex containers. You can use CSS to hide the drop-down menus by default and display them when the user hovers over the parent menu item. You can also use JavaScript to add extra interactivity to the drop-down menu, such as closing them when the user clicks outside the drop-down menu.

How to add a mobile menu toggle to my Flexbox mega menu?

You can add a mobile menu toggle to the Flexbox mega menu by creating a button to toggle the menu display. You can use media queries to hide the toggle on the larger screen and display it on the smaller screen. You can also use JavaScript to toggle the "display" property of the menu when the button is clicked.

How to optimize the performance of Flexbox mega menus?

Optimizing the performance of the Flexbox mega menu involves several steps. First, make sure your CSS and JavaScript are shrinked and compressed to reduce their file size. Second, use CSS transitions and transformations to animation instead of JavaScript because they perform better. Third, use media queries to load different styles and scripts according to the screen size, thereby reducing the amount of unnecessary code loading.

The above is the detailed content of Building Mega Menus with Flexbox. For more information, please follow other related articles on the PHP Chinese website!