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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<nav class="menu"> <ul> <li> <a href="#">Sayfa</a> <ul> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> </ul> </li> <li> <a href="#">Sayfa</a> <ul> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> <li><a href="#">Alt Sayfa</a></li> </ul> </li> </ul> </nav> |
Temel CSS Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.menu ul { list-style:none; margin:0; padding:0; background:#333; } .menu ul:before,.menu ul:after { content:""; display:table; } .menu ul:after { clear:both; } .menu ul > li { float:left; position:relative; } .menu a { display:block; padding:10px 20px; line-height:1.2em; color:#fff; border-left:1px solid #595959; } .menu a:hover { text-decoration:none; background:#595959; } .menu li ul { background:#273754; } .menu li ul li { width:200px; } .menu li ul a { border:none; } .menu li ul a:hover { background:rgba(0,0,0,0.2); } |
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ü
|
1 2 3 4 5 6 7 8 9 10 |
.menu li ul { position:absolute; left:-9999em; top:36px; } .menu ul > li:hover ul { left:0; } |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.menu li ul { position:absolute; left:0; top:36px; z-index:1; visibility:hidden; opacity:0; filter:alpha(opacity=0); -webkit-transition:200ms ease; -moz-transition:200ms ease; -o-transition:200ms ease; transition:200ms ease; } .menu ul > li:hover ul { visibility:visible; opacity:1; filter:alpha(opacity=100); } |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.menu li ul { position:absolute; left:0; top:36px; z-index:1; } .menu li ul li { overflow:hidden; height:0; -webkit-transition:height 200ms ease-in; -moz-transition:height 200ms ease-in; -o-transition:height 200ms ease-in; transition:height 200ms ease-in; } .menu ul > li:hover ul li { height:36px; } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.menu li ul li { overflow:hidden; max-height:0; -webkit-transition:max-height 500ms ease; -moz-transition:max-height 500ms ease; -o-transition:max-height 500ms ease; transition:max-height 500ms ease; } .menu ul > li:hover ul li { max-height:200px; } |
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ı
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.menu li ul { position:absolute; left:0; top:36px; z-index:1; max-height:0; overflow:hidden; -webkit-transform:perspective(400) rotate3d(1,0,0,-90deg); -webkit-transform-origin:50% 0; -webkit-transition:350ms; -moz-transition:350ms; -o-transition:350ms; transition:350ms; } .menu ul > li:hover ul { max-height:1000px; -webkit-transform:perspective(400) rotate3d(0,0,0,0); } |
İç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
[…] Yatay Açılır Menü Yapımı […]
[…] Yatay Açılır Menü […]
[…] […]