เพราะมันมีความพิเศษอยู่ในตัวของมันหลายอย่าง นอกจากการใช้งานที่ง่ายแล้ว มันยังช่วยลดภาระให้กับโค๊ด Javascript ที่ยุ่งยากของเราให้สั้นกระชับและเข้าใจง่ายยิ่งขึ้นอีกด้วย รวมถึงเอฟเฟ็ก (Effect) การแสดงผลต่างๆ ที่มีให้เลือกใช้งานหลาก อาทิ การแสดงผลแบบ fadeIn fadeOut , สไลด์ขึ้นลง slideUp slideDown รวมถึงคำสั่ง animate ซึ่งเป็นแบบขั้นสูงขึ้นมาหน่อย ซึ่งเราสามารถกำหนดการแสดงผล ตามความต้องการของเราได้ ว่าจะให้มีลูกเล่นแบบไหน ประมาณว่า สั่งได้ดั่งใจ เลยก็ว่าได้
วันนี้ก็เลยขอหยิบ Effect slideUp กับ slideDown มาทำเมนูให้ดูเป็นขวัญตาซักหน่อยครับ ซึ่งเมนูที่สอนจะเป็นเมนูแนวตั้งนะครับ ฝรั่งมักจะเรียกว่า Vertical Menu หรือDrop down Menu ครับ
มาดูโค๊ดกันเลยครับ และลองนับบรรทัดโค๊ด jQuery ของผมดูครับว่าใช้กี่ไปบรรทัด แล้วทั่นจะอึ้งในความเทพของมัน อย่างที่ผมต้องคาราวะมันเลยครับ ^^
<!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" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<title>สอนทำเมนูแนวตั้ง แสดงผลแบบสไลด์ขึ้น/ลงด้วย jQuery (Dropdown Menu,Verical Menu)</title>
<style type="text/css">
/* คำสั่ง CSS ในการจัดเมนู โดยเราจะใช้ Tag ul ทำเมนูแนวตั้ง (Drop down menu,Vertical Menu)*/
ul.sas_menu{
font-size:14px;
font-family:Tahoma, Geneva, sans-serif;
padding: 0;/*ระห่างภายในปรับให้ชิดให้หมด*/
margin:0;/*ชิดบนล่างซ้ายขวาให้หมด*/
}
ul.sas_menu li{/*ส่วนของเมนูหลัก*/
position: relative;/*ตำแหน่งหลักที่จะล็อคคำสั่ง position:absolute แสดงผลภายในกรอบ Element นี้เท่านั้น ไม่ให้ออกไปข้างนอก*/
background:#09C;/*สีพืนหลังของเมนูหลัก*/
padding: 5px; /*ระยะห่างจากขอบด้านใน*/
width: 130px;/*ความกว้างของเมนูในแต่ละช่อง*/
list-style: none;/* เอาจุดวงกลมออกจากแท็ก li*/
float:left;
}
ul.sas_menu ul{/*ส่วนของเมนูย่อย*/
position: absolute;/*แสดงผลอีสระ สามารถกำหนดตำแหน่งได้จากคำสั่งบรรทัดด้านล่าง*/
margin-top: 24px;/*ห่างจากเมนูหลักด้านบน 24px*/
left: 0px;/*ชิดซ้าย*/
margin: 0;/*ชิดระยะห่างทั้งหมด*/
padding: 0;/*ชิดระยะห่างจากขอบภายในทั้งหมด*/
width: 136px/*ความกว้างของเมนูย่อย*/
margin-left:130px;
display:none;/*ซ่อนการแสดงผลเมนูย่อย*/
}
ul.sas_menu li ul li{/*ส่วนของเมนูย่อย*/
background:#09C; /*สีพื้นหลังของเมนูย่อย*/
color:#fff; /*สีตัวอักษรของเมนูสีขาว*/
padding: 5px; /*ระยะห่างจากขอบด้านใน*/
width: 130px;/*ความกว้างของเมนูในแต่ละช่อง*/
list-style: none;/* เอาจุดวงกลมออกจากแท็ก li*/
float:left;
}
ul.sas_menu ul li:hover{/*แสดงผลเมื่อมีเมาส์ชี้ที่เมนูย่อย*/
background:#09C1FF;/*เปลี่ยนสีพื้นหลัง (background) ให้เป็นสีฟ้าอ่อน*/
}
a{/*ส่วนของลิงค์*/
text-decoration:none;/*ไม่มีขีดเส้นใต้ขั้น*/
color:#fff; /*สีตัวอักษรเป็นสีขาว*/
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {//ทำงานเมื่อหน้าเว็บได้โหลดเสร็จสมบูรณ์แล้ว
$('.sas_menu > li').hover(//เมื่อเมาส์ชี้ที่เมนูหลัก
function(){
$(this).find('ul').slideDown('fast');//แสดงเมนูย่อของเมนูหลักนั้นๆ
},
function(){//เมื่อเอาเมาส์ออกจากเมนูหลักนั้นๆ
$(this).find('ul').slideUp('fast');//ให้ซ่อนเมนูย่อยของเมนูหลักนั้นๆ
});
});
</script>
</head>
<body>
<ul class="sas_menu">
<li><a href="#">
เมนู 1
</a>
<ul>
<li><a href="#">
เมนูย่อย 1.1
</a></li>
</ul>
</li>
<li><a href="#">เมนู 2
</a>
<ul>
<li>
<a href="#">เมนูย่อย 2.1</a> </li>
<li>
<a href="#"> เมนูย่อย 2.2</a> </li>
</ul>
</li>
<li><a href="#">เมนู 3
</a>
<ul>
<li><a href="#">
เมนูย่อย 3.1
</a></li>
<li><a href="#">
เมนูย่อย 3.2
</a></li>
<li><a href="#">
เมนูย่อย 3.3
</a></li>
</ul>
</li>
</ul>
</body>
</html>
รับพัฒนา jQuery Menu แบบมีลูกเล่นและดีไซน์สวยงาม ดูรายละเอียดเพิ่มเติมได้ที่ลิงค์ >> รับพัฒนา jQuery Vertical Menu (เมนูแนวตั้ง)
ไม่มีความคิดเห็น :
แสดงความคิดเห็น