İçeriğe geç

Jquery Kullanarak Tab Menü Yapımı

Merhaba arkadaşlar bu yazımda sizlere html, css ve jquery kullanarak basit bir tab menü yapımını öğreteceğim. Dersi videolu olarakta çektim. bu benimde ilk videolu ders tecrübemdi inşallah beğenirsiniz 

Tab menü yapımı için 3 sayfaya ihtiyacımız var. Aslında tek sayfa halindede yapabiliriz ama ben 3’e böldüm…
İndex.html :


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf8" >
	<title>tab menu örneği</title>
	<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>

<div class="tab-menu">
	<ul class="page">
		<li class="active">Anasayfa</li>
		<li>Hakkımda</li>
		<li>İletişim</li>
	</ul>
	<ul class="icerik">
		<li>
			<h3>ANASAYFA</h3><br>
			<p>Bu bir anasayfa örneğdiir</p>
		</li>
		<li>
			<h3>HAKKIMDA</h3><br>
			<p>Bu bir Hakkımda örneğdiir</p>
		</li>
		<li>
			<h3>İLETİŞİM</h3><br>
			<p>Bu bir İletişim örneğdiir</p>
		</li>
	</ul>
</div>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

main.css :


body {padding: 0px; margin:20px; font-family: 'calibri', sans-serif; font-size: 13px;}
h3, ul {padding: 0px; margin: 0px;}
ul li {list-style: none;}
a {text-decoration: none;}

.tab-menu  {width: 400px; border:1px solid #ededed;}
.tab-menu .page {display: block; width: 100%;height: 35px; background: #d1d1d1;}
.tab-menu .page li{float: left; line-height: 35px; padding: 0px 10px; cursor: pointer;}
.tab-menu .page li:hover {background: #bbbbbb;}
.tab-menu .page li.active {background: #bbbbbb;}
.tab-menu .icerik{padding: 15px;}
.tab-menu .icerik li {display: none;}
.tab-menu .icerik li:first-child {display: block;}

 


main.js :

$(document).ready(function(){
	$(".tab-menu .page li").click(function(){
		var indis = $(this).index();
		$(".tab-menu .icerik li").hide(400);
		$(".tab-menu .page li").removeClass("active");

		$(".tab-menu .icerik li:eq("+indis+")").show(400);
		$(".tab-menu .page li:eq("+indis+")").addClass("active");

	});
});
 

Sayfalardaki kodlar bu şekilde. Videoda detaylı anlatım mevcuttur. Hepinize kolay gelsin

Tarih:Jquery

İlk Yorumu Siz Yapın

Bir cevap yazın

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