การเขียนเว็บแอพพลิเคชั่น สิ่งหนึ่งที่หลีกเลี่ยงไม่ค่อยจะพ้น ก็คือเมนู การสร้างเมนูนั้นโดยปกติแล้วเราจะใช้เลเยอร์ในการสร้าง (ถ้าสร้างเองนะ) และก็มักจะติดปัญหาเรื่อง เมนูที่สร้างไปอยู่ใต้ลิสต์บ้อก มันไม่ยอมอยู่ข้างบน และอีกปัญหาหนึ่งก็คือใช้เวลาในการทำมาก อีกทั้งไม่ค่อยจะสวย
วันนี้ผมเลยมาแนะนำ ปลั๊กอินของ jQuery ที่ใช้สำหรับสร้างเมนูโดยเฉพาะ ทั้งใช้ง่าย สวยงาม และไม่ต้องเสียเวลานานๆในการเขียนเอง
ปลักอินตัวนี้ชื่อ superfish ลองดูตัวอย่าง และภาพที่มีคนนำปลั๊กอินตัวนี้ไปปรับแต่งใช้งาน กระตุ้นต่อมอยากในริดสีดวงกันเสียก่อน
ทีนี้เรามาดูวิธีการใช้งานกัน
1. ก่อนอื่นก็ต้องดาวน์โหลดไฟล์ที่จำเป็นกันก่อนละครับ Superfish-1.4.8.zip
2. เริ่มเขียนโปรแกรมเรียกใช้งานกันครับ
เริ่มจาก include ไฟล์ที่จำเป็นเข้ามา
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"> <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/jquery.bgiframe.min.js"></script> <script type="text/javascript" src="js/superfish.js"></script> |
สองบรรทัดนี้จะเป็นตัวที่ทำให้เมนูไม่ถูกลิสต์บ้อกทับ
<script type="text/javascript" src="js/hoverIntent.js"></script> <script type="text/javascript" src="js/jquery.bgiframe.min.js"></script> |
จากนั้นก็เขียนโครงสร้าง html ซึ่งเราใช้แท็ก ul เป็นตัวสร้าง
<ul class="sf-menu">
<!-- no have sub menu-->
<li><a href="#">Main menu item #1</a></li>
<!-- have sub menu-->
<li class="current"><a href="#a">Main menu item #2</a>
<ul>
<li><a href="#aa">Sub menu item #2-1</a></li>
<li><a href="#aa">Sub menu item #2-2</a></li>
<li><a href="#aa">Sub menu item #2-3</a></li>
</ul>
</li>
</ul> |
ใส่ class=”sf-menu” ให้ ul ด้วยเราจะได้อ้างอิงถึงตัวมันได้ ในกรณีที่ท่านต้องการทำให้มีเมนูย่อย ท่านสามารถใส่ ul ซ้อนเข้าไปใน li เมนูย่อยสามารถสร้างสักกี่ลำดับชั้นก็ได้ ไม่จำกัด
เสร็จแล้วขั้นตอนต่อไปก็เรียกใช้ปลั๊กอิน ทำให้แท็ก ul ของเรากลายเป็นเมนู อันงดงาม
<script type="text/javascript">
$(document).ready(function(){
$(".sf-menu").superfish().find('ul').bgIframe({opacity:false});
});
</script> |
ด้วยขั้นตอนเพียงง่ายๆเท่านี้ ท่านก็จะมีเมนูอันสวยงามใช้งาน แล้วเราจะนั่งเขียนโค้ดเองด้วย javascript ให้ปวดริดสีดวงทำไม
โค้ดทั้งหมด
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Superfish menu</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sf-menu").superfish().find('ul').bgIframe({opacity:false});
});
</script>
</head>
<body>
<ul class="sf-menu">
<!-- no have sub menu-->
<li><a href="#">Main menu item #1</a></li>
<!-- have sub menu-->
<li class="current"><a href="#a">Main menu item #2</a>
<ul>
<li><a href="#aa">Sub menu item #2-1</a></li>
<li><a href="#aa">Sub menu item #2-2</a></li>
<li><a href="#aa">Sub menu item #2-3</a></li>
</ul>
</li>
</ul>
</body>
</html> |
เอาละครับผมจะแนะนำวิธีการปรับแต่งตัวเมนูสักเล็กน้อย การปรับแต่งทั้งหมดท่านสามารถทำได้ที่ไฟล์ css\superfish.css
วิธีการปรับความกว้างของเมนู
.sf-menu ul {
position: absolute;
top: -999em;
width: 10em; /* left offset of submenus need to match (see below) */
}
.
.
.
ul.sf-menu li li.sfHover ul {
left: 10em; /* match ul width */
top: 0;
} |
แก้ width ให้กว้างเท่าที่ท่านต้องการ เช่น width:15em; และเมื่อท่านแก้ width แล้วท่านต้องแก้ left ให้มีค่าเท่ากัน left:15em;
ข้อมูลเพิ่มเติม : jQuery superfish plugin
วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
Programmer, Blogger
ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ
minddezign says:
23/12/2552 at 23/12/2552
อันนี้แจ๋วมากๆครับ
kongtoonarmy says:
24/12/2552 at 24/12/2552
สุดยอดครับ เคยนั่งเขียนเองอยู่พักหนึ่ง
เวลาเจอไฟล์ flash นี่โดนทับประจำ
p1i3c1h says:
29/12/2552 at 29/12/2552
ขอบคุณครับ Bookmark ไว้เลย เป็นประโยชน์มากๆเลยครับ
บอย says:
05/01/2553 at 05/01/2553
ดีเลย ie6 ก็ใช้ได้สบายเลย
Bowwy says:
03/02/2553 at 03/02/2553
เยี่ยมเลยค่ะ
koii says:
17/10/2553 at 17/10/2553
flash ก็ยังทับอยู่ค่ะ แก้ ก็ไม่หายค่ะ ต้องแก้ที่ไหนคะ