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ü Kodları
|
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ü Kodları
|
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: #fff; } .tab-container .tab-menu button:hover { background-color: #21759B; } .tab-container .tab-menu button.active { background-color: #21759B; } .tab-container .tab-content { display: none; border: 1px solid #ccc; padding: 6px 12px; border-top: none; animation: fadeEffect 1s; } .tab-container .tab-content.active { display: block; background-color: #fff; } @keyframes fadeEffect { from { opacity: 0; } to { opacity: 1; } } </style> |
Jquery Tab Menü Kodları
|
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="https://code.jquery.com/jquery-3.4.1.min.js" 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.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
){kind=link}