PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


แท็บเมนู 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>

 







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






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


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