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
İlk Yorumu Siz Yapın