Hoe OM - Mega Menu
Leer hoe om 'n mega-kieslys te skep (volwydte-aftreklys in 'n navigasiebalk).
Mega spyskaart
Skep 'n Mega-spyskaart
Skep 'n aftreklys wat verskyn wanneer die gebruiker die muis oor 'n element in 'n navigasiebalk beweeg.
Stap 1) Voeg HTML by:
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 Verduidelik
Gebruik enige element om die aftreklys oop te maak, bv. 'n <knoppie>, <a> of <p> element.
Gebruik 'n houerelement (soos <div class="dropdown-content">) om die aftreklys te skep en voeg 'n rooster (kolomme) by en voeg aftrekskakels binne die rooster by.
Draai 'n <div class="dropdown"> element om die knoppie en die houerelement (<div class="dropdown-content"> om die aftrekkieslys korrek met CSS te posisioneer.
Stap 2) Voeg CSS by:
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 Verduidelik
Ons het die navigasiebalk en die navigasiebalkskakels met 'n agtergrondkleur, opvulling, ens.
Ons het die aftrekknoppie gestileer met 'n agtergrondkleur, opvulling, ens.
Die .dropdown-content
klas hou die werklike aftreklys. Dit is by verstek versteek en sal vertoon word wanneer jy beweeg (sien hieronder). Dit is geposisioneer om sigbaar te wees reg onder die aftrekknoppie, en die breedte is op 100% gestel om die hele skerm te bedek.
In plaas daarvan om 'n rand te gebruik, het ons die box-shadow
eiendom gebruik om die aftrekkieslys soos 'n "kaart" te laat lyk. Ons gebruik ook z-indeks om die aftreklys voor ander elemente te plaas.
Die :hover
kieser word gebruik om die aftrekkieslys te wys wanneer die gebruiker die muis oor die aftrekknoppie beweeg.
Die .column
klasse word gebruik om drie kolomme te skep wat langs mekaar in die aftrekkieslys dryf (om verskillende kategorieë te wys).
Responsiewe Mega-spyskaart
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;
}
}
Wenk: Gaan na ons CSS Dropdowns Tutoriaal om meer te wete te kom oor dropdowns.
Wenk: Gaan na ons klikbare aftreklys om meer te wete te kom oor klikbare aftrekkies
Wenk: Gaan na ons CSS Navbar Tutoriaal om meer te wete te kom oor navbars.
Wenk: Gaan na ons Responsiewe Topnavigasie om uit te vind hoe om 'n responsiewe navigasiebalk te skep.