CSS ile menü yapımı

Bu derste sizlere mause üzerine geldiğinde büyüyen, rengi değişen bir menü yapacağız.

Bu derste sizlere mause üzerine geldiğinde büyüyen, rengi değişen bir menü yapacağız.


#menübar { /* Evet arkadaşlar burada menümüzün iskeletini oluşturuyoruz.*/

    width: 500px;

    margin-top: 10px;

    margin-right: 10px;

    margin-left: 10px;

}

#menübar ul { /* menümüz liste şeklinde yaptığımız için ul özelliğndeki baştaki sembolü kaldırıyoruz. */

    display: block; /* gösterimi engelledik ki her li komutunda aşağıya inmesin  */

    list-style-image: none;/* liste türünü ve madde işaretini kaldırdık bir alltki kod ile birlikte */

    list-style-type: none;

    height: 30px; 

    margin: 0px;

    padding: 0px;

}

#menübar li {/* ve li yani satırların özelliklerini veriyoruz. */

    float: left; /* li özelliğini sola yasladık */

    list-style-image: none; /* liste türünü ve madde işaretini kaldırdık bir alltki kod ile birlikte */

    list-style-type: none;

    width: 98px;

    height: 25px;

    text-align: center; /* metin hizalamasını orta yaptık. */

    padding-top: 5px;

}

.menübarli {

    background-color: #333333; /* bir class özelliği tanımladık ve arkaplan rengini verdik buraya ne renk verirseniz html de görünecek olan renk de odur. */

    border-right-width: 2px; /* Kenarlık özelliğinden  sağ tarafa 2 px, tekrarlı, ve rengi "#ccc" gri olan bir renk verdik */

    border-right-style: solid;

    border-right-color: #CCCCCC;

}

#menübar .menübarli:hover {

    background-color: #999999; /* mause üzerine geldiğinde alacağı rengi verdik ki böylece daha kullanıcı menülerin hangisinde dolaştığını görebilecektir. */

    height: 30px; /* 30 px yükseklik verdik çünkü menünümüz aşağıya doğru inmesini istediğim için ama siz isterseniz gene bunuda 25 yapabilirsiniz */

}



#menübar .menübarli a {/* buradanda satırdaki yazıların rengi, stili, kalınlığı gibi özelliklerini değiştirsik. */

    color: #FFFFFF;

    text-decoration: none;

    font-weight: bold;

    font-family: Arial, Helvetica, sans-serif;

}


Evet arkadaşlar sırada bunu html üzerinde tanımlayıp göstermede.

<div id="menübar">

  <ul>

    <li class="menübarli"><a href="#">Anasayfa</a></li>

    <li class="menübarli"><a href="#">Hakkımda</a></li>

    <li class="menübarli"><a href="#">Galery</a></li>

    <li class="menübarli"><a href="#">Referanslar</a></li>

    <li class="menübarli"><a href="#">İletişim</a></li>

  </ul>

</div>

  • Etiketler;
Yorum Yaz

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

Türkçe karakterler kalkarsa daha yararlı bir bilgi olacağını düşünüyorum. Kolay gelsin.

Yukarı Git