JQuery ile yapılmış basit bir tab menü. Menü 290 piksel genişliğe kadar responsive çalışıyor. uygulaması son derecede kolay. Renklendirdiğim Kodları kopyala yapıştır yapıp rahatlıkla kullanabilirsiniz.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabmenu{height:30px}
ul.tabmenu,ul.tabmenu li{
list-style-type:none;
margin:0px;
padding:0px;
}
ul.tabmenu li{
display:inline-block;
width:80px;
height:30px;
line-height:30px;
background-color:#4a9fef;
text-align:center;
position:relative;
border-top:solid 1px #4a9fef;
border-left:solid 1px #4a9fef;
border-right:solid 1px #4a9fef;
border-bottom:solid 1px #fff !important;
color:#fff;
}
ul.tabmenu li a:visited{color:inherit;}
.tabmenu li a{text-decoration:none;display:block;position:absolute;width:100%;height:30px;top:0px;z-index:15;}
.kutu{
display:block;
max-width:500px;
border:solid 1px #4a9fef;
height:350px;
}
.tab
{
display:none;
max-width:500px;
height:100%;
position:relative;
padding:10px;
}
.tab:first-child{display:block;}
.active{background-color:#ffffff !important;color:#125899 !important;height:30px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.tabmenu li').click(function () {
var indeks = $(this).index();
$('ul.tabmenu li').removeClass("active");
$(this).addClass("active");
$(".tab").not(indeks).hide();
$(".tab:eq(" + indeks + ")").show();
});
});
</script>
</head>
<body>
<ul class="tabmenu">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="kutu" >
<div class="tab">Kutu 1</div>
<div class="tab">Kutu 2</div>
<div class="tab">Kutu 3</div>
</div>
</body>
</html>
Kayıtlar
Hiç yorum yok :
Yorum Gönder