MyBBDepo - Türkiyenin MyBB Deposu Forumuna Hoşgeldiniz
Eğer sitemize yaptığınız ilk ziyaretiniz ise, lütfen öncelikle Forum Kurallarını okuyunuz. Forumumuzda bilgi alışverişinde bulunabilmeniz için Kayıt olmalısınız. Üye olmayanlar forumumuzdan yararlanamazlar.
Eğer zaten kayıtlı kullanıcı iseniz, lütfen kullanıcı adınız ve şifreniz ile, Giriş yapınız. (Sitemize üyelik ücretsizdir).
BlackCat avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

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


Sponsor Reklam

Çevrimdışı BlackCat
 Tarih: 31-10-2011, Saat:00:14
#1
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,

.rar   resimler.rar (Dosya Boyutu: 734 Bayt / İndirme Sayısı: 32) 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 :
resim

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 Göz kırpma
Cevapla
Bunu Beğenenler:
Sponsor Reklam
Sponsor Reklam Sponsor Reklam

 


Bu Konudaki Yorumlar
Yeşil Yatay Menü Tasarımı [CSS] - Yazar: BlackCat - 31-10-2011, Saat:00:14
Cvp: Yeşil Yatay Menü Tasarımı [CSS] - Yazar: mybb169 - 12-06-2013, Saat:11:18

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Postbit'i Yatay / Dikey Yapmak 007combatant 32 41,635 04-09-2017, Saat:11:41
Son Yorum: VenomBoss
  Nesil Teması Menü Yapımı Manager 2 3,553 15-08-2014, Saat:19:00
Son Yorum: Manager
  Screwy Basit Css Menü Screwy 4 3,509 21-12-2013, Saat:15:11
Son Yorum: korkusuz212
  FairyLal Theme Açılır Menü Sorunu Çözümü Screwy 14 6,777 31-08-2013, Saat:22:13
Son Yorum: Edward
  [MD - 1.6] MyBB Profil Dikey/Yatay Sorununun Çözümü(1.6) 007combatant 1 4,265 29-02-2012, Saat:11:50
Son Yorum: herzem



Konuyu Okuyanlar: 1 Ziyaretçi

istanbul escort - mecidiyeköy escort - şişli escort - ataköy escort - taksim escort - escort mecidiyeköy

sex hikaye - porno izle - türk ifşa - mecidiyeköy escort - seks hikaye - türk porno - escort bayan