PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

18 October 2008 By Ninenik Narkdee
แนวนอน เมนู 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>

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



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





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







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











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