CSS ve Jquery İle Basit Tab Content Menu Yapımı
Zaman zaman Tab Content Menü gibi içeriklere ihtiyaç duyarız. İnternette epey kaynak olmasına rağmen kolay düzenlenebilir olanı bulmaya çalışırız. Bu içerikte de basit bir şekilde CSS ve Jquery kullanarak Tab Content Menü yapımı konusunu anlatmaya çalıştım. Dilerseniz dosyaları indirip kendinize göre düzenleyebilirsiniz.
.container Bu elemanı eklememin sebebi tab content’i sayfada ortalayıp daha iyi görünmesini sağlamak. Siz kullanırken bu kısmı kaldırabilirsiniz.
.tab-content Bu değere display:none veriyoruz. İlk olarak içeriklerin tamamını sayfada görünmez hale getiriyoruz.
#tab1 Sayfa ilk açıldığında göstermek istediğimiz içeriğin id değerine css içerisinde display:block verdik. Bu sayede sayfaya girildiğinde başlangıçta yalnızca o içerik görünür durumda oluyor.
Tab Content Menü’yü oluşturan Html kodları
<!doctype html>
<html lang="tr">
<head>
<title>LOREM IPSUM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="LOREM IPSUM">
<meta name="author" content="SitePoint">
<meta name="keywords" content="LOREM IPSUM">
<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ı
body {
margin:0;
padding:0
}
.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
}