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

18 October 2008

CSS Code

<style type="text/css">
ul.v_menu{ /* กำหนดขอบเขตของเมนู */
	list-style:none;
	margin:0px;
	padding:0px;
	width:180px;
	font-family:tahoma, "Microsoft Sans Serif", Vanessa;
	font-size:12px;
}
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */
	display:block;
	height:20px;
	text-indent:5px;
	background-color:#339900;
	border:1px #006633 inset;
}
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
	display:block;
	height:20px;
	text-indent:5px;
	background-color:#33CC33;
	border:1px #006633 inset;
}
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 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 01 Apr 09 การแก้ปัญหากรณี div หลักไม่ขยายตามความสูงของ div ย่อย ใน Firefox อ่าน 3009 25 Sep 08 สี Colours การใช้งานสี อ่าน 2980 25 Sep 08 สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS อ่าน 2834 25 Sep 08 CSS แทรกโค๊ดในเว็บโดยมีหมายเลขบรรทัดกำกับ อ่าน 2763

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

24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 4625 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2932 08 Dec 09 แปลง jQuery object เป็น DOM object อ่าน 2476 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2844 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9332 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 4805 25 Sep 08 Jquery javascript library มาแรง อ่าน 6385 06 Mar 11 แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebook อ่าน 3274 08 Oct 10 การอัพเดท สถานะบน facebook อัตโนมัติ แบบ graph api ด้วย php sdk อ่าน 3534 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3131 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7137 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3851 09 May 10 ดึงค่า ข้อมูล จาก xml ไฟล์ มากำหนดเป็นตัวแปร array ด้วย php อ่าน 2151 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3994 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17299 02 Apr 09 สร้างรายการตัวเลือกให้กับ input text ด้วย jQuery อย่างง่าย อ่าน 4089 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2379 25 Sep 08 ตรวจสอบระดับความปลอดภัยของ รหัสผ่านด้วย Ajax อ่าน 3928 15 Nov 09 สร้างลิ้งค์เมนู 2 ภาษา กรณี ไทย อังกฤษ ด้วย php อย่างง่าย อ่าน 1864 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5416
จำนวนผู้เยี่ยมชม 784695
คน 2012 © Copyright ninenik.com. All rights reserved.