Bu başlıkta, HTML ve CSS kullanarak basit ve şık bir hamburger menü nasıl yapılır, adım adım bulabilirsiniz. Hamburger menüler, mobil cihazlarda ya da küçük ekranlarda kullanılan popüler ve şık bir arayüz menü türüdür.
HTML Yapısı Oluşturma
Öncelikle hamburger menüyü oluşturmak için temel HTML yapımızı kurmamız gerekiyor. Hamburger menü genellikle üç yatay çizgiden oluşur. Bu yüzden her bir çizgi için bir <div> etiketi kullanacağız. Ayrıca hamburger menüye tıklayınca açılacak bir navigasyon menüsüne de ihtiyacımız var. Menüde görünmesi gereken bağlantıları (linkler) da bu aşamada ekleyelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menü</title>
</head>
<body>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<!-- Açılır Menü Yapısı -->
<nav class="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
</body>
</html>Bu kod, üç adet yatay çizgiyi temsil edecek üç tane div içeriyor. Burada nav etiketi içinde bir liste (<ul>) ile menü linklerini ekledik. Ancak bu menünün başlangıçta gizli olmasını ve sadece hamburger menüsüne tıklayınca açılmasını sağlayacağız.
CSS ile Hamburger Menüyü Şekillendirme
Şimdi HTML yapımıza stil vermek için CSS ekleyeceğiz. CSS kodların tamamını <head> bölümüne bir <style> alanı açıp oranın içine yazıyoruz.
Şimdi CSS kodları ile hamburger menünün görünümünü oluşturacağız. Her bir yatay çizgiyi aynı genişlikte ve yükseklikte olacak şekilde ayarlayacağız.
.hamburger-menu {
display: flex;
flex-direction: column;
width: 30px;
justify-content: space-between;
cursor: pointer;
background-color: #fff;
padding: 5px 10px;
border: 3px solid #9999;
border-radius: 5px;
margin: 0 auto;
}
.bar {
width: 100%;
height: 4px;
margin: 3px 0;
background-color: black;
}Buradaki .hamburger-menu sınıfında flexbox kullanarak menüyü dikey olarak hizaladık (flex-direction: column). Ayrıca menünün üzerine tıklanabilir olması için cursor: pointer; ekledik.
Ek olarak .bar sınıfında her bir çizginin genişliğini %100 yapıp, yüksekliği 4px olarak ayarladık. Çizgilerin rengini ise siyah olarak tanımladık.
Hover Efekti Eklemek
Menüye biraz hareket katmak için fareyle üzerine gelindiğinde (hover) bir renk değişikliği efekti ekleyelim. Böylece kullanıcılar menüye tıkladıklarını görsel olarak da anlayacaklar.
.bar:hover {
background-color: #3498db;
}Menüyü Mobil Uyumlu Hale Getirme (Responsive)
Hamburger menüler genellikle mobil cihazlar için kullanılır. O yüzden, menünün mobil uyumlu olduğundan emin olmalıyız. CSS @media query kullanarak menüyü mobil cihazlara uygun hale getireceğiz.
@media (max-width: 600px) {
.hamburger-menu {
width: 40px; /* Daha geniş mobil görünüm için */
}
}Buradaki @media (max-width: 600px) tanımı ekran genişliği 600px ve daha küçük olan cihazlarda uygulanacak. Menünün genişliğini biraz artırarak mobil cihazlara daha iyi görünmesini sağladık.
CSS ile Menü Stilleme ve Gizleme
Başlangıçta menü gizli olacak. Tıkladığımızda görünür hale gelmesini sağlayacağız.
.menu {
display: none; /* Başlangıçta gizli */
background-color: #333;
width: 100%;
margin-top: 10px;
border-radius: 5px;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
padding: 15px;
text-align: center;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.menu ul li a:hover {
background-color: #444;
}
/* Menü açıkken görünsün */
.menu.open {
display: block;
}Burada .menu sınıfının gizli olması için display: none; kullandık. Sonrasında .menu.open sınıfı menüye eklendiğinde display: block; ile menüyü görünür yapacağız. Ayrıca menü öğeleri (ul ve li) için basit bir stillendirme yaptık.
Menü Açılır/Kapanır Fonksiyonu (JavaScript ile)
Şimdi menünün açılmasını ve kapanmasını sağlamak için biraz JavaScript ekleyeceğiz. Hamburger menüye tıklandığında menü seçeneklerini gösterecek ya da gizleyecek bir animasyon yapacağız.
<script>
const menu = document.querySelector('.menu');
const hamburger = document.querySelector('.hamburger-menu');
hamburger.addEventListener('click', () => {
menu.classList.toggle('open'); // Menüye 'open' sınıfını ekleyip çıkarır
});
</script>menu.classList.toggle(‘open’) ile menüye tıklandığında open sınıfı eklenip çıkarılıyor. Bu sınıf CSS’te menünün açık ya da kapalı olduğunu belirleyecek.
Sonuç
Son aşamada ekran görüntüsü ve kodlarımız aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hamburger Menü</title>
<style>
.hamburger-menu {
display: flex;
flex-direction: column;
width: 30px;
justify-content: space-between;
cursor: pointer;
background-color: #fff;
padding: 5px 10px;
border: 3px solid #9999;
border-radius: 5px;
margin: 0 auto;
}
.bar {
width: 100%;
height: 4px;
margin: 3px 0;
background-color: black;
}
.menu {
display: none; /* Başlangıçta gizli */
background-color: #333;
width: 100%;
margin-top: 10px;
border-radius: 5px;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
padding: 15px;
text-align: center;
}
.menu ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
.menu ul li a:hover {
background-color: #444;
}
/* Menü açıkken görünsün */
.menu.open {
display: block;
}
</style>
</head>
<body>
<div class="hamburger-menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav class="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</nav>
<script>
const menu = document.querySelector('.menu');
const hamburger = document.querySelector('.hamburger-menu');
hamburger.addEventListener('click', () => {
menu.classList.toggle('open');
});
</script>
</body>
</html>Bu adımları takip ettiğinizde, tamamen CSS ve biraz JavaScript kullanarak bir hamburger menü yapmayı başarmış olacaksınız. Menüye tıklayarak test edebilir, responsive olarak mobil uyumluluğunu kontrol edebilirsiniz.
Yorumlar