CSS Mega menu
Mega Menu (rozbalovací nabídka po celé šířce v navigační liště)
Umístěním ukazatele myši na odkaz „Rozbalovací nabídka“ zobrazíte mega nabídku.
Kód:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
.navbar4 {
overflow: hidden;
background-color: #0000ff;
font-family: Arial, sans-serif;
}
.navbar4 a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 16px;
text-decoration: none;
}
.dropdown4 {
float: left;
overflow: hidden;
}
.dropdown4 .dropbtn4 {
font-size: 16px! important;
border: none;
outline: none;
color: white;
padding: 10px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar4 a:hover, .dropdown4:hover .dropbtn4 {
background-color: white;
color: #0000ff;
}
.dropdown4-content {
display: none;
position: absolute;
background-color: #ffffcc;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown4-content .header {
background: #ffffcc;
padding-left: 16px;
color: blue;
}
.dropdown4:hover .dropdown4-content {
display: block;
}
.column4 {
float: left;
width: 25%;
padding-left: 16px;
background-color: #eee;
height: 180px;
}
.column4 a {
float: none;
color: black;
padding: 6px;
text-decoration: none;
display: block;
text-align: left;
}
.column4 a:hover {
background-color: #ffffcc;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<div style="padding:16px">
</div>
<div class="navbar4">
<a href="#no">Domů</a>
<a href="#no">Novinky</a>
<div class="dropdown4">
<button class="dropbtn4">Rozbalovací nabídka
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown4-content">
<div class="header">
<h2>Společný název pro menu</h2>
</div>
<div class="row">
<div class="column4">
<h3>Kategorie 1</h3>
<a href="#no">Link 1</a>
<a href="#no">Link 2</a>
<a href="#no">Link 3</a>
</div>
<div class="column4">
<h3>Kategorie 2</h3>
<a href="#no">Link 1</a>
<a href="#no">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column4">
<h3>Kategorie 3</h3>
<a href="#no">Link 1</a>
<a href="#no">Link 2</a>
<a href="#no">Link 3</a>
</div>
<div class="column4">
<h3>Kategorie 4</h3>
<a href="#no">Link 1</a>
<a href="#no">Link 2</a>
<a href="#no">Link 3</a>
</div>
</div>
</div>
</div>
</div>