Pazartesi , 23 Ocak 2017
Anasayfa » WEB » CSS » Yatay Açılır Menü Yapımı

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

Bu yazıda yatay açılır menü yapıp aşamalarını ele alacağız. Menülerin temelinde liste etiketleri kullanılır. Bu yüzden bir tane liste etiketi oluşturarak başlayacağız.

Menülerin tasarımları genellikle dikey, yatay, dikey açılır ve yatay açılır olarak dört gruba ayrılabilir. Bu yazıda animasyonlu yatay açılır menü kavramı örneklerle açıklanmaktadır. Yatay diğer yatay açılır menü örneği için Yatay Menü Yapımı yazısına ulaşabilirisiniz.

Öncelikle içine dahil edeceğimiz div etiketinin yazımı ile başlayalım. Bunun için HTML5 ile tasarımlarımıza giren nav (div etiketinden farksızdır) etiketi ile listemizi aşağıdaki şekilde oluşturuyoruz.

HTML

 

 

Temel CSS Kodları

Animasyon ve açılır menü için kullanılacak CSS kodlarını yukarıdaki kodlara ekleyerek yazıyoruz. Yukarıdaki menüyü temel alarak açılır menü için .menu ul >li içindeki postion:relative ifadesinin yazılmasının zorunlu olduğunu unutmayın.

Yukarıdaki kodları kullanarak aşağıdaki 5 tane CSS Yatay Açılır Menü Yapımı için gerekli olan CSS kodlarını , kodların kullanım amaçlarını  ve CSS Yatay Açılır Menü Örneklerini inceleyebilirisniz.

Sade Açılır Menü

DEMO

Animasyon olmadan sadece açılır menü oluşturmak için bir alttaki ul değerini ekranda görünmeyecek bir alana çekip kapalı düşüncesini oluşturuyoruz. Bunun için .menu li ul  için position: absolute ve left:-9999px yapmak yeterli olacaktır.  Altaki ul etiketini sola çektiğimizde tarayıcıda kaydırma çubuğu oluşmaz ama tam tersi right için yapmış olsaydık kaydırma çubuğu hoş olmayan bir görüntüyle karşımıza çıkacaktı.

Fare ile mevcut li üzerine geldiğimizde altındaki ul etiketinin :hover özelliğine left:0 verip menünün ekranda görünmesini sağlayacağız.Bu yöntem açılır menü yapmanın en sade yoldur.

 

 Fade In/Out Menü Yapımı

DEMO

Yine yukarıdaki temel CSS kodlarını  üzerinden yazarak menüye basit bir animasyon katalım. Bu işlem için CSS ile visibility ve opacity özelliklerini kullanıyoruz.  Bir önceki örneğin aksine bu seferki örnekte alt menü olması gereken yerde konumlanıyor. left:0 olarak kalıyor.  Kapalı olduğu durumda visibility:hidden ve opacity:0 olarak  ayarlanıyor. Fare ile ilk seviyedeki li üzerine geldiğimizde visibility:visible ve opacity:1 olarak ayarlanıyor.  Tabi burada animasyonlu gelmesi için transation niteliğini kullanmak gerekiyor.  200ms hızında ve standart ease animasyonunu her tarayıcı verisyonuna uygun olarak yazıyoruz.

 

Slide Down Menü Yapımı

DEMO

Hazırlanan menüler içinde en kullanışlı olanı bu tasarım olduğu gerçeği üzerinden yapılanları açıklayalım. Burada ilk konumda height:0 yapıp, dışında kalan alanları da gizlemek için overflow:hidden yapıyoruz.

İlk seviyedeki li etiketinin üzerine geldiğimizde alt seviye ul içindeki li etiketlerinin yüksekliğini belirliyoruz.(her etiketi 36px olarak düzenliyoruz)

 

Slide Down Menü Yapımı 2

DEMO

Diğer bir yaklaşım yöntemi de yine yukarıdaki menü yapısına benzer olarak bu seferde li etiketlerini yükseklik vermek yerine ikinci seviyedeki ul etiketine max-height vererek yapıyoruz. Animasyon hızı ile menü yüksekliğine göre küçük oynama yapmak gerekli olabiliyor.

3D açılır Menü Yapımı

DEMO

İçerisindeki en ilgi çekici meü tasarımlarından biri olan katlanarak açılan menü tasarımı. Bu tasarımda perspective ve rotate3d özellikleri kullanılmıştır.

 

Kaynak:

http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions-part-2

 

Hakkında Hayri

İlginizi Çekebilir

CSS ile Tablo Ortalama

Css kullanarak block ve table nesnelerini ortalamak için dışarıdaki boşlukarı auto yapmak gerekir. Aşağıdaki kod …

Bir Cevap Yazın

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

Wordpress Tema indir