Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ

jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ

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

ranarong

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

ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ

Code (PHP)

<!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>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

	$(function() {
						 
			tree_menu("#tree-menu", 100, true);
	});
	
	function tree_menu(ele,time,close_other) {
		
		$(ele + ' > li > a').click(function() {
			if(close_other) $(ele + ' > li > ul').slideUp(time);
			var next = $(this).next();
			if(next.is(':visible')) {
				next.slideUp(time);
				$(this).find('span').html('+');
			} else {
				next.slideDown(time);
				$(this).find('span').html('-');
			}	
		});
	}

</script>

<style type="text/css">
	body { font:12px Tahoma, Geneva, sans-serif; }
	#div-head-tree-menu { width:230px; padding:10px 10px 10px 10px; text-align:center; background-color:#ddd; border:1px solid #ccc; border-bottom:5px solid #a8bfd7; }
	#div-tree-menu { padding-left:20px; padding-bottom:10px; width:230px; background-color:#eee; overflow:hidden; border:1px solid #aaa; border-top:1px solid #FFF;   }
	#tree-menu {  width:200px; float:left; margin:0; padding:0; margin-top:-1px;}
	#tree-menu ul { margin:0; padding:8px;  }
	#tree-menu li { list-style:none;  padding:8px; margin:0; border-bottom:1px solid #999; border-top:1px solid #fff; }
	#menu-lv1 { display:none; }
	#menu-lv1 li { border-bottom:none; border-top:none; }
	#menu-lv2 { display:none; }
	#menu-lv2 li { border-bottom:none; border-top:none; }
	#menu-lv3 { display:none; }
	#menu-lv3 li { border-bottom:none; border-top:none; }
	#menu-lv4 { display:none; }
	#menu-lv4 li { border-bottom:none;  border-top:none; }
	
	a:link { text-decoration: none; color: #00F; }
	a:visited { text-decoration: none; color: #0CF; }
	a:hover { text-decoration: none; color: #F60; }
	a:active { text-decoration: none; color: #F00; }
	.txt-red { color:#F00 }
</style>
</head>

<body>

<div id="div-head-tree-menu">: Tree Menu :</div>

<div id="div-tree-menu">
  <ul id="tree-menu">
    <li><a href="#"><span>+</span> menu-1</a>
      <ul id="menu-lv1">
        <li>&#8250; <a href="#">sub-menu-1-1</a></li>
        <li>&#8250; <a href="#">sub-menu-1-2</a></li>
        <li>&#8250; <a href="#">sub-menu-1-3</a></li>
        <li>&#8250; <a href="#">sub-menu-1-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-2</a>
      <ul id="menu-lv2">
        <li>&#8250; <a href="#">sub-menu-2-1</a></li>
        <li>&#8250; <a href="#">sub-menu-2-2</a></li>
        <li>&#8250; <a href="#">sub-menu-2-3</a></li>
        <li>&#8250; <a href="#">sub-menu-2-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-3</a>
      <ul id="menu-lv3">
        <li>&#8250; <a href="#">sub-menu-3-1</a></li>
        <li>&#8250; <a href="#">sub-menu-3-2</a></li>
        <li>&#8250; <a href="#">sub-menu-3-3</a></li>
        <li>&#8250; <a href="#">sub-menu-3-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-4</a>
      <ul id="menu-lv4">
        <li>&#8250; <a href="#">sub-menu-4-1</a></li>
        <li>&#8250; <a href="#">sub-menu-4-2</a></li>
        <li>&#8250; <a href="#">sub-menu-4-3</a></li>
        <li>&#8250; <a href="#">sub-menu-4-4</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

DEMO:= Tree-menu
Download:= Tree-menu
เครดิต : LindyFralin ผู้เขียน jquery

Tag : - - - -

Date : 2010-01-27 17:20:19

By : DownsTream

View : 13571

Reply : 22

No. 1

mr.YoYO

โพสกระทู้ ( 604 )
บทความ ( 0 )

สวยดีลูกพี่

Date : 2010-01-27 17:40:16

By : yomaster

No. 2

phpbasic

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

หุหุหุ คนนี้มาตอบทีมีของมาฝากด้วยชอบจริงๆ

Date : 2010-01-27 18:31:26

By : somparn

No. 3

ranarong

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

พอดีเพื่อนอยากได้ tree menu นะครับ ก็เลย เขียนให้

โค้ดใช้งานได้แล้วละครับ

แต่คิดว่าโค้ด jquery ทีเขียนไปยังไม่ดีพอ

ก็เลยเอามาให้ เมพๆ ดูให้หน่อย ครับ

ยิงปืนนัดเดียวได้นกหลายตัว

Date : 2010-01-27 18:40:41

By : DownsTream

No. 4

LindyFralin

โพสกระทู้ ( 114 )
บทความ ( 0 )

ลองมั่ว ๆ ดูบ้าง
ตรง html ผมปรับ เอา Attribute ต่าง ๆ ของ a ออก ไม่รู้ว่า ค่า id มีความสำคัญอะไรหรือเปล่า หรือต้องเอาไว้ใช้หาอะไรบางอย่าง เลยต้องใส่ไว้
และ event on click ผมถอดออก ผมลองเอาออกดูครับ

Code

<div id="div-head-tree-menu">: Tree Menu :</div>

<div id="div-tree-menu">
  <ul id="tree-menu">
    <li><a href="#"><span>+</span> menu-1</a>
      <ul id="menu-lv1">
        <li>&#8250; <a href="#">sub-menu-1-1</a></li>
        <li>&#8250; <a href="#">sub-menu-1-2</a></li>
        <li>&#8250; <a href="#">sub-menu-1-3</a></li>
        <li>&#8250; <a href="#">sub-menu-1-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-2</a>
      <ul id="menu-lv2">
        <li>&#8250; <a href="#">sub-menu-2-1</a></li>
        <li>&#8250; <a href="#">sub-menu-2-2</a></li>
        <li>&#8250; <a href="#">sub-menu-2-3</a></li>
        <li>&#8250; <a href="#">sub-menu-2-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-3</a>
      <ul id="menu-lv3">
        <li>&#8250; <a href="#">sub-menu-3-1</a></li>
        <li>&#8250; <a href="#">sub-menu-3-2</a></li>
        <li>&#8250; <a href="#">sub-menu-3-3</a></li>
        <li>&#8250; <a href="#">sub-menu-3-4</a></li>
      </ul>
    </li>
    <li><a href="#"><span>+</span> menu-4</a>
      <ul id="menu-lv4">
        <li>&#8250; <a href="#">sub-menu-4-1</a></li>
        <li>&#8250; <a href="#">sub-menu-4-2</a></li>
        <li>&#8250; <a href="#">sub-menu-4-3</a></li>
        <li>&#8250; <a href="#">sub-menu-4-4</a></li>
      </ul>
    </li>
  </ul>
</div>

่javascript ประมาณนี้ครับ
Code

<script type="text/javascript">

$(function(){
	$('#tree-menu > li > a').click(function(){
		var next = $(this).next();
		if(next.is(':visible')){
			next.slideUp(300);
			$(this).find('span').html('+');
		}else{
			next.slideDown(300);
			$(this).find('span').html('-');
		}
		
	});
});
</script>

Date : 2010-01-27 21:37:42

By : LindyFralin

No. 5

Eakalak

โพสกระทู้ ( 43 )
บทความ ( 0 )

ถูกใจมากเลยครับกำลังศึกษาอยู่เลยครับ ขอบคุณมากนะครับ

Date : 2010-01-27 21:50:48

By : eakalak28

No. 6

ranarong

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

โอ้ว จ๊อด สุดยอดครับคุณ LindyFralin พอดีผมเขียนแบบคุณไม่ค่อยเป็นไม่ค่อยถนัดแบบใช้ event ที่มีอยู่ ถนัด
style javascript มากกว่า

แต่ก็ต้องขอบคุณมากครับ

และผมขอ โค้ดส่วนนี้ไปเป็น บทความผมด้วยนะครับ อิ อิ ขอหน้าตาเฉย เลย

ยังไม่อณุญาต เลย แต่นำไปใช้ แล้ว เอิ๊กๆๆๆ

Date : 2010-01-27 22:38:55

By : DownsTream

No. 7

LindyFralin

โพสกระทู้ ( 114 )
บทความ ( 0 )

Code (PHP)

$(function(){
		tree_menu("#tree-menu",100,true);
});
function tree_menu(ele,time,close_other){
	$(ele + ' > li > a').click(function(){
		if(close_other) $(ele + ' > li > ul').slideUp(time);
		var next = $(this).next();
		if(next.is(':visible')){
			next.slideUp(time);
			$(this).find('span').html('+');
		}else{
			next.slideDown(time);
			$(this).find('span').html('-');
		}	
	});
}
</script>

งั้นจะแปะแล้วผม รบกวนเพิ่มตรงนี้แล้วกันครับจะทำให้ ดูสมบูรณ์มากขึ้น ก็ให้เราสร้าง function เก็บเอาไว้ครับ เผื่อเราจะได้เอาไว้ใช้ภายหลังได้ ครับ
ผมลองเปลี่ยนให้เป็น function ไว้ให้เราเรียกกลับมาใช้ใหม่ได้ครับ

เวลาเรียกใช้ ก็

tree_menu("#tree-menu",100,true); แบบนี้ ครับ

ele คือ element ของ ul ที่เราต้องการทำครับ
time คือค่าความ delay ของการเปิดปิดครับผม อยากให้ช้าก็เพิ่มค่าครับ
close_other คือในตัวอย่างถ้าเกิดข้อมูลเยอะ ๆ ถ้าเรากดเปิดหมดมันก็จะยาวมากครับคือ expand กัน ยาวเหยียด ผมทำเพิ่มให้ว่า ถ้าใส่ true
ถ้า ตัวไหนถูกเปิด ตัวอื่นๆ จะถูก collapsed หมดให้เปิดเพียงตัวเดียวคือตัวที่เรากด แต่ถ้า ใส่ false ก็จะเปิดหมด อยากอยากปิดต้องกดปิดเองครับ
ถ้านึกภาพไม่ออกให้ลองเปลี่ยนค่า close_other true กับ false สลับกันครับผม จะเห็นความแตกต่างครับ

Date : 2010-01-28 03:12:07

By : LindyFralin

No. 8

Guest

ขอบคุณสำหรับคนตั้ง และ คนตอบครับ

Date : 2010-01-28 08:47:26

By : ไวยวิทย์

No. 9

ranarong

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

สุดยอดกว่าเดิม ทีนี้นำไปประยุกแบบ หลายๆ level ได้เลยไม่ต้องทำไรมาก

ต้องขอขอบคุณอีกครับครั้ง

ปล. ท่านไดโหลด vesion เก่าไปกรุณาไปโหลดเวอร์ชันใหม่ ครับ

เป็นเวอร์ชั่นที่คุณ LindyFralin เขียน jquery แบบสมบูรณ์สุดๆ เท่าที่ผมดูคงไม่มีสมบูรณ์ไปกว่านี้แล้ว

*** เปรียบเทียบจากความรู้ที่ผมมี หุ หุ

Date : 2010-01-28 11:51:34

By : DownsTream

No. 10

โปรแกรมเมอร์ขี้เหล้า

โพสกระทู้ ( 294 )
บทความ ( 0 )

ลิงค์เสียชีวิตแล้วครับขอใหม่หน่อยได้ปะ......รบกวนหน่อยคร้าบบบบบบบบบบบบบบบบบบบบบบบบ

เมล์ให้หน่อยก็ได้นะครับบบบบบบบบบบบบบบบ [email protected]

Date : 2010-05-18 13:30:38

By : sleepington

No. 11

ranarong

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

คลิกที่นี่

Date : 2010-05-18 15:27:23

By : DownsTream

No. 12

STUPID CODE

โพสกระทู้ ( 191 )
บทความ ( 0 )

แจ่มมากครับ

Date : 2010-11-11 17:19:38

By : noizeless

No. 13

STUPID CODE

โพสกระทู้ ( 191 )
บทความ ( 0 )

รบกวนเขียน แบบนี้ได้ไหมครับอยากทราบแนวทาง

eeeeeeeeeeeeeeeee

Date : 2010-11-11 17:22:14

By : noizeless

No. 14

Guest

สอบถามครับ โค๊ดตัวนี้ ลองไปใช้ กับ google Chrome แล้วมันแตก tree ไม่ได้ครับ แต่กับ IE และ firefox ใช้ได้ ไม่ทราบแก้ไขยังไง

Date : 2011-02-22 13:50:54

By : guestNO1

No. 15

Falcon

โพสกระทู้ ( 253 )
บทความ ( 0 )

สุดยอดเลยครับบบบบ

Date : 2011-02-22 17:48:02

By : zimmpooh

No. 16

ranarong

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

Quote:
สอบถามครับ โค๊ดตัวนี้ ลองไปใช้ กับ google Chrome แล้วมันแตก tree ไม่ได้ครับ แต่กับ IE และ firefox ใช้ได้ ไม่ทราบแก้ไขยังไง

ผมทดสอบกับ ทุก browser ใช้งานได้ปกติครับ

ตอนนี้ผมอัพเดท เป็น vesion ใหม่เขียนเป็น jquery plugin สามารถเพิ่ม level ได้ไม่จำกัด

โหลดไปทดสอบใช้งานได้ที่ multilevelTreemenu
mltm

ประวัติการแก้ไข
2011-02-22 19:29:30
2011-02-22 19:44:02
2011-02-22 21:25:10
2011-02-22 21:25:16
2011-02-22 21:38:42
2011-02-22 21:39:26

Date : 2011-02-22 19:29:06

By : Nautilus

No. 17

ranarong

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

Quote:
รบกวนเขียน แบบนี้ได้ไหมครับอยากทราบแนวทาง

อันนี้มัน navigator menu หนิครับ

Date : 2011-02-22 19:31:11

By : Nautilus

No. 18

KwAnG

โพสกระทู้ ( 21 )
บทความ ( 0 )

ขอมั้งนะ.....

Date : 2011-07-26 12:32:19

By : jojoku

No. 19

ranarong

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

Quote:
ขอมั้งนะ.....

ขออะไรเหรอครับ

Date : 2011-07-26 13:02:12

By : Nautilus

No. 20

Guest

สุดยอด

Date : 2011-10-12 00:16:40

By : dee

No. 21

Guest

ถ้าดึงข้อมูลจาก ดาต้าเบส ต้องเขียนไงครับ

Date : 2011-12-28 11:07:46

By : ฺฺBB

No. 22

big

โพสกระทู้ ( 89 )
บทความ ( 0 )

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

Date : 2012-02-22 11:44:46

By : bigbababa

ค้นหาข้อมูล

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

Re : jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

No. 10

No. 11

No. 12

No. 13

No. 14

No. 15

No. 16

No. 17

No. 18

No. 19

No. 20

No. 21

No. 22

ค้นหาข้อมูล

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

Notice

jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ