Buradasın
HTML ve CSS Eğitim Seti: 35. Ders - Yatay Menü Oluşturma ve Mobil Uyumlu Tasarım
youtube.com/watch?v=C48LxURidCgYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, HTML ve CSS eğitim setinin 35. dersi olup, bir eğitmen tarafından sunulmaktadır. Eğitmen, geçen derste oluşturulan dikey menüyü kullanarak yatay bir menü oluşturma sürecini adım adım göstermektedir.
- Videoda, yatay menü oluşturma için CSS kodlarının nasıl yazılacağı detaylı olarak anlatılmaktadır. Eğitmen önce temel menü yapısını oluşturmak için listeleri düzenleyip, float left özelliği kullanarak yan yana sıralamaktadır. Ardından menüye renk, padding, border gibi stil özellikleri ekleyerek görünümünü geliştirmektedir. Ayrıca CSS3 özelliklerinden faydalanarak hover efektleri, active class kullanımı ve mobil uyumluluğu sağlama teknikleri gösterilmektedir. Video, menünün sabit pozisyonlandırma ve ekran boyutuna göre adaptif davranışını ayarlama konularıyla devam etmektedir.
- 00:11Yatay Menü Oluşturma
- HTML ve CSS eğitim setinin 35. dersinde, bir dikey menüden yola çıkarak yatay bir menü oluşturulacak ve mobil uyumlu hale getirilecek.
- Menü için önce list style type temizlenip, margin ve padding değerleri sıfırlanıyor.
- Menünün yan yana listelenmesi için float left özelliği kullanılıyor ve linkler için padding, display block ve text decoration none özellikleri uygulanıyor.
- 02:32Menü Stilizasyonu
- Menü için font ailesi değiştirilip, font size arttırılarak daha şık bir görünüm sağlanıyor.
- Active class adında bir sınıf oluşturulup, aktif sayfaya kırmızı arka plan veriliyor.
- Hover özelliğine sahip linkler için farklı bir arka plan rengi uygulanıyor, ancak aktif sayfada hover etkisi uygulanmamak için CSS3 özelliklerinden faydalanılıyor.
- 05:14Menü Düzenlemeleri
- Son menü elemanını en sağa çekmek için float right özelliği kullanılıyor.
- Menü elemanları arasına çizgi eklemek için border-right özelliği uygulanıyor.
- Son menü elemanına çizgi eklenmemesi için CSS3'in last-child sudo class özelliği kullanılıyor.
- 08:18Sabit Menü ve Mobil Uyumlu Hali
- Menüyü sayfa aşağı indikçe beraber aşağı inmesi için position fixed özelliği kullanılıyor ve genişliği %100 olarak ayarlanıyor.
- Menünün arkasında kalan içerikler için padding ve margin değerleri uygulanıyor.
- Mobil uyumluluğu sağlamak için viewport meta tagi ekleniyor ve ekran genişliği 600 pikselin altına indiğinde menü alt alta inmesi sağlanıyor.