Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ถึงเพ่ num หรือเพ่คนอื่นๆครับเรื่องการทำ menu ผมเข้าไปดูเว็บ http://docs.jquery.com อ่ะครับ

ถึงเพ่ num หรือเพ่คนอื่นๆครับเรื่องการทำ menu ผมเข้าไปดูเว็บ http://docs.jquery.com อ่ะครับ

เริ่มหัวข้อใหม่

phpbasic

โพสกระทู้ ( 1,579 )
บทความ ( 3 )

ผมเข้าไปดูเว็บ http://docs.jquery.com อ่ะครับ ไม่รู้ว่าเป็นของเพ่ num หรือเปล่า ผมหาวิธีการทำเมนูแบบเว็บนี้อยู่อ่ะครับ คือว่าใช้ CSS ทำได้ใช้เปล่าครับ มีตัวอย่างให้ดูหรือเปล่าครับผมเข้าไปดูแล้วหาไม่เจออ่ะครับ
ขอบคุณมากครับ

Tag : - - - -

Date : 2009-07-30 21:21:26

By : somparn

View : 908

Reply : 7

No. 1

Guest

แหมพี่ไม่ได้เก่งขนาดนั้น
เมนูตรงไหนอะครับ ถ้าตรงข้างบนใช้ css ครับ

<html>

<head>
<style>
#top-menu {text-align:right}
#top-menu a{background-color:seashell;text-decoration:none;padding:0;margin:0;border-width:0;border-bottom:seashell solid 2px;}
#top-menu a:hover{background-color:seashell;text-decoration:none;padding:0;margin:0;border-bottom:gold solid 2px;}
#top-menu a.current {background-color:seashell;text-decoration:none;padding:0;margin:0;border-bottom:maroon solid 2px;}
</style>
</head>

<body>

<div id="top-menu">
<a href="#" class="current">หน้าแรก </a><a href="#">รายการสินค้า </a><a href="#">สั่งซื้อสินค้า </a>
</div>

</body>
</html>

โค้ดนี้ตรงมุมยังไม่โค้งนะ ถ้าให้โค้งต้องใช้ photoshop ทำรูปแปะไว้ตรงด้านซ้ายกับด้านขวา
หรือไม่ก็ใช้ javascript ที่ช่วยสร้าง css ตัวนี้ครับ http://www.curvycorners.net/demos

Date : 2009-07-30 23:38:29

By : num

No. 2

phpbasic

โพสกระทู้ ( 1,579 )
บทความ ( 3 )

เมนูทางด้านซ้ายมืออ่ะครับ

Date : 2009-07-31 11:39:44

By : somparn

No. 3

Guest

Date : 2009-07-31 13:07:20

By : num

No. 4

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

css ธรรมดาๆ นี่แหละครับ

Date : 2009-07-31 13:38:09

By : plakrim

No. 5

Guest

แบบนี้ป่าวหว่า

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.header1 {
	background-color: #A9D5F5;
	font-weight: bold;
	width:200px;
	text-align:center;
	padding:5px 0px;
}
.box {
	width:205px;
}
.box ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border: 0px;	
}
.box li {
	padding: 0px;
	margin: 0px;
}
.box a {
	display: block;
	padding:0;
	margin:0;
	text-indent:10px;
	width:200px;	
	background-color: #DFEEF9;
	border-bottom:2px #DFEEF9 solid;
}
.box a:hover {
	display: block;
	width:200px;
	text-indent:10px;	
	padding:0;
	margin:0;
	background-color: #FFFF99;
	border-bottom:2px solid #CED2EC;	
}
-->
</style>
</head>

<body>
<div class="box">
<div class="header1">Title</div>
<ul>
  <li><a href="test1.php">Menu1</a></li>
  <li><a href="test2.php">Menu2</a></li>
  <li><a href="test3.php">Menu3</a></li>
</ul>
</div>
<div class="box">
<div class="header1">Title</div>
<ul>
  <li><a href="test1.php">Menu1</a></li>
  <li><a href="test2.php">Menu2</a></li>
  <li><a href="test3.php">Menu3</a></li>
</ul>
</div>
<div class="box">
<div class="header1">Title</div>
<ul>
  <li><a href="test1.php">Menu1</a></li>
  <li><a href="test2.php">Menu2</a></li>
  <li><a href="test3.php">Menu3</a></li>
</ul>
</div>


</body>
</html>

Date : 2009-07-31 13:44:30

By : num

No. 6

Guest

แก้ไขเพิ่ม text-decoration ลบเส้นใต้ทิ้ง งามขึ้นมาเชียวอิๆ

.box a {
display: block;
padding:0;
margin:0;
text-decoration:none; /* text-decoration */
text-indent:10px;
width:200px;
background-color: #DFEEF9;
border-bottom:2px #DFEEF9 solid;
}
.box a:hover {
display: block;
width:200px;
text-decoration:none; /* text-decoration */
text-indent:10px;
padding:0;
margin:0;
background-color: #FFFF99;
border-bottom:2px solid #CED2EC;
}

Date : 2009-07-31 13:50:53

By : num

No. 7

phpbasic

โพสกระทู้ ( 1,579 )
บทความ ( 3 )

โวๆๆ นี้แหละที่อยากทำมานาน

ขอบคุณมากครับ

Date : 2009-07-31 14:31:00

By : somparn

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ถึงเพ่ num หรือเพ่คนอื่นๆครับเรื่องการทำ menu ผมเข้าไปดูเว็บ http://docs.jquery.com อ่ะครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก