JQUERY İLE TAB MENÜ YAPIMI (SEKMELİ MENÜ YAPIMI)

[Fauda]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

JQuery ile Tab Menü Yapımı (Sekmeli Menü Yapımı)

JQUERY İLE TAB MENÜ YAPIMI (SEKMELİ MENÜ YAPIMI)​

Bu yazımda, birçok web sitesinde kullanılan tab menü yapımı diğer adıyla sekmeli menülerin nasıl yapıldığını anlatacağım.
Kodlarımızı yazdıktan sonra şu şekilde bir tab menümüz olacak.

Tab menüleri birçok yerde kullanabiliyoruz. Genelde web sayfalarımızdaki alanlardan tasarruf etmek için kullanıyoruz. Tabiki sayfamıza katmış olduğu profesyonellik ve güzellikte cabası.
Örneğin bir E-Ticaret sitesi düşünelim. Ürün detay sayfaları zaten yeterince yoğun oluyor. Birde ürünün açıklamasını, özelliklerini, yorumlarını, taksit imkanlarını vb.. birçok bilgiyi ayrı ayrı tasarlamaya çalışırsak sayfamızda yer kalmayacaktır.
Ama bunları örneğimizde olduğu gibi bir tab menü içerisine yerleştirirsek hem alandan tasarruf sağlamış oluruz hem de daha profesyonel bir tasarım yapmış oluruz.
Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.
Özellikle her tab içerisindeki içerikleri çok kısa tuttum. Siz bu içerikleri Html ve Css kodları yazarak zenginleştirebilirsiniz.
Konuyu daha fazla uzatmadan tab menü yapımı kodlarına geçelim.

HTML TAB MENÜ KODLARI​

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<div class="tab-container"> <div class="tab-menu"> <button id="tab-1" class="active">Açıklama</button> <button id="tab-2" class="">Özellikler</button> <button id="tab-3" class="">Yorumlar</button> </div> <div id="tab-content1" class="tab-content active"> <h3>Açıklama</h3> <p>Sektördeki en gelişmiş LCD ekran yepyeni Liquid Retina. Daha da hızlı Face ID. Bir akıllı telefondaki en akıllı, en güçlü çip. Ve çığır açan bir kamera sistemi. iPhone XR. Her açıdan göz kamaştırıcı.</p> </div> <div id="tab-content2" class="tab-content"> <h3>Özellikler</h3> <ul> <li>SIM kart türü : NanoSim + eSIM </li> <li>Wi-Fi : Evet </li> <li>Bluetooth : Evet </li> </ul> </div> <div id="tab-content3" class="tab-content"> <h3>Yorumlar</h3> <p>Çok iyi.</p> <p>İdare eder.</p> </div> </div>

CSS TAB MENÜ KODLARI​

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<style> .tab-container { width: 471px; } .tab-container .tab-menu { background-color: cornflowerblue; overflow: hidden; } .tab-container .tab-menu button { background-color: cornflowerblue; float: left; border: none; outline: none; cursor: pointer; padding: 16px 48px; transition: 0.3s; font-size: 15px; color:

[TD]

JQUERY TAB MENÜ KODLARI​

XHTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<script src="" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> $("#tab-1").click(function() { $("#tab-1,#tab-2,#tab-3,#tab-4").removeClass("active"); $(this).addClass("active"); $("#tab-content1,#tab-content2,#tab-content3,#tab-content4").removeClass("active"); $("#tab-content1").addClass("active"); }); $("#tab-2").click(function() { $("#tab-1,#tab-2,#tab-3,#tab-4").removeClass("active"); $(this).addClass("active"); $("#tab-content1,#tab-content2,#tab-content3,#tab-content4").removeClass("active"); $("#tab-content2").addClass("active"); }); $("#tab-3").click(function() { $("#tab-1,#tab-2,#tab-3,#tab-4").removeClass("active"); $(this).addClass("active"); $("#tab-content1,#tab-content2,#tab-content3,#tab-content4").removeClass("active"); $("#tab-content3").addClass("active"); }); </script>

Html, Css ve Jquery kullanarak tab menü yapımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.

 

[bLastX]

Paylaşım için teşekkürler.

 

[Fauda]

Rica ederim

 

[Replicant]

Paylaşım için teşekkürler.

 

[Fauda]

Rıca ederim