Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > ผมได้ลองทำเมนูด้านข้างแบบ tree view แล้ว แต่ว่าหากจะเปลี่ยนให้ตอนแรก เมนูมันเป็นแบบไม่หุบจะได้ไหมครับ (โทษทีครับใช้คำพูดไม่ถูก รายละเอียดอยู่ด้านใน)

ผมได้ลองทำเมนูด้านข้างแบบ tree view แล้ว แต่ว่าหากจะเปลี่ยนให้ตอนแรก เมนูมันเป็นแบบไม่หุบจะได้ไหมครับ (โทษทีครับใช้คำพูดไม่ถูก รายละเอียดอยู่ด้านใน)

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

pantatonic

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

คือว่าผมได้ลองทำดูมันออกมาเป็นแบบนี้(หมายถึงตอนเรียกเว็บเข้ามา)

TreeView 1

แต่ถ้าหากผมอยากเปลี่ยนให้เมนู มันแสดงส่วนที่เป็น tree อยู่ด้านในตั้งแต่แรกตอนที่เรียกหน้าเว็บโดยไม่ต้องมากดให้มันยืดออก
แบบรูปนี้

TreeView 2

มันจะได้ไหมครับ
ส่วนด้านล่างเป็น Code ครับ

PHP CODE
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>
function toggle(id,p){ 
var myChild = document.getElementById(id);
if(myChild.style.display!='block'){
myChild.style.display='block';
document.getElementById(p).className='folderOpen';
}else{
myChild.style.display='none';document.getElementById(p).className='folder';
}} 
</script>
<style>
ul.tree {
display:none;margin-left:10px;
}
li.folder {
list-style-image: url(images/tree_view/plus1.gif);
}
li.folderOpen {
list-style-image: url(images/tree_view/minus1.gif);
}
li.file {
list-style-image: url(images/tree_view/dot1.gif);
}
a.treeview {
font-family:tahoma;
font-size:11px;
}
a.treeview:link {
text-decoration:none;
color: #000000;
}
a.treeview:visited {
text-decoration:none;
color: #000000;
}
a.treeview:hover {
text-decoration:none;
color: #FF0000;
}
</style>
</head>

<body>
<p><font size="2">
</font><h1 align="center">ทดสอบ เมนู</h1></p>
<p>&nbsp;</p>
<font size="2">
<table width="800" height="548" border="1" cellpadding="20" cellspacing="0" align="center">
  <tr>
    <th height="98" colspan="2" scope="col">Header</th>
  </tr>
  <tr>
    <td width="134" height="353" align="left" valign="top" style="margin-left:10px" scope="row"><p><font size="2" ><div align="center"><b>Side menu</b></div></font></p>
      <hr />
      <br />
      <font color="blue">หมวด 1</font>
<ul xstyle='margin-left:20px;' id='N00'>
<li  class="folder" id="P00"></li>
  <a class="treeview" href="javascript:toggle('N0_0','P00')"><strong>รายการ1</strong></a>
  <ul class=tree id="N0_0">
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="images/bg/bg_login2.jpg" target="_self"  title="">ย่อย1-1</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-2</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-3</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-4</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-5</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-6</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-7</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-8</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-9</a></li>
    <li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย1-10</a></li>
  </ul>
</li>
</ul>
<font color="blue">หมวด 2</font>
<ul xstyle='margin-left:20px;' id='N01'>
<li  class="folder" id="P01">
<a class="treeview" href="javascript:toggle('N0_1','P01')"><strong>รายการ2</strong></a>
<ul class=tree id="N0_1">
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย2-1</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย2-2</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย2-3</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย2-4</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย2-5</a></li>
</ul>
</li>
</ul>
<font color="blue">หมวด 3</font>
<ul xstyle='margin-left:20px;' id='N02'>
<li  class="folder" id="P02">
<a class="treeview" href="javascript:toggle('N0_2','P02')"><strong>รายการ3</strong></a>
<ul class=tree id="N0_2">
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย3-1</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย3-2</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย3-3</a></li>
</ul>
</li>
</ul>
<font color="blue">หมวด 4</font>
<ul xstyle='margin-left:20px;' id='N03'>
<li  class="folder" id="P03">
<a class="treeview" href="javascript:toggle('N0_3','P03')"><strong>รายการ4</strong></a>
<ul class=tree id="N0_3">
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย4-1</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย4-2</a></li>
<li style='list-style-image: url(images/tree_view/dot1.gif);' class="file"><a class="treeview" href="#" target="_self"  title="">ย่อย4-3</a></li>
</ul>
</li>
</ul>

</ul></th>
    <td width="660" align="center">Content</td>
  </tr>
  <tr>
    <th height="95" colspan="2" scope="row">Footer</th>
  </tr>
</table>
</font>
</body>
</html>

Tag : PHP

Date : 2011-12-08 13:44:44

By : pantatonic

View : 1991

Reply : 1

No. 1

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

ul.tree {
~~display:none;~~margin-left:10px;
}

เอาแค่ตัวที่ผมขีดฆ่าออก ก็น่าจะแสดงแล้วนะ

Date : 2011-12-08 14:22:32

By : deawx

ค้นหาข้อมูล

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

Re : ผมได้ลองทำเมนูด้านข้างแบบ tree view แล้ว แต่ว่าหากจะเปลี่ยนให้ตอนแรก เมนูมันเป็นแบบไม่หุบจะได้ไหมครับ (โทษทีครับใช้คำพูดไม่ถูก รายละเอียดอยู่ด้านใน)

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

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

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

Load balance : Server 01

Registered : 109,038

No. 1

ค้นหาข้อมูล

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

Notice