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

08 February 2011 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

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

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

ดูแล้ว 23,246 ครั้ง

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

- Data 1
- Data 2
- Data 3
- Data 4
- Data 4

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

100

101

102

103

104

105

106

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