Basit tab content menu yapımı için bu sayfayı detaylı inceleyebilirsiniz.WordPress siteler için ve diğer siteler için oldukça kolay bir şekilde uygulama yapılmakta olan bir sunumdur.

Çoğu zaman Tab Content Menü gibi içeriklere ihtiyaç duyulmakta olup çareler aramaktayız. Sanal ortamda çok fazla kaynak kodları bulmamıza rağmen işimize yarayacak ve kafamıza yatacak tarzda ve kolay düzenleme yapılacak tarzda olanı seçmeye çalışırız. Bu sunmuş olduğumuz basit tab menü ile kendinize uygun bir içerik ortaya çıkarabilirsiniz.Küçük düzenlemeler yaparak istediğiniz kaynağa ulaşabilirsiniz.

Bu kodları CSS ve Jquery kullanarak sizlere sunuyoruz. Tab Content Menü yapımı konusunu sizlere hem anlatarak hemde . kodlarını hizmetinize sunarak devam ediyoruz.

Tab Content Menü Html Kodları

<!doctype html>
<html lang="tr">
<head>
    <link type="text/css" rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".tab-menu a").click(function(event) {
                event.preventDefault();
                $(this).parent().addClass("current");
                $(this).parent().siblings().removeClass("current");
                var tab = $(this).attr("href");
                $(".tab-content").not(tab).css("display", "none");
                $(tab).fadeIn();
            });
        });
    </script>
    
</head>
<body>

    <div class="container">
    
        <ul class="tab-menu">
            <li class="current"><a href="#tab1">Tab 1</a></li>
            <li><a href="#tab2">Tab 2</a></li>
            <li><a href="#tab3">Tab 3</a></li>
        </ul>
        <div class="tab-container">
            <div id="tab1" class="tab-content">
                İçerik 1
            </div>
            <div id="tab2" class="tab-content">
                İçerik 2
            </div>
            <div id="tab3" class="tab-content">
                İçerik 3
            </div>
        </div>
        
    </div>
    
</body>
</html>

Tab Content Menü CSS Kodları

.container {
	width:600px;
	margin:0 auto;
	margin-top:50px
}
.tab-menu {
	display:block;
	margin:0;
	padding:0;
	text-align:left
}
.tab-menu li {
	list-style:none;
	display:inline-block;
	margin:0 10px 10px 0
}
.tab-menu li a {
	display:block;
	color:#666;
	padding:15px;
	font-size:14px;
	font-family: Arial;
	text-decoration:none;
	border:1px solid #ddd
}

.tab-content {
	display:none
}
#tab1 {
	display:block
}

.tab-container {
	border:1px solid #ddd;
	padding:30px;
	font-family: Arial;
	font-size:14px;
	color:#666
}
.current a {
	background:#666 !important;
	border:1px solid #666 !important;
	color:#fff !important
}

HTML içerisinde yazılı olan Tab yazısı yazan etiketlerini kaldırıp kendi içeriklerinizi yazabilirsiniz. CSS bölümünden küçük oynamalar yaparak renk değişimi veya farklı küçük ayarlar yaparak kendinize uygun bir tab menü oluşturabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir