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

16 December 2011 By 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





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







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ