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
media venus

İzinli 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ı: 28) 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

Çevrimdışı mybb169
 Tarih: 12-06-2013, Saat:11:18
#2
süper OLDU Açık Ağızlı Gülümseme
Cevapla
Bunu Beğenenler:

 


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Postbit'i Yatay / Dikey Yapmak 007combatant 31 24,707 02-12-2015, Saat:21:42
Son Yorum: exe
  Nesil Teması Menü Yapımı Manager 2 1,182 15-08-2014, Saat:19:00
Son Yorum: Manager
  Screwy Basit Css Menü Screwy 4 1,269 21-12-2013, Saat:15:11
Son Yorum: korkusuz212
  FairyLal Theme Açılır Menü Sorunu Çözümü Screwy 14 2,617 31-08-2013, Saat:22:13
Son Yorum: Edward
  [MD - 1.6] MyBB Profil Dikey/Yatay Sorununun Çözümü(1.6) 007combatant 1 2,315 29-02-2012, Saat:11:50
Son Yorum: herzem



Konuyu Okuyanlar: 1 Ziyaretçi