Perşembe , 23 Kasım 2017
Anasayfa » WEB » CSS » CSS Açılır Menü Yapımı

CSS Açılır Menü Yapımı

Daha önceki yazılarda da belirtmiştim. Dolaşım bir sitenin en önemli bileşenidir. Kullanıcının site üzerinde rahat bir şekilde gezinmesi için anlaşılır ve basit olması gerekir. Sadece bunları yapmak yeterli olmayabilir. Menüye çok karışık olmak şartı ile animasyon katmak da kullanıcının ilgilisi çekebilir. Bu yazıda CSS ve Jquery kullanarak temel bir açılır menü yapacağız.  Bu örnekteki temel amaç CSS3 bileşenleri ve JavaScripti harmanlayarak kullanıcıya hoş görünen menü oluşturmaktır.

Sitedeki diğer menü örnekleri için de aşağıdaki bağlantılara tıklayabilirsiniz.

Yatay Açılır Menü

CSS Menü Yapımı

Yatay Menü Yapımı

Yazının sonunda hazırlanacak menü aşağıdaki gibi olacaktır.

Jquery

Örneğin hazırlanmasında jquery kullanıldığı için projenin başına jquery dosyasını dahil etmeyi unutmayın. Ben CDN olarak kullandığım için CDN kodunu ekliyorum.

 

HTML

Menüyü oluşturacak olan temel HTML iskeleti aşağıdaki gibi oluşturdum. alt menü öğeleri için d-menu sınıf ismini verdim. Bu ismi css yazarken kullanacağım.

 

CSS

Menüyü ortalamak ve ul etiketini biçimlendirmek için aşağıdaki gibi CSS kodlarını yazdıktan sonra ilk seviyedeki li etiketini biçimlendirme kodlarına geçiyorum.

 

İlk seviyedeki Anasayfa, hakkımızda, yazılım vs. öğelerini biçimlendirmek için aşağıdaki gibi CSS kodlarını yerleştiriyorum. Yatay menü olduğu için nesnelerin yatay gelmesi ve a etiketlerinin biçimlenmesi için gerekli kodların tamamını burada yazıyorum.

 

d-menu olarak berlirttiğim alt etiketlerin biçimlendirmesi için gerekili olan kodları aşağıdaki gibi sırasıyla yazıyorum. Bu kısıma kadar yazılanlar sade açılır menü için gerekli kodları içermekte. Menü animasyon katmak için CSS3 ile gelen animate özelliğini kullanmamız gerekiyor.

 

Animasyon

Animasyon eklemek için gerekili CSS kodlarını aşağıdaki gibi yazıldı. Bu kısımda dikkat edilmesi gereken anim adındaki animasyonu hazırlamak için @keyframes tanımlamasını kullanmak gerektiğidir.  animasyonun ilk saniyesinden son saniyesine kadar yapılacak animasyon da @keyframes içinde bildirilmektedir. Bu işlemleri yaptıktan sonra jquery ile her bir alt öge için animasyon süreleri(delay ve duration) belirtmek gerekiyor.

nav ul li:hover ul.d-menu li{

JavaScript

Her d-menu ögesi için each metodu ile nesneler üzerinde dönüyoruz. Yine her alt nesne içinde ikinci each metodu ile alt nesneler üzerinde dönüyoruz. her bir  ul.d-menu li nesnesi için delay ve duration süreleri belirtip animasyonun oluşmasını sağlıyoruz. burada animasyon her bir nesne için 300ms ve gecikmede 100ms olarak belirlenmiştir.

 

HTML-CSS-JavaScript

Bu kadar açıklamadan sonra kodların son hali aşağıdaki gibi oluşacaktır.

 

 

 

 

Hakkında Hayri

İlginizi Çekebilir

CSS Tablo Düzenleme

Verileri bir düzen içinde tutmak ve bu verileri kullanıcıların kolay bir biçimde okuyabileceği basit bir …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir