Hoe - Mega Menu
Leer hoe u een megamenu maakt (vervolgkeuzemenu over de volledige breedte in een navigatiebalk).
Mega-menu
Maak een megamenu
Maak een vervolgkeuzemenu dat verschijnt wanneer de gebruiker de muis over een element in een navigatiebalk beweegt.
Stap 1) HTML toevoegen:
Voorbeeld
<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>
Voorbeeld uitgelegd
Gebruik een willekeurig element om het vervolgkeuzemenu te openen, bijvoorbeeld een <button>-, <a>- of <p>-element.
Gebruik een containerelement (zoals <div class="dropdown-content">) om het vervolgkeuzemenu te maken en een raster (kolommen) toe te voegen en dropdownlinks binnen het raster toe te voegen.
Wikkel een <div class="dropdown">-element rond de knop en het containerelement (<div class="dropdown-content"> om het vervolgkeuzemenu correct te positioneren met CSS.
Stap 2) CSS toevoegen:
Voorbeeld
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration:
none;
}
/* The dropdown
container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
/* Important for vertical align on mobile phones */
margin: 0; /*
Important for vertical align on mobile phones */
}
/* Add a
red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.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;
}
/* Mega Menu header, if needed */
.dropdown-content
.header {
background: red;
padding: 16px;
color: white;
}
/*
Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
/* Style links
inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background
color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
Voorbeeld uitgelegd
We hebben de navigatiebalk en de navbar-links gestyled met een achtergrondkleur, opvulling, enz.
We hebben de vervolgkeuzeknop gestyled met een achtergrondkleur, opvulling, enz.
De .dropdown-content
klas bevat het daadwerkelijke vervolgkeuzemenu. Het is standaard verborgen en wordt weergegeven bij de muisaanwijzer (zie hieronder). Het is zo gepositioneerd dat het direct onder de vervolgkeuzeknop zichtbaar is en de breedte is ingesteld op 100% om het hele scherm te bedekken.
In plaats van een rand te gebruiken, hebben we de box-shadow
eigenschap gebruikt om het vervolgkeuzemenu eruit te laten zien als een "kaart". We gebruiken ook z-index om de vervolgkeuzelijst voor andere elementen te plaatsen.
De :hover
selector wordt gebruikt om het vervolgkeuzemenu weer te geven wanneer de gebruiker de muis over de vervolgkeuzeknop beweegt.
De .column
klassen worden gebruikt om drie kolommen te maken die naast elkaar zweven in het vervolgkeuzemenu (om verschillende categorieën weer te geven).
Responsief Mega-menu
Voorbeeld
/* Responsive layout - makes the three columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
height:
auto;
}
}
Tip: Ga naar onze CSS Dropdowns Tutorial voor meer informatie over dropdowns.
Tip: ga naar onze klikbare vervolgkeuzelijsten voor meer informatie over klikbare vervolgkeuzelijsten
Tip: Ga naar onze CSS Navbar-zelfstudie voor meer informatie over navigatiebalken.
Tip: ga naar onze Responsive Top Navigation voor meer informatie over het maken van een responsieve navigatiebalk.