Classic Tab Menü

   Yazı içerisinde kullanmanızı tavsiye edebileceğim bir tab menü.Eklemesi ve kullanımı çok kolay.HTML tıklayarak kodu düzenledikten sonra kopyalayıp yapıştırın yazıya devam etmek için oluştura tıkladığınızda tamamdır.

<!-- Bilgi Cafem61 Çok Sekmeli Widget Menü Eklentisi --> 
<style type="text/css"> 
ul.tabs { 
margin: 0; 
padding: 0; 
float: left; 
list-style: none; 
height: 32px; 
border-bottom: 1px solid #5cacee; 
border-left: 1px solid #5cacee; 
width: 100%; 
}
ul.tabs li { 
float: left; 
margin: 0; 
cursor: pointer; 
padding: 0px 4px ; 
height: 31px; 
line-height: 21px; 
border: 1px solid #1c1c1c; 
border-left: none; 
font-weight: bold; 
background: #5cacee; 
overflow: hidden; 
position: relative; 
width:75px; 
}
ul.tabs li:hover { 
background: #a2b5cd; 
}
ul.tabs li.active{ 
background: #dddddd; 
border-bottom: 2px solid #ee2c2c; 
}
.tab_container { 
border: 1px solid #20b2aa; 
border-top: none; 
clear: both; 
float: left; 
width: 100%; 
background: #FFFFFF; 
}
.tab_content { 
padding: 10px; 
font-size: 1.2em; 
display: none; 
}
#container { 
width: 280px; 
margin: 0 auto; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$(".tab_content").hide(); 
$(".tab_content:first").show(); 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab_content").hide(); 
var activeTab = $(this).attr("rel"); 
$("#"+activeTab).fadeIn(); 
}); 
}); 
</script>
<div id="container"> 
<ul class="tabs"> 
<li class="active" rel="tab1">Menü 1</li> 
<li rel="tab2">Menü 2</li> 
<li rel="tab3">Menü 3</li> 
</ul> 
<div class="tab_container"> 
<div id="tab1" class="tab_content"> 
<p>Menü 1 içeriğinizi buraya ekleyin 
</p> 
</div> 
<div id="tab2" class="tab_content"> 
<p>Menü 2 içeriğinizi buraya ekleyin 
</p> 
</div> 
<div id="tab3" class="tab_content"> 
<p>Menü 3 içeriğinizi buraya ekleyin  
</p> 
</div> 
</div> 
</div> 
<!-- Bilgi Cafem61 Çok Sekmeli Widget Menü Eklentisi -->

Eğer menü içerikleri içerisine resim eklemek isterseniz Menü 1 içeriğinizi buraya ekleyen yazan kısıma <img src="https://resim.png" /> bu kodu ekleyin ve sonra yazınızı ekleyin


Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!