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 - 2 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 2 oy
[Bilgi] jQuery ile Tab Şeklinde Menü Hazırlama
#1
Kod:
<div id="tabs">

    <div id="tab_basliklar">

        <span>Menü Bölümü 1</span>

        <span>Menü Bölümü 2</span>

        .....

    </div>

    <div id="tab_menuler">

        <div>

            <a href="#">Menü 1 - 1</a>

            <a href="#">Menü 1 - 2</a>

            <a href="#">Menü 1 - 3</a>

            <a href="#">Menü 1 - 4</a>

            <a href="#">Menü 1 - 5</a>

        </div>

        <div>

            <a href="#">Menü 2 - 1</a>

            <a href="#">Menü 2 - 2</a>

        </div>

        .....

    </div>

    <div id="tab_goster"></div>

</div>


Buna uygun olarak menüyü oluşturan jquery kodları ;

Kod:
<script type="text/javascript">

    $(function() {

        tab_menu();

    });



    var aktif_tab = 0;

    function tab_menu() {

        tab_degistir(0);

        $("#tab_basliklar > span").mouseover(function() {

            var index = $("#tab_basliklar > span").index(this);

            if (aktif_tab != index) {

                tab_degistir(index);

                aktif_tab = index;

            }

        });

    }

    function tab_degistir(index) {

        $("#tab_basliklar > span").stop().animate({opacity:"0.4"}, 500);

        $("#tab_basliklar > span:eq(" + index + ")").stop().animate({opacity:"1"}, 500);

        $("#tab_goster").html($("#tab_menuler > div:eq(" + index + ")").html());

        $("#tab_goster a").css("opacity", "0.4").animate({opacity:"1"}, 500);

    }

</script>

Css kullanarak menünün tasarımını ve görselliğini artırabiliriz. Css kodlarda yapacağımız değişiklik ile istediğimiz şekilde tasarımı değiştirebiliriz. Resim editörleri ile hazırlayacağımız resimleri kullanarak daha canlı bir menü haline getirebiliriz.
Never forget me ,But when you forget me ,forget me forever!
The Owner


Ara
Cevapla
#2
Keşke caps koysaydın Sarp abi.
Paylaşım için teşekkürler.
Ara
Cevapla

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Araç-Modifikasyon Jquery zaman ayarlı Yükleniyor - Loading yapımı + Text Reklam + Duyuru xpserkan 1 9,054 08.10.2012, Saat: 14:44
Son Yorum: xpserkan



Konuyu Okuyanlar: 1 Ziyaretçi
© 2009-2018 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