Kategori: HTML & CSS Yorumlar: 4 11441 Okunma
AĞU 11
Kodlar tüm tarayıcılar için uyarlanmıştır. Lütfen yeni dosyaları indiriniz.

Bu makalemde CSS3 efektleriyle yapılmış bir yatay menü örneği ögreceksiniz.
Öncelikle HTML kodları şu şekildedir:
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Projeler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
Burada ul tag'ı ile bir liste oluşturduk.

Sıra geldi CSS kodlarına:
#menu { 
    width: 615px; 
    margin: 0 auto; 
    font-family: 'Ubuntu', sans-serif; 
}
"menu" id'li dive genişlik verip margin ile ortaladık.
ul { 
    border-radius: 3px; /* oval köşeler */
    background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%);
    /* background'daki gradient efekti */
    float: left; /* sola dayıyoruz */
    list-style-type: none; /* listeleme sembollerini yok ediyoruz */
    margin:0; 
    padding:0; /* margin ve padding sıfırlıyoruz */
    border: 1px solid #53cbf1; /* yan çizgi veriyoruz */
}
Açıklamalar kodların içindedir.
li { 
    float:left; 
    line-height: 30px; 
    border-right: 1px solid #87e0fd; 
}
Burada listeyi yan yana yazdırıp 30px yükselik veri sağ çizgi verdik.
li:nth-last-child(1) { border-right: none; }
Son elemanın, yani örneğimizde en solda olan elemanın sağ border'ını sıfırladık.
li:hover { background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%) }
li elemanının üzerine gelindiğinde farklı renklerle yine gradient efekti verdik.
li a { 
    text-decoration: none; 
    text-transform: uppercase; 
    color: #fff; 
    font-weight: bold; 
    font-size: 13px; 
    padding: 3px 30px; 
    display: block; 
    text-shadow: 1px 1px 0 #05abe0;
}
Linkin stilini verdik. text-shadow ile yazıya gölge efekti verdik. Sanırım diğerlerini açıklamaya gerek yok.
li a:hover { text-shadow: 1px 1px 0 #009ec3; }
Üzerine gelindiğinde gölgenin renklerini değiştirdik.

Bu kodlar Firefox'da sorunsuz çalışacaktır. Webkit tarayıcıları için şu şekilde kullanmanız gerekmektedir:
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%);

Oylama: 2.4/5 (Toplam 139 oy)


Özcan DAYIOĞLU (6 yıl önce)
#1
Başarılı anlatımların devamını bekliyoruz, teşekkürler :)
Kerimcan (6 yıl önce)
#2
Güzel bir menü olmuş, yeni projemde kullanmayı düşünüyorum.Teşekkürler..
Hüseyin (6 yıl önce)
#3
Yorumlarınız için teşekkürler :)

Devamıda gelecek inşallah.
Sezer (8 ay önce)
#4
Güzel anlatım yapılmış teşekkürler.

Yorum yap