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 สำหรับอ้างอิง