Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
Css Balon Büyüyen Menü
#1
Merhabalar Size Böyle Birşey Yaptırmak İsterim :D Buyrun Örnek ;




Şimdi Başlayalım .

Admin Kp + Şablon Ve Stil + Şablonlar + Header Şablonları + headerdeki <div class="menu"> ile başlayan </ul>
</div>
ile biten tarafa kadar silin . Ondan Sonra Bu Kodu Ekleyin ;

Kod:
<div class="menu">
    <ul>
        <li><a class="ara" href="#"><span>Arama</span></a></li>
        <li><a class="indir" href="#"><span>İndir</span></a></li>
        <li><a class="bilgi" href="#"><span>Bilgi</span></a></li>
        <li><a class="kalp" href="#"><span>Kalp</span></a></li>
        <li><a class="cark" href="#"><span>İşlem</span></a></li>
    </ul>
</div>
</br>
</br>
</br>
</br>

Siz Arama , İndir Gibi Şeyleri Kendinize Göre Düzenleyebilirsiniz .


Şimdi ;

Admin Kp + Şablon Ve Stil + Temanız + global.css de .menu ul'u bulun ve o kodu silin yerine şunu ekleyin .


Kod:
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Sonra Tekrar Global.css'nin en altına ayrı ayrı şu kodları ekleyin .

Kod:
.menu ul li {
    float: left;
    margin-right: 2px;
}

Kod:
.menu ul li a {
    display: block;
    width: 48px;
    height: 58px;
}

Kod:
.menu ul li a span {
    visibility: hidden;
}

Kod:
.ara {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/ara.png) 0 0 no-repeat;}
.indir {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/indir.png) 0 0 no-repeat;}
.bilgi {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/info.png) 0 0 no-repeat;}
.kalp {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/kalp.png) 0 0 no-repeat;}
.cark {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/cark.png) 0 0 no-repeat;}

Kod:
a:hover.ara, a:hover.indir, a:hover.bilgi, a:hover.kalp, a:hover.cark {
    background-position:0 -58px;
}



İşte Bu Kadar . Menümüz Oldu . Hayırlı Olsun Anlatım Bana Aittir . Kodlar Ve Önizleme Alıntıdır .
Cevapla PGM
Teşekkür verenler:
#2
Güzelmiş :)
Ara
Cevapla PGM
Teşekkür verenler:
#3
Teşekkürler.
Denetleme Ekibi Lideri: 22-06-2018 -  ....
Ara
Cevapla PGM
Teşekkür verenler:
#4
teşşekürler bu size aiit değil dime ?
Cevapla PGM
Teşekkür verenler:
#5
teşekkürler demo varmı ?
Ara
Cevapla PGM
Teşekkür verenler:
#6
Güzelmiş :)
Güzel üslupla söz söyleyenleriz;
Mesih’in talebesiyiz; nice ölülere tuttuk da can üfürdük biz.

Hz.Mevlana


 Türk çocuğu ecdadını tanıdıkça daha büyük işler yapmak için kendinde kuvvet bulacaktır.
Mustafa Kemal Atatürk


Saint


Ara
Cevapla PGM
Teşekkür verenler:
#7
(07-09-2013 Saat: 13:43)LastWorld Nickli Kullanıcıdan Alıntı: Merhabalar Size Böyle Birşey Yaptırmak İsterim :D Buyrun Örnek ;




Şimdi Başlayalım .

Admin Kp + Şablon Ve Stil + Şablonlar + Header Şablonları + headerdeki <div class="menu"> ile başlayan </ul>
</div>
ile biten tarafa kadar silin . Ondan Sonra Bu Kodu Ekleyin ;

Kod:
<div class="menu">
    <ul>
        <li><a class="ara" href="#"><span>Arama</span></a></li>
        <li><a class="indir" href="#"><span>İndir</span></a></li>
        <li><a class="bilgi" href="#"><span>Bilgi</span></a></li>
        <li><a class="kalp" href="#"><span>Kalp</span></a></li>
        <li><a class="cark" href="#"><span>İşlem</span></a></li>
    </ul>
</div>
</br>
</br>
</br>
</br>

Siz Arama , İndir Gibi Şeyleri Kendinize Göre Düzenleyebilirsiniz .


Şimdi ;

Admin Kp + Şablon Ve Stil + Temanız + global.css de .menu ul'u bulun ve o kodu silin yerine şunu ekleyin .


Kod:
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

Sonra Tekrar Global.css'nin en altına ayrı ayrı şu kodları ekleyin .

Kod:
.menu ul li {
    float: left;
    margin-right: 2px;
}

Kod:
.menu ul li a {
    display: block;
    width: 48px;
    height: 58px;
}

Kod:
.menu ul li a span {
    visibility: hidden;
}

Kod:
.ara {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/ara.png) 0 0 no-repeat;}
.indir {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/indir.png) 0 0 no-repeat;}
.bilgi {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/info.png) 0 0 no-repeat;}
.kalp {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/kalp.png) 0 0 no-repeat;}
.cark {background: transparent url(http://st.10tl.net/tema/lastword/yeniler/cark.png) 0 0 no-repeat;}

Kod:
a:hover.ara, a:hover.indir, a:hover.bilgi, a:hover.kalp, a:hover.cark {
    background-position:0 -58px;
}



İşte Bu Kadar . Menümüz Oldu . Hayırlı Olsun Anlatım Bana Aittir . Kodlar Ve Önizleme Alıntıdır .

Önizleme 10Tl.Net Dışı Olmuyormu Yalnız
Ara
Cevapla PGM
Teşekkür verenler:
#8
Ben Yönlendirdim Linki Bence Girmiyor Başka Önizleme Yok . Önemli Değil Arkadaşlar .
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping