Nasıl Yapılır - Mega Menü
Bir mega menünün nasıl oluşturulacağını öğrenin (gezinme çubuğundaki tam genişlikli açılır menü).
Mega Menü
Mega Menü Oluşturun
Kullanıcı fareyi gezinme çubuğunun içindeki bir öğenin üzerine getirdiğinde görünen bir açılır menü oluşturun.
Adım 1) HTML'yi ekleyin:
Örnek
<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>
Örnek Açıklama
Açılır menüyü açmak için herhangi bir öğeyi kullanın, örneğin bir <button>, <a> veya <p> öğesi.
Açılır menüyü oluşturmak ve bir ızgara (sütunlar) eklemek ve ızgara içine açılır bağlantılar eklemek için bir kapsayıcı öğesi (<div class="dropdown-content"> gibi) kullanın.
Açılır menüyü CSS ile doğru şekilde konumlandırmak için düğmenin ve kapsayıcı öğesinin (<div class="dropdown-content">) etrafına bir <div class="dropdown"> öğesi sarın.
Adım 2) CSS'yi ekleyin:
Örnek
/* 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;
}
Örnek Açıklama
Gezinme çubuğunu ve gezinme çubuğu bağlantılarını arka plan rengi, dolgu vb. ile biçimlendirdik.
Açılır düğmeyi arka plan rengi, dolgu vb. ile biçimlendirdik.
Sınıf .dropdown-content
, gerçek açılır menüyü tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görüntülenecektir (aşağıya bakın). Açılır düğmenin hemen altında görünecek şekilde konumlandırılmıştır ve genişlik, tüm ekranı kapsayacak şekilde %100 olarak ayarlanmıştır.
Kenarlık kullanmak yerine, box-shadow
açılır menüyü bir "kart" gibi göstermek için özelliği kullandık. Ayrıca, açılır menüyü diğer öğelerin önüne yerleştirmek için z-endeksini kullanırız.
Seçici :hover
, kullanıcı fareyi açılır düğmenin üzerine getirdiğinde açılır menüyü göstermek için kullanılır.
.column
Sınıflar, açılır menü içinde yan yana kayan üç sütun oluşturmak için kullanılır (farklı kategorileri göstermek için) .
Duyarlı Mega Menü
Örnek
/* 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;
}
}
İpucu: Açılır listeler hakkında daha fazla bilgi edinmek için CSS Açılanlar Eğitimimize gidin .
İpucu: Tıklanabilir açılır menüler hakkında daha fazla bilgi edinmek için Tıklanabilir Açılır Listelerimize gidin
İpucu: Gezinme çubukları hakkında daha fazla bilgi edinmek için CSS Navbar Eğitimimize gidin.
İpucu: Duyarlı bir gezinme çubuğunun nasıl oluşturulacağını öğrenmek için Duyarlı Üst Gezinmemize gidin.