Mybb Hakkında Soru ve Sorunlarız, Yardım ve Destek için MybbDepo external Adresini Ziyaret Ediniz.
Sponsor Reklam

duyuru Güncel Duyurular!
Güncel MyBB Dökümanları.. Güncel + Orijinal MyBB Sürümleri..
bilgi mybb

Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy
Konu Gösteriminde Mavi - Mouseover Menu [CSS] + [Yatay]
#1
Araç-Modifikasyon 
Merhaba arkadaşlar. Bu konuda size hazır mavi-mouseover'lu ve animasyonlu hazır menüyü sitenize entegre etmeyi anlatacağım. Kuruluma geçmeden önce menümüzün özelliklerini sıralayalım :

* Her temaya uygun, göze hoş gelen, Mavi,gri tasarım
* Temanın genişliği ne olursa olsun, genişliği kadar uzatabilme ve sabitleme
* Mouseover ve Animasyonluk Özelliği

Şimdi Geçelim Kuruluma. Öncelikle aşağıdaki dosyayı indirelim, rardan çıkaralım ve içinden çıkan dosyayı ve ftp'mizin images klasörüne atalım.

.rar   mavimenu.rar (Dosya Boyutu: 6.23 KB / İndirme Sayısı: 200)
Ardından 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ı menum.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:
<style type="text/css">
    
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(images/mavimenu/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(images/mavimenu/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

</style>

CSS Kısmımızı Tamamladık. Şimdi Geçelim HTML Kodlarımıza. Ben Sadece Konularda çıkması için Konu gösterim şablonlarına ekledim. Siz Ana sayfanıza yada istediğiniz yere kodları ekleyebilirsiniz.

Aşamalarımıza devam ediyoruz
Temalar&Şablonlar&Şablonlar&Temamızı Seçelim&Konu Gösterim Şablonlar&showthread Şablonuna Tıklayalım ve {$header} Kodunun Altına Bu Kodlarımızı Ekleyelim
NOT : Önce Not Defterine Ekleyin. Ardından Gerekli Bölüme Yapıştırın.
Kod:
<div class="animatedtabs">
<ul>
<li class="selected"><a href="index.php"><span>Ana Sayfa</span></a></li>
<li><a href="index.php" title="New"><span>Forum</span></a></li>
<li><a href="#" title="Resim Upl."><span>LINK</span></a></li>
<li><a href="#" title="Pagerank"><span>LINK</span></a></li>
<li><a href="showteam.php" title="Yöneticiler"><span>Yöneticiler</span></a></li>    
<li><a href="stats.php" title="İstatistik"><span>İstatistik</span></a></li>
</ul>
</div>
NOT : HTML Kodlarındaki Yazıları ve Yönlenecek Kısımları Değiştirebilirsiniz. <a href="#" Kodu Yönlenecek Adrestir.

Ekran Görüntümüz : (Demo adresten mouseover'u ve animasyonu test edebilirsiniz.)
69932919832524610164.png

Demo Adresimiz :
Kod:
webmasternoktasi.com/Konu-yeni-v2-temasiyla-gelen-yenilikler.html

İyi Çalışmalar Arkadaşlar.
Ara
Cevapla
#2
Bilal adamımsın Gülümseme yine sen yine yararlı konu
Ara
Cevapla
#3
teşekkürler üstadım
Ara
Cevapla
#4
Harika bir paylaşım olmuş. Teşekkür ederiz.
Never forget me ,But when you forget me ,forget me forever!
The Owner


Ara
Cevapla

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Eklenti [1.6] Rapor Edilen Mesajlar Konu Olarak Açılsın - [Plugin] xpserkan 1 9,370 03.06.2014, Saat: 15:53
Son Yorum: S.G



Konuyu Okuyanlar: 1 Ziyaretçi

istanbul escorts - şişli escort - seks hikaye - porno - escort bayan

© 2009-2024 MyBB.Com.TR Internet Hizmetleri, MyBBGrup.Com Alt Kuruluşudur.

Web sitemiz dahilindeki tüm sayfalar, bu sayfaları gösteren tüm ekranlar ve içerdiği her türlü bilgi ve bağlı materyal, yerleşim ve öğeler, (çözüm ortaklarının logoları ve yasal hakları hariç) MyBB.Com.TR'ye aittir.
Yazılı izin olmaksızın ve kaynak belirtilmedikçe, (Kaynak göstererek alıntı yapılabilir.) kopyalanamaz ya da yayınlanamaz. MyBB.Com.TR sitesindeki içerik-ler 5070 sayılı kanun kapsamında dijital zaman damgasıyla ve DMCA tarafından korunmaktadır.
Tüm hakları, (insafiyet ile) saklıdır.



teknoloji forumu , haber

sex hikaye - porno izle - türk ifşa istanbul escort