mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Tab Şeklinde Menü Hazırlama
Bu yazımda Jquery ile hazırladığım tab menü uygulamasını inceleyeceğiz. Birçok sitede kullanılan bir yapı. Son dönemde de okulda yaptığım bir projede ve de MVC ile hazırladığım yeni bloğumun yönetim panelinde kullandığım bir menü sistemi. Özellikle alışveriş sitelerinde ve çok kategorili sistemlerde tercih edilen bir menü sistemi. Basit olarak bir örnek hazırladım. Özellikle son dönemde tercih ettiğim saydamlığı bu örnekte de kullandım. Şimdi örneğimizin kodlarına ve nasıl yapacağımıza göz atalım.

Öncelikle hazırladığım örneğin html yapısı şu şekilde olmalı.

<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>

Daha sonra bu yapıya uygun yazdığım ve menüyü oluşturan jquery kodlarım ise şu şekilde:

<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>

Hazırladığım örneği buradan görebilir, buradan da indirebilirsiniz. Css kullanarak menünün tasarımını ve görselliğini artırabiliriz. Anlaşılması için kodlamalarda açıklayıcı tanımlayıcılar kullandım. 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.

İyi Çalışmalar.
Mehmet Duran 02 Temmuz Perşembe 2009 7 36996 3,1
Javascript Web Tasarım jQuery Jquery Html İndir Css Saydam Opacity
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Bloğumda Kullandığım SiteMap Sınıfı Asp.net MVC Areas (Birden Fazla Proje Kullanarak) Bilgisayar Mühendisliği Topluluğu Asp.net ile Ziyaretçi Bilgileri Deitel C# (E - Book)
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Salih Gedik 02 Temmuz Perşembe 2009 00:29 #1
Güzel yazı jQuery güzel bir kütüphane ama ExtJs ile tanıştıktan sonra UI için jQuery`nin yüzüne bile bakmadım. Ağır olabilir ama gzipleyince cok küçük boyutlara iniyor
Mehmet Duran 02 Temmuz Perşembe 2009 00:34 #2
Şu an için Jquery benim için yeterli ve kolay kolay vazgeçeceğimi düşünmüyorum. Ancak körü körüne de bağlı değilim. Arada diğer kütüphanelere de arada göz atıyorum.
Salih Gedik 02 Temmuz Perşembe 2009 00:52 #3
Zaten bende vazgeçmiş değilim.Sadece UI işlemleri için Extjs yi kullanıyorum.Şu sıralar bir ziyaretçi defteri kodluyorum ExtJs.Hiç kodlar arasındaboğulmadan yapılıyor.Tabiki UI haricinde jQuery`den vazgeçmem.Mootools diyorlar.Özellikle mootools geliştirme ekibindekiler övmekle bitirmediler(Christoph Pojer ve David Walsh)Bence mootoolsun syntaxlarına alışmadığımı söylüyorum.Ne olacağını zaman gösterecek amajQueryde daha az yaz daha fazla yap mantığı javascript işlemlerim için güzel tercih
Mehmet Duran 02 Temmuz Perşembe 2009 01:03 #4
Bir zamanlar mootools ile ilgilenmiştim. Ancak senin de dediğin gibi jquery`den sonra yazım kuralları biraz değişik gelmişti. Ama işimiz düşerse bilgi sahibi olmak ve az biraz bilmek gerekiyor.
Salih Gedik 02 Temmuz Perşembe 2009 22:59 #5
Orası kesin. Fazla bilgi göz çıkarmaz. Arada çok popüler olmayan frameworkler buluyorum. Onlar neysede Mootools sağlam bir framework öğrenmek gerekir herhalde
Yılmaz 27 Nisan Çarşamba 2011 13:04 #6
bence demo koymalısınız. sitenizde bir kaç sayfa gezdim ama demo olmadığı için boş zaman kaybı oldu
Mehmet Duran 01 Mayıs Pazar 2011 23:40 #7
@Yılmaz, bu yazıda ve birçok yazımda bizzat örneklerin çalışır linkleri ve indirilebilir linkleri mevcut. Eğer okumakta sıkıntın varsa o senin problemin ya da iyi bir göz doktoruna görünmende fayda var.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009