ใช้ jQuery กับ CSS สร้างเมนูย่อย แนวนอน รูปแบบคล้ายแท็บเมนู

16 December 2011 เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee

jquery เมนูย่อย แนวนอน css

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

ตัวอย่าง และโค้ดต่อไปนี้ เป็นแนวทางสำหรับสร้างเมนู สำหรับเว็บไซต์ โดยจะมีเมนูย่อยแสดง

เมื่อเลื่อนเมาส์ไปที่เมนูหลักของเมนูย่อยนั้น สามารถนำไปประยุกต์ หรือปรับแต่ง 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>

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