Şundan yapmak istiyorum yardımcı olursanız sevinirim

Aşağıdaki görselde ki gibi bir alan oluşturmak istiyorum. Başlıklara göre içerik değişiyor.

Bunun adı nedir ? veya google da nasıl aratabilirim.

Yardımcı olursanız sevinirim.

Bootstrap Tab ile yapılabilir hocam. Biraz araştır istersen.

Burayı inceleyebilirsin...

Hocam tablarla yapılmış bir olay değil ki , örneğe bakabilirseniz sevinirim.

Merhabalar hmzkvk58 ,

Burada özel bir yapı kullanılmış olabilir. (Bkz: İlgili JavaScript Dosyası)

Menüyü tetikleyen JavaScript kod yapısı;

/******************************
* Navigation
*****************************/
function Nav(){

$("div[class*='menu'] a[href^='#']").bind("click", jump);

if (location.hash){

var h=location ;
$('.active-menu').removeClass('active-menu');
$("a[href~='"+h+"']").addClass('active-menu');

//to not give the page offset if page not opened in tablet or other
if($(window).width()> 768 ){
var l=parseInt($('.first-block').css('width'), 10);
$('.mainpart').scrollTo( location.hash , 800,{offset:{left:-l}} );
}
else{
$('.mainpart').scrollTo( location.hash , 800);
}

}else{
$('.active-menu').removeClass('active-menu');
if ($('.mainpart').length)
$('.menu a[href*="home"]').addClass('active-menu');
else
$('.menu a[href="index.html"]').addClass('active-menu');
if ($('.blog').length)
$('.menu a[href="blog.html"]').addClass('active-menu');
}



// Close/Open Menu On Click
$('.menu-button-minus').click(function(){
var $links=$('.menu');

$(this).toggleClass('menu-button-plus');

$links.animate({
marginLeft: parseInt($links.css('marginLeft'),10) == 0 ?
$links.outerWidth()+12 : 0
},{complete:function(){
$('.menu>ul>li').hover(function(){
$(this).parents('.menu-area').css('overflow','visible');
$(this).children('ul').stop().fadeIn();
},function(){
$(this).parents('.menu-area').css('overflow','hidden');
$(this).children('ul').stop().fadeOut().hide();});
}});

$('.header-titles').fadeToggle('slow');


});



//Mobile Menu
$(document).click(
function (e) {
var $mobileNavBtn = $('.mobile-menu > a'),
ta= e.target,
m=$mobileNavBtn.get(0),
c=$mobileNavBtn.hasClass('active');

if ((ta != m) && c)
$mobileNavBtn.click();
}
);

$('.mobile-menu > a').click(function (e) {
var $this = $(this),
$menu = $this.parent().find('> ul');

if ($this.hasClass('active')) {
$menu.slideUp('fast');
$this.removeClass('active');
$this.css('background-image','url(assets/img/mobile-button.png)');
}
else {
$menu.slideDown('fast');
$this.addClass('active');
$this.css('background-image','url(assets/img/mobile-button-minus.png)');
}

e.preventDefault();
});
}

Birebir hazırını bulamayabilirsin ama çeşitli jQuery kütüphanelerini kullanarak edit ile benzer bir yapı elde edebilirsin...

jQuery araştır sen hocam dediğiniz eyler jquery animasyon yöntemleri ile yapılıyor.

Aradığın bunun gibi bir şey mi?

http://www.ontedi.com/portfolyo

hmzkvk58 dostum isim olarak aratmana pek gerek yok. css javascript biliyorsan düşünerek de yapabilirsin bu yapıyı..Mantık olarak biraz anlatmaya çalışayım sen de üzerine düşün kod bilgin varsa kendin yapabilirsin. animation butonuna basınca ne oluyor animation? ile ilgili olanlar gösteriliyor diğerleri gizleniyor. O zaman animationa basıldıgında göstermek istediklerine animation isimli bir class atarsın. diğerlerine de aynı şekilde designda göstermek istediklerine design class ı atarsın vs.. sonra yapman gereken şey ne olacak? animation butonuna tıkladığında animation dışındakileri hide edecek bir fonksiyon yazacaksın javascript veya jquery vs hangisinde iyi isen .. aynı şekilde design butonuna tıklanılınca design dışındakileri hide edeceksin design ı show edeceksin vs.. view all butonunda yapman gereken ne olacak? tum class lardaki hide ları sildirdin mi hepsi görünür olmuş olacak zaten.. saydığım fonksiyonları ayrı ayrı da yazabilirsin ama dikkat etmen gerekir ya da tek bir fonksiyonda da halledebilirsin belki kodlama yeteneğine kalmış artık oarası.. ama böyle bir mantık kurabilirsin. effect falan vermek istersen o işin gösteri kısmı onu da fadeIn fadeOut larla falan yapabilirsin..