แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery

08 February 2011 By Ninenik Narkdee
jquery เมนู แนวตั้ง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery เมนู แนวตั้ง



ตัวอย่างแท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery สำหรับแสดงข้อมูล เป็นแนวทาง
สามารถปรับแต่งการแสดงผลได้ตามต้องการ หรือนำไปประยุกต์ใช้กับการดึงข้อมูลแบบ ajax
เพิ่มเติม

    • Data 1
    • Data 2
    • Data 3
    • Data 4
    • Data 4


ตัวอย่างโค้ดทั้งหมด
 

<!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>

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: เมนู jquery แนวตั้ง







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ