How to create: Large menu
- Previous Page Pull-up Menu
- Next Page Mobile Menu
Learn how to create a large menu (full-width dropdown menu in the navigation bar).
Large menu
Create a large menu
Create a dropdown menu that appears when the user moves the mouse over the element in the navigation bar.
Step 1 - Add HTML:
<div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <div class="header"> <h2>Mega Menu</h2> </div> <div class="row"> <div class="column"> <h3>Category 1</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="column"> <h3>Category 2</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <div class="column"> <h3>Category 3</h3> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> </div> </div>
Example Explanation:
You can use any element to open the dropdown menu, such as <button>, <a>, or <p> elements.
Use the container element (such as <div class="dropdown-content">) to create the dropdown menu, and add a grid (columns), then add dropdown menu links within the grid.
Use the <div class="dropdown"> element to wrap the button and container elements (<div class="dropdown-content">) to properly position the dropdown menu using CSS.
Step 2 - Add CSS:
/* Navigation bar container */ .navbar { overflow: hidden; background-color: #333; font-family: Arial; } /* Links within the navigation bar */ .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /* Dropdown menu container */ .dropdown { float: left; overflow: hidden; } /* Dropdown menu button */ .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; /* Important for vertical alignment on mobile devices */ margin: 0; /* Important for vertical alignment on mobile devices */ } /* Add red background color to navigation bar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } /* Dropdown list content (default hidden) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Large menu title (if needed) */ .dropdown-content .header { background: red; padding: 16px; color: white; } /* Display the dropdown menu when hovering over */ .dropdown:hover .dropdown-content { display: block; } /* Create three equal-width columns and make them float side by side */ .column { float: left; width: 33.33%; padding: 10px; background-color: #ccc; height: 250px; } /* Set styles for links within the column */ .column a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } /* Add background color when hovering over */ .column a:hover { background-color: #ddd; } /* Clear the float after the columns */ .row:after { content: ""; display: table; clear: both; }
Example Explanation:
We have set the background color, padding, and other styles for the navigation bar and navigation bar links.
We set the background color, padding, and other styles for the dropdown menu button.
.dropdown-content
class containing the actual dropdown menu. It is hidden by default and will be displayed when hovering over (see below). It is positioned directly below the dropdown menu button and the width is set to 100% to cover the entire screen.
We did not use borders but used box-shadow
property, making the dropdown menu look like a 'card'. We also use z-index
Place the dropdown menu in front of other elements.
:hover
The selector is used to display the dropdown menu when the user hovers over the dropdown menu button.
.column
The class is used to create three side-by-side floating columns within the dropdown menu (to display different categories).
Responsive Large Menu
/* Responsive layout - Make three columns stack together instead of being side by side */ @media screen and (max-width: 600px) { .column { width: 100%; height: auto; } }
Related Pages
Tutorial:CSS Dropdown Menu
Tutorial:How to Create Clickable Dropdown Menus
Tutorial:CSS Navigation Bar
- Previous Page Pull-up Menu
- Next Page Mobile Menu