OOP Kullanarak JavaScript'te Hamburger Menü Oluşturma

Adı : OOP Kullanarak JavaScript'te Hamburger Menü Oluşturma

JavaScript, web sayfalarının tasarımında ve kullanımında oldukça önemli bir role sahip olmuştur. Özellikle kullanıcı deneyimini artırmak adına yapılan UI/UX çalışmalarında, JavaScript kullanımı giderek daha da yaygınlaşmaktadır. Bu yazımızda, OOP kullanarak JavaScript ile hamburger menü oluşturma konusunu ele alacağız.

Hamburger menü, son yıllarda mobil cihazların artması ile birlikte web tasarımcılar tarafından oldukça sık tercih edilen bir menü türüdür. Bu menü türü, ekranın küçük olması ya da içeriğin fazla olması durumlarında kullanım kolaylığı sağlar. Gelin, hamburger menü oluşturma konusunda adımları birlikte inceleyelim.

1- Proje Yapısı

Öncelikle, proje için bir klasör oluşturup, içine HTML ve JavaScript dosyalarını ekleyelim. HTML dosyasında, hamburger menümüzü oluşturmak için gerekli olan HTML kodlarını yazalım.

```javascript

```

2- CSS Dosyası Oluşturma

HTML dosyamızdan sonra, CSS dosyamızı oluşturalım ve hamburger menümüzün stilini belirleyelim.

```javascript
header {
background-color: #333;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
display: flex;
justify-content: space-between;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: flex-end;
}
.menu > ul {
display: flex;
}
.menu > ul > li {
margin-left: 15px;
}
.menu > ul > li:first-child {
margin-left: 0;
}
.menu > ul > li > a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.logo img {
height: 70px;
padding: 10px;
}
.menu-icon {
cursor: pointer;
color: #fff;
font-size: 22px;
padding: 15px 20px;
}
```

Bu kodlarla, menümüzün tasarımını tamamladık. Şimdi, OOP mantığı ile hareket ederek menümüzün çalışma mantığını belirleyelim.

3- JavaScript Kodlarını Oluşturma

JavaScript dosyamızda ilk olarak, hamburger menümüzün açılıp kapanma işlemini gerçekleştiren bir fonksiyon yazalım. Bu fonksiyon, menümüzün açılıp kapanmasını kontrol edecek.

```javascript
function toggleMenu(){
const menu = document.querySelector('.menu');
const menuIcon = document.querySelector('.menu-icon');

if(menu.classList.contains('active')){
menu.classList.remove('active');
menuIcon.innerHTML = '';
} else {
menu.classList.add('active');
menuIcon.innerHTML = '';
}
}
```

Bu fonksiyon, menüyü düzenlemek için gerekli olan HTML kodlarını ve CSS sınıfını kullanır. Eğer menü, \"active\" sınıfı varsa, bu fonksiyon çağırılınca menü kapatılır. Eğer menü \"active\" sınıfı yoksa, bu fonksiyon çağırılınca menü açılır.

Ardından, hamburger menümüzün açılıp kapanmasını sağlayacak butonu seçelim ve üzerine bir \"click\" event'i ekleyelim.

```javascript
const menuIcon = document.querySelector('.menu-icon');
menuIcon.addEventListener('click', toggleMenu);
```

Son olarak, hamburger menüsünün herhangi bir yerine tıklandığında, menü kapanmalıdır. Bu işlem için, getMenuArea() adında bir fonksiyon oluşturarak menünün bulunduğu alanın tıklanmış olup olmadığını kontrol edelim.

```javascript
function getMenuArea() {
return document.querySelector('header');
}

const menuArea = getMenuArea();
menuArea.addEventListener('click', function(e) {
const menu = document.querySelector('.menu');

if (menu.classList.contains('active') && !menu.contains(e.target)) {
toggleMenu();
}
});
```

Bu kodlarla birlikte, hamburger menümüzün çalışma sistemi tamamlanmış oldu. Artık, menümüz, tıklanılan butona göre açılıp kapanabilecek ve herhangi bir yere tıklandığında otomatik olarak kapanacaktır.

Sık Sorulan Sorular

1- Hamburger Menü, Neden Beğenilmekte?

Hamburger menü, kullanım kolaylığı sağlaması sebebiyle tercih edilmektedir. Özellikle mobil cihazlar için tasarlanan web sitelerinde, ekranın küçük olması nedeniyle tüm menü seçeneklerini görmenin zorluğu nedeniyle hamburger menü tercih edilmekte.

2- Hamburger Menünün CSS Kodlarında Neler Var?

Hamburger menü tasarımında, background-color, position, left, top, width, margin, padding, list-style, display, justify-content, color, text-decoration, font-size, height, cursor gibi CSS özellikleri kullanılmaktadır.

3- Hamburger Menü Kodlarında Hangi JavaScript Fonksiyonları Kullanılıyor?

Hamburger menümüz oluşturulurken JavaScript'te event listener ve conditional statements gibi kullanımlar mevcuttur.

4- Hamburger Menünün JavaScript Kodlarında Hangi OOP Kullanımı Bulunmaktadır?

Hamburger menünün çalışma mantığının belirleyen JavaScript kodlarında, OOP mantığı ile hareket edilmiştir. Bu kodlar içinde bir fonksiyon yazılmış ve fonksiyonlar birbirini çağırmıştır. Böylece gereksiz kod kullanımının önüne geçilmiştir."