PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สร้างเมนูแนวนอน ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย

18 October 2008 By
เมนู css แนวนอน

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



CSS Code

<style type="text/css">
ul.v_menu{ /* กำหนดขอบเขตของเมนู */
	list-style:none;
	margin:0px;
	padding:0px;
	font-family:tahoma, "Microsoft Sans Serif", Vanessa;
	font-size:12px;
}
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#339900;
	border:1px #006633 inset;
	float:left;
	text-align:center;
}
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
	display:block;
	width:150px;
	height:20px;
	text-indent:5px;
	background-color:#33CC33;
	border:1px #006633 inset;
	float:left;
	text-align:center;	
}
ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
	text-decoration:none;
	color:#FFFFFF;
	line-height:20px;
}
</style>

HTML Code

<ul class="v_menu">
	<li><a href="#">Link menu item 1</a></li>
	<li><a href="#">Link menu item 2</a></li>
	<li><a href="#">Link menu item 3</a></li>
	<li><a href="#">Link menu item 4</a></li>			
</ul>

ตัวอย่างผลลัพธ์







Tags:: css เมนู แนวนอน






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


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