CSS Yardımıyla Akıcı Menü Tasarımı: Hamburger Menüler

Adı : CSS Yardımıyla Akıcı Menü Tasarımı: Hamburger Menüler

Akıcı Menü Tasarımı: Hamburger Menüler
Hamburger menüler, mobil cihazlar için tasarlanan akıcı menülerdir. Bu menüler, genellikle üst düzey navigasyon seçeneklerini gizlemek için kullanılır. Kullanıcının sayfada dolaşması gerektiğinde, menü butonuna basarak açılır menüyü açar ve istediği seçeneği seçebilir. Bu şekilde, ekranın yüzey alanı daha iyi kullanılır ve kullanıcı deneyimi artar.
Hamburger menülerinin kullanımı son yıllarda popüler hale gelmiştir ve CSS ile kolayca tasarlanabilirler. Bu yazıda, hamburger menülerin CSS ile nasıl tasarlanabileceğini öğreneceğiz.
Temel Hamburger Menü Tasarımı
Hamburger menüsünü tasarlamak için öncelikle HTML kodunu oluşturmalıyız. Aşağıda, basit bir hamburger menü kodu görüyorsunuz.
```html

```
Bu kodda, \"hamburger-menu\" sınıfı ana menüyü kapsayan div elementidir. \"hamburger\" sınıfı, üç hamburger iconunu içeren div elementidir.
Menü iconunu tasarlamak için CSS kodu aşağıdaki gibi olacaktır.
```css
.hamburger {
width: 30px;
height: 3px;
background-color: #000;
margin: 6px auto;
}
.hamburger:first-child {
margin-top: 0;
}
.hamburger:last-child {
margin-bottom: 0;
}
```
Bu kodda, hamburger iconunun boyutu, arka plan rengi ve dikey ortalamaları belirtilmiştir. \"first-child\" ve \"last-child\" seçicileri, hamburger iconlarının doğru şekilde yerleştirilmesini sağlar.
Açılır Menü Tasarımı
Hamburger menü iconunu tasarladıktan sonra, açılır menüyü tasarlayabiliriz. Bu koşulu göstermek adına, basit bir açılır menü tasarlayacağım. HTML kodu aşağıdaki gibi olacaktır.
```html


```
Bu kodda, \"nav-menu\" sınıfı, açılır menüyü kapsayan div elementidir. \"ul\" elementi, menü seçeneklerini içerir.
Açılır menüyü CSS ile görsel olarak tasarlamak için aşağıdaki kodu kullanabilirsiniz.
```css
.nav-menu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
transition: all 0.4s ease-in-out;
}
.nav-menu.active {
left: 0;
}
.nav-menu ul {
margin-top: 150px;
padding: 0;
list-style-type: none;
}
.nav-menu ul li {
margin: 10px 0;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
font-size: 24px;
}
```
Bu kodda, \"fixed\" konumlandırması açılır menüyü ekranın üst kısmında sabitler. \"left\" özellikleri ile menü sol tarafta başlangıçta gizlenir, \"width\" ve \"height\" özellikleri ile menüyü tam ekran boyutuna ayarlanır.
CSS'deki \"transition\" özelliği, menünün oluşturma sürecini animasyonlu hale getirir. \".nav-menu.active\" seçicisi, menünün sol taraftan kayarak gösterilmesini sağlar.
\"ul\" ve \"li\" seçicileri, menü madde yapısının oluşturulmasını sağlar. \"a\" seçicisi, menü öğelerine link eklenmesini sağlar.
Sık Sorulan Sorular
S: Hamburger menüler neden bu kadar popüler oldu?
C: Mobil cihazların kullanım oranı arttıkça, akıcı menülerin tasarımı daha önemli hale geldi. Hamburger menüleri, kullanıcılara ekran alanından tasarruf edilmesi ve mobil deneyimin iyileştirilmesi sağlar.
S: Hamburger menüleri, kullanıcı deneyiminin düşmesine sebep olabilir mi?
C: Hamburger menülerin kullanımı, kullanıcılara menünün nerede olduğunu bulmalarında zorluk çıkartabilir. Ancak doğru şekilde kullanıldığında, hamburger menüleri kullanıcı deneyiminin artmasına yardımcı olur.
S: Hamburger menülerin tasarımında nelere dikkat etmeliyiz?
C: Hamburger menülerin tasarımında, menu iconunun doğru şekilde tasarlanması, menü öğelerinin açıldığında yeteri kadar kolay görülebilmesi ve menü seçeneklerinin açılır menüde kolaylıkla bulunabilmesi önemlidir.