CSS Kutu Modeli İle Responsive Tab Menü Oluşturma

Adı : CSS Kutu Modeli İle Responsive Tab Menü Oluşturma

Günümüz web tasarımında, responsive (duyarlı) özellikler çok önemlidir. Özellikle mobil cihazların yaygınlaşmasıyla birlikte, web sayfalarının mobil cihazlarda da rahatlıkla görüntülenebilmesi ve kullanılabilmesi oldukça önemlidir. Bu amaçla, responsive tasarım teknikleri kullanılmaktadır. Bu yazıda, CSS kutu modeli ile responsive tab menü oluşturma konusunu ele alacağız.
Tab menü, web sayfalarında sıklıkla kullanılan bir navigasyon türüdür. Bu menü, sayfada farklı sayfalara ya da bölümlere hızlıca erişim sağlayan bir araçtır. Responsive tab menü tasarımları, mobil cihazların görece küçük ekranlarında da kullanışlı olacak şekilde tasarlanmalıdır.
Responsive tab menü tasarımı yaparken, CSS kutu modeli kullanılarak kutular oluşturulur. Bu kutular, sayfanın genişliği ve yüksekliği gibi özelliklerinden bağımsız olarak belirlenirler.
Öncelikle HTML kodunu oluşturarak başlayalım. Aşağıdaki örnekte, tab menümüz için gerekli olan HTML kodu yer almaktadır:
```

```
Bu kodda, `div` etiketiyle bir `tab-menu` sınıfı oluşturulmuştur. Bu sınıf içinde, `ul` etiketi kullanılarak liste oluşturulmuştur. Liste elemanları `li` etiketi ile belirtilirken, etiketlerin içindeki \"a\" etiketleriyle sayfalar arasındaki bağlantı sağlanmıştır.
Şimdi, CSS kutu modeli kullanarak kutuları oluşturmaya başlayalım. Aşağıdaki CSS kodu, tab menümüzün kutularını oluşturacaktır:
```
.tab-menu {
background-color: #333;
width: 100%;
text-align: center;
}
.tab-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.tab-menu li {
display: inline-block;
margin-right: 20px;
}
.tab-menu li:last-child {
margin-right: 0;
}
.tab-menu a {
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
.tab-menu a:hover {
background-color: #555;
}
```
Bu kodda, `tab-menu` sınıfı için, genişliği `100%` olarak ayarlandı. Daha sonra, `background-color` özelliğiyle arka plan rengi belirlendi. `ul` etiketi için, `list-style`, `padding` ve `margin` özellikleri sıfırlandı. `li` etiketleri için, `display` özelliği `inline-block` olarak ayarlanarak, yatay olarak sıralanmaları sağlandı. `margin-right` özelliği kullanılarak, elemanlar arasındaki boşluğun ayarlanması sağlandı. Her öğenin yan yana yerleştirildiği için, `last-child` özelliği kullanılarak son ögenin sağdan yan yana yerleştirmesi engellendi. \"a\" etiketleri, `display` özelliğiyle blok haline getirildi. Kutulara `padding`, `text-decoration` ve `color` özellikleri eklenerek, bağlantıların görünümü belirlendi. Cursors, \"hover\" olursa değişebilir.
Bu kod ile tab menümüzün görünümü aşağıdaki gibi olacaktır:
Şimdi responsive (duyarlı) özellikleri ekleyelim.
```
@media (max-width: 768px) {
.tab-menu ul {
display: none;
}

.tab-menu.active ul {
display: block;
position: absolute;
top: 50px;
left: 0;
width: 100%;
background-color: #555;
}
.tab-menu.active li {
display: block;
margin: 0;
}
.tab-menu.active a {
display: block;
border-bottom: 1px solid #fff;
}

.tab-menu .menu-toggle {
display: block;
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
cursor: pointer;
}
}
```
Bu kodda, `@media` sorgusu kullanılarak, ekranın genişliği `768px` den küçük olduğunda, menü elemanlarının görüntülenmesi durdurulmuştur. Daha sonra, mobil cihazlarda menüye erişmek için bir menü düğmesi eklenerek, kullanıcılara daha kolay bir navigasyon deneyimi sunulmuştur. `.tab-menu .menu-toggle` sınıfı, menü düğmesi için belirlenen sınıftır.
`tab-menu.active` sınıfı, menü düğmesine tıklandığında menünün görünür hale gelmesi için kullanılmaktadır. `ul` etiketine, `position` özelliğiyle mutlak bir değer atanarak, sayfanın üst kısmında sabitlenmesi sağlanmıştır. Sonra, menü elemanlarının blok haline dönüşmesi için `display` özelliği değiştirilirken, `li` elemanlarının arasındaki boşluklar da sıfırlandı. Bağlantı elemanlarının yanına, alt çizgi çekmek için `border-bottom` özelliği kullanılarak, bağlantılar arası ayrım sağlandı.
Menü düğmesine tıklandığında, menünün görünür hale gelmesi için JavaScript kullanabilirsiniz. Ancak, bu yazının konusu dışında olduğu için, bunu ele almıyoruz.
Yukarıdaki kodlarla oluşturulan tab menüsü, herhangi bir cihazda kullanılabilecek şekilde tasarlanmıştır ve görüntüsü aşağıdaki gibidir:
Sık sorulan sorular:
- Responsive tab menüsü, neden önemlidir?
Günümüzde çoğu insan, internette gezinmeyi mobil cihazlar üzerinden gerçekleştiriyor. Bu sebeple, responsive tab menüleri, mobil cihazlar için uygun navigasyon araçları olarak düşünülmelidir. Bu menüler, mobil cihazların küçük ekranlarına uyum sağlaması için tasarlanmıştır.
- Responsive tab menüsü, nasıl çalışır?
Responsive tab menüleri, kullanıcının cihazının boyutuna göre tasarlanır. Ekran boyutu küçüldüğünde, menülerin sık kullanılan öğelerinin yanı sıra, menü elemanları gizlenir ve düğmeye tıklandığında açılır.
- Responsive tab menüsü, nasıl tasarlanır?
Responsive tab menülerinin tasarımı için, CSS kutu modeli kullanılır. Menüler kutular şeklinde düşünülür ve bu kutuların boyutları, sayfanın genişliği gibi özelliklerinden bağımsız olarak belirlenir. Ekran boyutu küçüldüğünde, menü elemanları sık kullanılan öğelerin yanı sıra, düğmeye tıklandığında açılır.