สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul.tabme > li").click(function(){
		$(this).siblings().children("ul").slideUp(100);	
		$(this).children("ul").slideDown();
	});
});
</script>

CSS Code

<style type="text/css">
ul.tabme,ul.tabme > li > ul,ul.tabme li{
	list-style:none;
	padding:0;margin:0;
}
li#menutab1{	
	display:block;
	height:20px;
	width:100px;
	text-align:center;
	float:left;
	cursor:pointer;
	background-color:#EDFAF0;			
}
li#menutab2{	
	display:block;
	height:20px;
	width:100px;
	text-align:center;
	float:left;
	cursor:pointer;
	background-color:#FFCCCC;		
}
li#menutab3{	
	display:block;
	height:20px;
	width:100px;
	text-align:center;
	float:left;
	cursor:pointer;
	background-color:#FFFFCC;			
}
ul.tabme > li > ul{	
	clear:left;
	display:block;
	width:300px;
	height:120px;
	margin-top:5px;
	display:block;	
	text-align:left;
}
ul#tab1{
	margin-left:0px;
	border:0px #F4F4F4 solid;
	background-color:#EDFAF0;		
}
ul#tab2{
	margin-left:-100px;
	display:none;	
	border:0px #F4F4F4 solid;
	background-color:#FFCCCC;		
}
ul#tab3{
	margin-left:-200px;
	display:none;
	border:0px #F4F4F4 solid;
	background-color:#FFFFCC;		
}
</style>

HTML Code

<ul class="tabme">
	<li id="menutab1">แท็บที่ 1
		<ul id="tab1">
			<li>รายละเอียดแท็บที่ 1</li>
		</ul>
	</li>
	<li id="menutab2">แท็บที่ 2
		<ul id="tab2">
			<li>รายละเอียดแท็บที่ 2</li>
		</ul>
	</li>
	<li id="menutab3">แท็บที่ 3
		<ul id="tab3">
			<li>รายละเอียดแท็บที่ 3</li>
		</ul>
	</li>		
</ul>

ตัวอย่างผลลัพธิ์

• แท็บที่ 1
  • รายละเอียดแท็บที่ 1
    
    
    
    
    
    
• แท็บที่ 2
  • รายละเอียดแท็บที่ 2
    
    
    
    
    
    
• แท็บที่ 3
  • รายละเอียดแท็บที่ 3