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
}
eyvallah
Çok teşekkür ederim çok açıklayıcı bir makale, kodları paylaşmanızda ayrı bir incelik olmuş.
ben bu tabların site içinde değilde url ile açımasını istiyorum örnek olarak aşağıdaki linklere tıkladığımda o tabın içi görünsün istiyorum.
localhost/deneme.html#tab-1
localhost/deneme.html#tab-2
çok teşekkürler
Yıllar önce bu kodu buradan bulup kullanmıştım.
Kodu css ile binbir şekle sokup kendime göre uyarlayıp kullandım.
Yeni birşeyler yaparken parmaklama sonucu current kısmının çalışmamasına sebep oldum.
Tekrar arayıp bu siteyi buldum ve videoyu izleyip nerede hata yaptığımı anladım.
!important kısımlarını silmişim nedense, videoda bu kısmı görünce hemen düzelttim ve sorunum çözüldü.
Sadece kodu paylaşmakla kalmayıp bir de video çeken kardeşime tekrar teşekkür ederim.