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).
ExcellenTExperT avatar
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 0/5 - 0 oy

Navigation Menü [Süper] - Resimli


Sponsor Reklam
media venus

Çevrimdışı ExcellenTExperT
 Tarih: 23-09-2012, Saat:19:10
(Son Düzenleme: 23-09-2012, Saat:19:31, Düzenleyen: ExcellenTExperT.)
#1
Merhaba arkadaşlar sonunda Navigation Menüyü MyBB'ye uyarladım.
Kendi siteme koydum güzel durdu sizlerle paylaşmak istedim.

Not: Sadece Anasayfa değil her yerde görünür.Sayfada Kayar.

Önce bir önizlemesini görelim:

resim

Demo İsteyenler:
Kod:
http://www.hiledeposu.com
Adresinden test edebilirler.


Kurulum :

1. Adım.
-> Admin Panel - Temalar Ve Şablonlar - Temalar - Kullandığınız Tema - Global.css - Üstten Gelişmiş Düzenleme diyerek En alta aşağıdaki kodları ekleyiniz.

Kod:
*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}


#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
    
    
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;
    
    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    
    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url(images/navigation.jpg) no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;
    
    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-39px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

/* The styles below are only needed for the demo page */

#main{
    margin:0px;
position: fixed;

    width:40px;
}


2. Adım
Ekledikten sonra bu adımları yapınız.
-> Admin Panel - Temalar Ve Şablonlar - Şablonlar - Kullandığınız Tema - Header Şablonlar - Header diyerek Uygun yere kodları ekleyiniz. [Tavsiye En altlara ekleyiniz]

Kod:
<div id="main">

<ul id="navigationMenu">
    <li>
        <a class="home" href="http://www.hiledeposu.com/index.php">
            <span>Anasayfa</span>        </a>    </li>
    
  
    
    <li>
         <a class="services" href="http://www.hiledeposu.com/usercp.php">
            <span>Kontrol Panel</span>         </a>    </li>
    
    <li>
        <a class="portfolio" href="http://www.hiledeposu.com/search.php?action=getnew">
            <span>Son Yorumlar</span>        </a>    </li>
    
    <li>
        <a class="contact" href="http://www.hiledeposu.com/private.php">
            <span>Özel Mesajlar</span></a></li>
  </ul>
</div>


3. Adım

Aşağıdaki Navigation.jpg dosyasını images klasörüne atınız.
[Not resim ismi ve türünü değiştirmeyiniz.
resim
Cevapla
Bunu Beğenenler: ByMasteR , checker
Sponsor Reklam
sponsor reklam sponsor reklam

Çevrimdışı ByMasteR
 Tarih: 23-09-2012, Saat:19:16
#2
Sayfayla aşağı inmiyor, oynama yapılacak biraz. Ayrıca nereden aldığınızı söylerseniz daha başka bişeyler de uyarlayabiliriz Dil Çıkarma
Cevapla
Bunu Beğenenler:

Çevrimdışı ExcellenTExperT
 Tarih: 23-09-2012, Saat:19:20
#3
Hocam valla nerden bulduğumu hatırlayamıyorum Açık Ağızlı Gülümseme

Kaydırma için kod lazım ama bilmiyorum
Cevapla
Bunu Beğenenler:

Çevrimdışı ByMasteR
 Tarih: 23-09-2012, Saat:19:20
#4
(23-09-2012, Saat:19:20)ExcellenTExperT Adlı Kullanıcıdan Alıntı: Hocam valla nerden bulduğumu hatırlayamıyorum Açık Ağızlı Gülümseme

Kaydırma için kod lazım ama bilmiyorum

http://www.fatihhayrioglu.com/sabit-konu...tionfixed/
Cevapla
Bunu Beğenenler:

Çevrimdışı Remzilord22
 Tarih: 23-09-2012, Saat:19:25
#5
Hocam Gözükmüyor :S
Cevapla
Bunu Beğenenler:

İzinli TheLegend
 Tarih: 23-09-2012, Saat:19:31
#6
Helal excelletnt kardeşim.
Cevapla
Bunu Beğenenler:

Çevrimdışı ExcellenTExperT
 Tarih: 23-09-2012, Saat:19:31
#7
(23-09-2012, Saat:19:25)Remzilord22 Adlı Kullanıcıdan Alıntı: Hocam Gözükmüyor :S

Kodları doğru eklediğinden emin ol ve resmi doğru yere at.


Not: Sabit sorunu giderildi.
Cevapla
Bunu Beğenenler:

Çevrimdışı amiralhack
 Tarih: 23-09-2012, Saat:19:52
#8
Bende de çalışmadı üzgün
Cevapla
Bunu Beğenenler:

 




Konuyu Okuyanlar: 1 Ziyaretçi