ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู
16 December 2011ตัวอย่าง และโค้ดต่อไปนี้ เป็นแนวทางสำหรับสร้างเมนู สำหรับเว็บไซต์ โดยจะมีเมนูย่อยแสดง
เมื่อเลื่อนเมาส์ไปที่เมนูหลักของเมนูย่อยนั้น สามารถนำไปประยุกต์ หรือปรับแต่ง css ให้สวยงาม
ได้ตามต้องการ
ตัวอย่าง
โค้อตัวอย่างทั้งหมด
<!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></title>
<style type="text/css">
body{
font: Tahoma, Thonburi;
font-size:12px;
}
/* CSS ส่วนแถบแนวทั้งหมดของเมนูหลัก */
ul#top_nav_menu{
position:relative;
display:block;
width:900px;
height:35px;
padding:0px;
margin:0px;
list-style:none;
background-color:#99CCCC;
overflow:visible;
line-height:35px;
}
/* css ส่วนของเมนูหลัก */
ul#top_nav_menu li{
background-color:#FFCC33;
position:relative;
display:block;
float:left;
height:35px;
padding:0px 15px;
margin:0px;
list-style:none;
}
ul#top_nav_menu li a{
text-decoration:none;
text-transform:uppercase;
}
/* css ส่วนของแถบแนวทั้งหมดของเมนูย่อย */
ul#top_nav_menu li ul{
background-color:#CC99CC;
position:absolute;
clear:both;
float:left;
top:35px;
left:0px;
display:none;
height:35px;
width:900px;
padding:0px;
margin:0px;
list-style:none;
}
/* css ส่วนของเมนูย่อย */
ul#top_nav_menu li ul li{
position:relative;
background-color:#CCCC66;
float:left;
display:block;
height:35px;
padding:0px 15px;
margin:0px;
list-style:none;
}
</style>
</head>
<body>
<div>
<ul id="top_nav_menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Project Info</a>
<ul>
<li><a href="#"><span>Concept</span></a></li>
<li><a href="#"><span>Fact Sheet</span></a></li>
<li><a href="#"><span>Facilities</span></a></li>
<li><a href="#"><span>Floor Plan</span></a></li>
<li><a href="#"><span>Unit Layout</span></a></li>
<li><a href="#" target="_blank"></a></li>
</ul>
</li>
<li><a href="#">Location</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Promotion</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Siri Service</a></li>
<li>
<a href="#">Contact us</a>
<ul>
<li><a href="#"><span>Concept</span></a></li>
<li><a href="#"><span>Fact Sheet</span></a></li>
<li><a href="#"><span>Facilities</span></a></li>
<li><a href="#"><span>Floor Plan</span></a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#top_nav_menu li").hover(function(){
var offsetLeft=$(this).position().left;
$(this).find("ul").css("left",-offsetLeft+"px").delay(300).slideDown(100);
},function(){
$(this).find("ul").stop(true,true).slideUp(100);
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
04 Oct 08 SQL คืออะไร อ่าน 7631 16 Aug 10 เทคนิค ใช้ event beforeunload แจ้งเตือนก่อน ปิดบราวเซอร์ ด้วย jQuery อ่าน 1651 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13253 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 9078 21 Aug 10 เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ อ่าน 3608 06 Jan 09 สร้างฟังก์ชัน javascript เช็ค check email อย่างง่าย อ่าน 5923 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17648 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2917 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2980 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4120 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 1904 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2537 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 4033 22 Sep 11 แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery อ่าน 1196 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1912 13 Oct 08 คำสั่ง SQL WHERE อ่าน 3557 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2778 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 5726 29 Mar 10 สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map อ่าน 6781 17 Dec 10 สร้าง php ฟังก์ชัน ตราจสอบ ก่อนถึงวันหมดอายุ อย่างง่าย อ่าน 1907