Ü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 Sekmeli Menü Yapımı
     admin     12.12.2012     11:41:29

Windows pencerelerindeki sekmeleri bilirsiniz. Bu sekmelere benzer menüleri web sayfaları için oluşturabiliriz. Burada sekmelerin arka planına resim yerleştirdik. Öncelikle fireworks vb. bir programda zemine yerleştirmek için bir resim hazırlayınız.



Bu örnek için hazırlanan resim :

Kodları denediğinizde tarayıcılardaki görünümü aşağıdaki gibi olacaktır :

Menu kodları aşağıdaki gibidir:

<HTML>

<head>

<style type="text/css">

body { margin-left:0; margin-right:0; }

#menum {

  text-align:left;  }

#menum ul {

  font-size:12px;

  list-style-type:none;

  margin:0; padding:0;  }

#menum ul li {

  float:left;

  background:url("zemin.gif") no-repeat;

  width:112px;

  text-align:center;

  color:black;

  padding-top:4px;

  border-bottom:1px solid gray;

  }

#menum ul li a {

  text-decoration:none;

  color:#000; }

#menum ul li a:hover{

  color:#F00;

  font-weight:bold;}

</style>

</head>

<body>

<div id="menum">

  <ul>

        <li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">Hizmetlerimiz</a></li>

<li><a href="#">İletişim</a></li>

  </ul>

</div>

</body>

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


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

İsim Giriniz :
  

  =>Yapılan Yorumlar...

playbek    27.03.2013    06:35:47

 çok teşekkür ederim sayenizde sitemde yeni menü oluşturdum.


admin    27.03.2013    08:00:41

Rica ederim. Katkımız olduysa ne mutlu bize...