31.10.2011, Saat: 13:05
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.
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.
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.
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.)
Demo Adresimiz :
İyi Çalışmalar Arkadaşlar.
* 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.
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>
Ekran Görüntümüz : (Demo adresten mouseover'u ve animasyonu test edebilirsiniz.)
Demo Adresimiz :
Kod:
webmasternoktasi.com/Konu-yeni-v2-temasiyla-gelen-yenilikler.html
İyi Çalışmalar Arkadaşlar.