CSS3 Pseudo Sınıfları ile Dikey Menü Yapımı

Bu dersimizde CSS3 Pseudo ile standartların dışında dikey bir menü yapacağız, aynı zamanda bu özellikleri çok farklı amaçlar için uyarlayabilirsiniz.

Bu dersimizde CSS3 Pseudo ile standartların dışında dikey bir menü yapacağız, aynı zamanda bu özellikleri çok farklı amaçlar için uyarlayabilirsiniz.

Bu dersimizde css3 ile farklı bir şekilde menü tasarlayacağız. Öncelikle html kodlarımızı görelim.


<div>

<ul id="menu"> 

<li><a href="#">burada bir baglanti var</a></li>

<li><a href="#">burada bir baglanti var</a></li>

<li><a href="#">burada bir baglanti var</a></li>

<li><a href="#">burada bir baglanti var</a></li>

<li><a href="#">burada bir baglanti var</a></li>

</ul></div>



Yukarıda tasarımımızın html kodları bulunmakta. Yazacağımız id tipi css kodları ile buraya hükmedeceğiz.

İşte css kodlarımız;


#menu {list-style-type:none; margin:0; padding:0}

#menu li{border-bottom:#000000 1px solid; text-indent:20px;}

#menu li:nth-of-type(odd){background-color: #CCCCCC}

#menu li:nth-of-type(even){background-color: #999999}

#menu li:hover{background-color:#FFFFFF}

#menu a{text-decoration:none; color: #990000; font:bold; }

#menu a:active{color:#990000}




menu li:nth-of-type(odd){background-color: #CCCCCC}



Bu kod satırında nth-of-type özelliği kapsayıcı içindeki aynı türden bir elemana etki etmemize olanak verir. (odd) özelliği ise aynı türün tekil elemanlarına etki eder.

nth-of-type(even) özelliği ise aynı kod türünden elemanların çift sırada olanlarına etki eder. Bu yöntemle menümüzdeki elemanlardan sırası ile arkaplanlarını bir açık renk ve bir koyu renk olarak belirleyebiliriz ve daha fazla özellik eklememize de olanak sağlar.
Buradaki diğer çekici taraf hover özelliğinin "li" etiketine verilmiş olması. Bu şekilde üzerine gelinen elemanın sadece link kısmında değil tüm arkaplanın renginin değişmesiyle daha güzel bir görsel elde edebiliriz.

nth-of-type(odd): aynı türden sıralı olarak kullanılan etiketlerin tekli sıralarına etki eder.(1,3,5...)

nth-of-type(even): aynı türden sıralı olarak kullanılan etiketlerin çift sıralarına etki eder.(2,4,6...)
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git