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

18 October 2008

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>

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








บทความในหมวดที่่น่าสนใจ อื่นๆ CSS Learning

25 Sep 08 ความรู้เกี่ยวกับ CSS เบื้องต้น อ่าน 4142 25 Sep 08 เอา scrollbar ออกจาก textarea ด้วย CSS อ่าน 4101 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4044 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3993 25 Sep 08 Borders การจัดการเกี่ยวกับขอบ อ่าน 3991 15 Oct 08 การสร้างข้อความแจ้งเตือนด้วย CSS อ่าน 3771 25 Sep 08 ข้อความ Text การจัดการเกี่ยวกับขนาดและรูปร่างของข้อความ อ่าน 3725 25 Sep 08 รวมส่วนประกอบต่างข้างบนเป็น CSS อ่าน 3649 19 Mar 10 ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS อ่าน 3529 06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3471 25 Sep 08 Margins and Padding การจัดการพื้นที่ระหว่างสิ่งต่างๆ อ่าน 3434 03 Apr 11 จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break word อ่าน 3291 08 Oct 08 การกำหนดสี scrollbar ของ textarea อ่าน 3278 16 Oct 08 การแสดงเฉพาะปุ่มสำหรับ upload อ่าน 3231 11 May 10 การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง อ่าน 3195

บทความคนเข้าอ่านวันนี้

19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5416 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3131 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17299 25 Sep 08 Jquery javascript library มาแรง อ่าน 6385 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 414 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 4625 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9332 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 23 Nov 08 สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย อ่าน 24732 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2856 02 Jun 10 การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascript อ่าน 2168 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 24 Mar 10 เริ่มต้น รู้จัก ก่อนการใช้งาน google map api อ่าน 5374 06 Oct 10 การใช้งาน graph api ของ facebook ด้วย php sdk อ่าน 3703 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2379 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 5973 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7878 09 Jul 10 เพิ่มความเร็ว ให้กับการ cache ด้วย jquery ajax และ php cache class อ่าน 2299 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 2426
จำนวนผู้เยี่ยมชม 784695
คน 2012 © Copyright ninenik.com. All rights reserved.