Selamlar,

Amaç; css konusunda eksiklerinizi tamamlamak, yeni nesil sistemleri profesyonel konumda yayınlamak, eksiksiz ve hatasız tasarım teknikleri kullanarak mevcut piyasadaki rakiplerle mücadele etmek.

Ders Adı: CSS Dinamik Menü Yapıyoruz.



 Yapılmış Demo

Bir metin editörünüzün olduğunu varsayararak anlatıma başlıyorum. Öncelikle aşağıdaki HTML kodlarını, çalışmanın önizlemesini yapacağımız sayfaya

<div id="Menu">

<ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Galeri</a></li>
    <li><a href="#">hrngndz</a></li>
    <li><a href="#">r10</a></li>
</ul>

</div>
Burada öğreneceğiniz kısım, <li>içerik</li> olan kısım her bir menü butonunu ifade etmektedir. Yani istediğiniz kadar <li><a href="#">r10</a></li> oluşturursanız o kadar butonunuz olur.

Sıra geldi bu menümüzde belirttiğimiz css sınıflarını sayfamıza çağırmaya.

<head></head> tagları arasına 
<style type="text/css">
#Menu{
    width:800px;
    height:25px;            
}
#Menu a{
                color:#ffffff;text-decoration:none;
}
#Menu ul{
                list-style-type:none;
}
#Menu li{
                width:130px;
                height:30px;
                text-align:center;        
                background-color:#383838;    
                padding-top:14px;    
                float:left;
                border-right:1px solid #FFFFFF;
                font-family:Tahoma;
                font-size:13px;
                color:#ffffff;
                

}
#Menu li:hover{
                width:130px;
                height:30px;
                text-align:center;        
                background-color:#ca0000;    
                border-right:1px solid #FFFFFF;
                padding-top:14px;    
                float:left;
                text-decoration:underline;
                    font-size:13px;
                color:#ffffff;
}
</style>
bunu yapıştırıyoruz. Veya isteğe göre bu css kod parçacığı harici bir css dosyasından çekilebilir.

Ve sonuçta altta gördüğümüz gibi bir menü oluşturduk.

Css kodlarının arasından, daha sonra renk, boyut gibi şeyleri değiştirmek isteyeceğiniz yerleri kalın olarak işaretledim.




(Ç)alıntı yaparken, kullanıcı adıma bu konunun linkini veriniz. Makale bana aittir.

İyi çalışmalar.