CSS ile Çok Katmanlı Açılır Menü Yapmak

Menüler, web sitelerin genelinin temel kısmını oluşturan unsurlardan birisidir. Böylesine önemli bir unsurun işlevselliği de hayli önemlidir. Standart menülerden ziyade daha çok katmanlı şekilde açılır menülere ihtiyaç duyulması durumunda bunu pratik bir şekilde çözmek için uygulanması gereken iki basit adım var.

1. Adım: HTML

<nav class="menu">
<ul class="menu-ic">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li class="ustmenu"><a href="#">Kategoriler</a>
<ul class="altmenu">
<li><a href="#">Cemal Süreya</a></li>
<li><a href="#">Özdemir Asaf</a></li>
<li><a href="#">Nazım Hikmet Ran</a></li>
<li><a href="#">Mehmet Akif Ersoy</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
<li class="ustmenu"><a href="#">Arşiv</a>
<ul class="altmenu">
<li><a href="#">2014</a></li>
<li class="ustmenu"><a href="#">2015</a>
<ul class="altmenu">
<li><a href="#">01/2015</a></li>
<li><a href="#">02/2015</a></li>
<li><a href="#">03/2015</a></li>
</ul>
</li>
<li><a href="#">2016</a></li>
</ul>
</li>
</ul>
</nav>

Yukarıdaki CSS kodları uygulandığında aşağıdaki gibi bir görüntü elde edilecektir.

CSS ile Çok Katmanlı Açılır Menü Yapmak

Üçüncü katmana kadar açılır menü kodları HTML ile hazır durumda. <ul> ve <li> etiketleri de gereken açıklamaları class içerisinde alt menü ve üst menü olarak içermektedir.

2. Adım: CSS

ul.menu-ic {
margin: 80px auto 0px;
padding: 0px 10px;
width: 760px;
background: #fcfcfc;
height: 50px;
font-size: 14px;
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
}
ul.menu-ic li {
list-style: none;
float: left;
padding: 0px;
margin: 0px;
line-height: 50px;
display: block;
position: relative;
text-transform: uppercase;
}
ul.menu-ic li a {
color: #777;
padding: 0px 15px;
margin: 0px;
display: block;
}

Bu kısımda 760px genişliğinde ve 50px yüksekliğinde bir menü oluşturuluyor. Burada dikkat edilmesi gereken kısım position relative değerinin atanmış olması. Bu kısım alt menülerin listelenebilmesi adına önem teşkil etmektedir.

CSS ile Çok Katmanlı Açılır Menü Yapmak

Bu şekilde bir görüntü elde ettiyseniz korkmayın her şey yolunda gidiyor demek. CSS kodları eklendikçe çok daha iyi sonuçlar ortaya çıkacaktır.

.menu-ic ul.altmenu{
width: 180px;
padding: 0px;
margin: 0px;
background: #fcfcfc;
position: absolute;
top:50px;
left:0px;
display:none;
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
}

Yukarıdaki kod satırı ise alt menüleri şekillendirmeyi sağlıyor. Burada dikkat edilmesi gereken top 50px değişkenidir. Bu değişken ile daha önceden 50px olarak belirlenen menü yüksekliği buraya girilerek alt menülerin 50px aşağıda -yani menünün bittiği kısımda- çıkması sağlanıyor. Daha sonra ise display none ile görünmesini engelleniyor çünkü üzerine geldiğinde açılması gerekmekte. Unutulmaması gereken bir nokta da widt 180px ile genişliği 180px olarak ayarlanıyor.

.menu-ic ul.altmenu ul{
left: 180px;
top:0px;
}
.menu-ic ul.altmenu li{
padding: 0px;
margin: 0px;
display: block;
float: none;
border-bottom: 1px solid #eee;
line-height: 40px;
text-transform: none;
}
.menu-ic ul.altmenu li:last-child{
border: none;
}

Yukarıdaki kodlar yardımı ile diğer katmanlar soldan 180px öteleniyor ve uygun konumda açılması sağlanıyor. Ayrıca birkaç ufak düzenleme de içeriyor elbette.

.menu-ic li:hover > ul{
display:block;
}
.menu-ic ul li:hover > ul{
display:block;
}

Son olarak menülerin üzerine gelindiğinde gözükmesi için display block ekleniyor ve böylece CSS kodları da tamamlanmış oluyor.

Yapılan işlemler sonucunda elde edilen menüyü buraya tıklayarak görüntüleyebilirsiniz ve örnek dosyayı buraya tıklayarak indirebilirsiniz.

Animasyon Eklemek

Menü açılışlarına CSS ile çeşitli animasyonlar eklemek de mümkün. 5 farklı animasyon içerisinden dilediğinizi kullanabilirsiniz. Bunu yapabilmek için yalnızca animate.css adresine giderek dosyayı indirmek ve <head> etiketleri arasında CSS dosyasını çağırmak. Bu işlemi yaptıktan sonra istenilen şekilde animasyon eklemek mümkün olacaktır.

Animasyon 1

.menu-ic li:hover > ul{
display:block;
-moz-animation: fadeInUp .3s ease-in ;
-webkit-animation: fadeInUp .3s ease-in;
animation:fadeInUp .3s ease-in;
}
.menu-ic ul li:hover > ul{
display:block;
-moz-animation: fadeInRight .3s ease-in;
-webkit-animation: fadeInRight .3s ease-in;
animation:fadeInRight .3s ease-in;
}

Örneği Görüntüle

Animasyon 2

.menu-ic li:hover > ul{
display:block;
-moz-animation: fadeInDown .3s ease-in;
-webkit-animation: fadeInDown .3s ease-in;
animation:fadeInDown .3s ease-in;
}
.menu-ic ul li:hover > ul{
display:block;
-moz-animation: fadeInLeft .3s ease-in;
-webkit-animation: fadeInLeft .3s ease-in;
animation:fadeInLeft .3s ease-in;
}

Örneği Görüntüle

Animasyon 3

.menu-ic li:hover > ul{
display:block;
-moz-animation: fadeIn .3s ease-in;
-webkit-animation: fadeIn .3s ease-in;
animation:fadeIn .3s ease-in;
}
.menu-ic ul li:hover > ul{
display:block;
-moz-animation: fadeIn .3s ease-in;
-webkit-animation: fadeIn .3s ease-in;
animation:fadeIn .3s ease-in;
}

Örneği Görüntüle

Animasyon 4

.menu-ic li:hover > ul{
display: block;
-moz-animation: zoomIn .3s ease-in;
-webkit-animation: zoomIn .3s ease-in;
animation: zoomIn .3s ease-in;
}
.menu-ic ul li:hover > ul{
display: block;
-moz-animation: zoomIn .3s ease-in;
-webkit-animation: zoomIn .3s ease-in;
animation: zoomIn .3s ease-in;
}

Örneği Görüntüle

Animasyon 5

.menu-ic li:hover > ul{
display: block;
-moz-animation: flipInX .3s ease-in;
-webkit-animation: flipInX .3s ease-in;
animation: flipInX .3s ease-in;
}
.menu-ic ul li:hover > ul{
display: block;
-moz-animation: flipInX .3s ease-in;
-webkit-animation: flipInX .3s ease-in;
animation: flipInX .3s ease-in;
}

Örneği Görüntüle

06.03.2015 CSS, HTML Yorum yapılmamış

, , , ,

Yorum yapılmamış

Yorum Yazın

kod.gen.tr