PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

16 December 2011 By


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

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

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





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