Yeşil Yatay Menü Tasarımı [CSS]

[BlackCat]

Web sayfalarında yatay menü olarak kullanabilecek güzel bir örnek.

Küçük boyutlu az ve temiz kod örneği
Küçük boyutlu resim dosyaları
Sayfaya göre şekillenebilme (yatay olarak bulunduğu çerçeveye tamamen sığma durumu.)


Kuruluma Başlayalım.Öncelikle Temanızda Yeni Bir CSS Oluşturmamız Gerekli. Admin KP&Temalar&Şablonlar& Temamıza Tıklayalım ve Üst Kısımdan CSS Ekle/Oluştur'a Tıklayalım

Adını menu.css Yapıp Kendi İçeriğimi Yaz'ı Seçerek Aşağıdaki Kodu Yapıştıralım
NOT : Önce Not Defterine Ekleyin. Ardından Gerekli Bölüme Yapıştırın.

Kod:

#tabs1 {
      float:left;
      width:100%;
      background:#F4F7FB;
      font-size:93%;
      line-height:normal;
      border-bottom:1px solid #BCD2E6;
      }
    #tabs1 ul {
      margin:0;
      padding:10px 10px 0 50px;
      list-style:none;
      }
    #tabs1 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs1 a {
      float:left;
      background:url("images/menu/tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs1 a span {
      float:left;
      display:block;
      background:url("images/menu/tabright1.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#627EB7;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs1 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#627EB7;
      }
    #tabs1 a:hover {
      background-position:0% -42px;
      }
    #tabs1 a:hover span {
      background-position:100% -42px;
      }

Bunları Kaydettikten Sonra,

  resimler.rar (Dosya Boyutu: 734 Bayt / İndirme Sayısı: 243) Bu Dosyayı İndirelim.
FTP'mizde images Klasörünün İçine ''menu'' Adından Yeni Bir Klasör Oluşturalım ve Dosyanın İçinden Çıkan 2 Adet Resmi menu Klasörüne Atalım.

Şimdi Gelelim HTML Kodlarımıza. Temalar&Şablonlar&Şablonlar&Temamızı Seçelim&Ana Sayfa Şablonlar&İndex Şablonuna Tıklayalım ve {$header} Kodunun Altında Bu Kodlarımızı Ekleyelim
NOT : Önce Not Defterine Ekleyin. Ardından Gerekli Bölüme Yapıştırın.

Kod:

<div id="tabs1">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="CSS Örnekleri"><span>CSS Örnekleri</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
  </ul>
</div>

Bu Kodlarımızıda Ekleyip Kaydettikten Sonra İşlemimiz Bitiyor.
Ekran Görüntümüz :


NOT : HTML Kodlarındaki Link 1 - Link 2 Gibi Kısımları Değiştirebilirsiniz. <a href="#" Kodu Yönlenecek Adrestir.
Demo Adresimiz :

Kod:

webmasternoktasi.com

İyi Çalışmalar

[S.G]

Teşekkürler bilal gayet güzel bir çalışma olmuş, eline sağlık kardeşim.

[LeeFeng]

eline sağlık bilal güzel çalışma

[BlackCat]

Yorumlar için teşekkürler Arkadaşlar. Birçok kişi menü eksikliğinden tema değiştirdiğini bile duydum. Artık sık sık bu tür şeyler paylaşmayı düşünüyorum. (Tabi iş görürse )

[LeeFeng]

(31.10.2011, Saat: 00:40)BlackCat Adlı Kullanıcıdan Alıntı: Yorumlar için teşekkürler Arkadaşlar. Birçok kişi menü eksikliğinden tema değiştirdiğini bile duydum. Artık sık sık bu tür şeyler paylaşmayı düşünüyorum. (Tabi iş görürse )

bir çok kişinin işine yarayacak bilal özelikle tema yapan arkadaşlar

[SelimAtalay]

Bilal Fan Clup acacam artık konu için eyvallah

[grdiyan]

Harika bir şey oldu bu hocam.