Sercan Aslan
Altın 4 Altın IV
Html5 & Css3

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
}

Demoİndir

Bir Cevap Yazın

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

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:30 // 0 Yorum Karanlığa Işık Tut

Videoda nth-child ve benzeri birkaç css seçicisinden bahsettim. Benim sık sık kullandığım se

09:27 // 0 Yorum Karanlığa Işık Tut

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:24 // 0 Yorum Karanlığa Işık Tut

İzlediğim başarı hikayelerinin konu edildiği bazı filmleri sizler için derledim. 10 adet film

09:17 // 0 Yorum Karanlığa Işık Tut