+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: Mybb Ders Deposu (https://mybbdepo.com/mybb-ders-deposu-forumu)
+--- Forum: Yazılı Anlatım Deposu (https://mybbdepo.com/yazili-anlatim-deposu-forumu)
+--- Konu Başlığı: Yeşil Yatay Menü Tasarımı [CSS] (/yesil-yatay-menu-tasarimi-css-konusu.html)
Yeşil Yatay Menü Tasarımı [CSS] - BlackCat - 31-10-2011
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,
[attachment=439] 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
Cvp: Yeşil Yatay Menü Tasarımı [CSS] - mybb169 - 12-06-2013
süper OLDU
