Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Resimli Sırasız Liste Elemanları İle Menu Yapımı
     admin     05.12.2012     11:36:52

CSS ile yapılabilecek çok güzel örnekleren birisi. CSS’nin işlevselliğini pekiştiren bir örnek. Sırasız liste elemanlarının başındaki circle, square ve disc madde imlerinden başka resimde kullanılabilir. Bunun için sırasız liste elemanlarının  list-style-image özelliğine url("resim.jpg") ile değer atanarak madde imlerinin resimli olması sağlanabilir.



Aşağıdaki örnek bu işleme için güzel bir çalışma olacak. Fare ile üzerine gelinen liste elemanın başındaki kırmızı zeminli resim1.jpg dosyası, yeşil zeminli resim2.jpg dosyası ile değiştirilmektedir. Bu işlem için a etieketinin a:hover özellğinden de faydalanılmıştır. resim1.jpg ve resim2.jpg dosyalarını oluşturarak aşağıdaki kodu deneyiniz. Kodu çıktısı aşağıdaki gibi olacaktır ve bütün taraıcılarda çalışmaktadır.

<HTML>

<head>

<style type="text/css">

  ul a { list-style-image:url("resim1.jpg");} <!--İlk hali-->

  ul a:hover { list-style-image:url("resim2.jpg"); }  <!-- Fare ile üzerine gelindiğindeki hali-->

</style>

</head>

<body>

  <ul>

        <a href="#"><li>Web Proğramcılığı</li></a> <!-- a etiketi ile li etiketinin sıralaması önemli. -->

<a href="#"><li>Veritabanı Proğtamcılığı</li></a>

<a href="#"><li>Ağ İşletmenliği</li></a>

<a href="#"><li>Bilgisayar Teknik Servisi</li></a>

  </ul>

</body>

</HTML>

Ayhan SARI ....İyi çalışmalar

Facebook'ta Paylaş    
Diğer CSS İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...