Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

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



 

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

 



Topic : 037828



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook



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

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
tree-menu



Tag : - - - -







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2010-01-27 17:20:19 By : DownsTream View : 13413 Reply : 22
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


สวยดีลูกพี่






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


 

No. 2



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


หุหุหุ คนนี้มาตอบทีมีของมาฝากด้วยชอบจริงๆ
Date : 2010-01-27 18:31:26 By : somparn
 

 

No. 3



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

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

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

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

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

ยิงปืนนัดเดียวได้นกหลายตัว
Date : 2010-01-27 18:40:41 By : DownsTream
 


 

No. 4



โพสกระทู้ ( 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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ถูกใจมากเลยครับกำลังศึกษาอยู่เลยครับ ขอบคุณมากนะครับ
Date : 2010-01-27 21:50:48 By : eakalak28
 


 

No. 6



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

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

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

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

ยังไม่อณุญาต เลย แต่นำไปใช้ แล้ว เอิ๊กๆๆๆ
Date : 2010-01-27 22:38:55 By : DownsTream
 


 

No. 7



โพสกระทู้ ( 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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

สุดยอดกว่าเดิม ทีนี้นำไปประยุกแบบ หลายๆ 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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

คลิกที่นี่
Date : 2010-05-18 15:27:23 By : DownsTream
 


 

No. 12



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



สถานะออฟไลน์


แจ่มมากครับ
Date : 2010-11-11 17:19:38 By : noizeless
 


 

No. 13



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



สถานะออฟไลน์


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



eeeeeeeeeeeeeeeee



tttttttttttttttttttttttttttttt
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



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



สถานะออฟไลน์


สุดยอดเลยครับบบบบ
Date : 2011-02-22 17:48:02 By : zimmpooh
 


 

No. 16



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

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


อันนี้มัน navigator menu หนิครับ
Date : 2011-02-22 19:31:11 By : Nautilus
 


 

No. 18



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



สถานะออฟไลน์


ขอมั้งนะ.....
Date : 2011-07-26 12:32:19 By : jojoku
 


 

No. 19



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

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



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์


ขอบคุณมากครับ
Date : 2012-02-22 11:44:46 By : bigbababa
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : jquery tree menu css slide-up-down เอามาแจก ได้แล้วครับมีคนมาเขียนไว้ให้แล้ว ทีนี้ก็นำไปใช้ได้เลยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







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

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่