ตัวอย่างแท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery สำหรับแสดงข้อมูล เป็นแนวทาง
สามารถปรับแต่งการแสดงผลได้ตามต้องการ หรือนำไปประยุกต์ใช้กับการดึงข้อมูลแบบ ajax
เพิ่มเติม
ตัวอย่างโค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vertical icon tab</title>
<style type="text/css">
ul.ver_icon_tab{
position:relative;
float:left;
list-style:none;
padding:0px;
margin:0px;
display:block;
width:500px; /* ความกว้างทั้งหมด = ความกว้างเมนูด้านซ้าย + ความกว้างเนื้อหา ฝั่งขวา */
height:250px; /* ความสูงทั้งหมด */
background-color:#9CF;
}
ul.ver_icon_tab li.b_icon{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
display:block;
width:100px; /* ความกว้างเมนูด้านซ้าย */
height:50px; /* ความสูงเมนูด้านซ้าย */
}
ul.ver_icon_tab li.b_icon a{
display:block;
width:100px; /* ความกว้างเมนูด้านซ้าย */
height:50px; /* ความสูงเมนูด้านซ้าย */
cursor:pointer;
}
ul.ver_icon_tab li.b_icon ul{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
top:0px;
left:100px; /* ขยับความกว้างเนื้อหา ฝั่งขวา ออกมา เท่ากับ ความกว่างเมนูด้านซ้าย */
}
ul.ver_icon_tab li.b_icon ul li.vertical_detail_show{
position:absolute;
padding:0px;
margin:0px;
list-style:none;
display:none;
width:400px; /* ความกว้างของส่วนเนื้อหา ฝั่งขวา */
height:250px; /* ความสูงทั้งหมด */
}
</style>
</head>
<body>
<ul class="ver_icon_tab">
<li class="b_icon" style="background-color:#DDEAD9;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#DDEAD9;display:block;">Data 1</li>
</ul>
</li>
<li class="b_icon" style="background-color:#BDE3E7;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#BDE3E7;">Data 2</li>
</ul>
</li>
<li class="b_icon" style="background-color:#EEEFAB;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#EEEFAB;">Data 3</li>
</ul>
</li>
<li class="b_icon" style="background-color:#EBC8C1;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#EBC8C1;">Data 4</li>
</ul>
</li>
<li class="b_icon" style="background-color:#E2BEE9;"><a href="#"></a>
<ul>
<li class="vertical_detail_show" style="background-color:#E2BEE9;">Data 4</li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(".b_icon").each(function(j,k){
var top_p=(50*j)+"px"; /* 50 คือความสูงเมนูด้านซ้าย */
var top_p2="-"+(50*j)+"px"; /* 50 คือความสูงเมนูด้านซ้าย */
$(this).css("top",top_p);
$(this).find("li.vertical_detail_show").css("top",top_p2);
});
$("li.b_icon a").click(function(){
if($(this).parent("li").hasClass("b_icon")==true){
$("li.vertical_detail_show").hide();
$(this).parent("li").find("li.vertical_detail_show").show();
}
});
});
</script>
</body>
</html>
