Bloggang.com : ผู้หญิงขี้รำคาญ : โค้ดทำลิ้งเมนู Site Map

โค้ดทำลิ้งเมนู Site Map

สวัสดีค่ะ วันนี้เอาวิธีทำเมนูสไลด์แบบ Site map มาฝากค่ะ แบบที่เห็นอยู่ด้านขวามือนะค่ะ เพราะมีปัญหาเวลาที่เข้าหน้าเวบของตัวเอง คลิกที่กรุ๊บบล็อกแล้ว มันจะโหลดหน้าเว็บรวมทุกบล็อกในกรุ๊บนั้น ทำให้โหลดหน้าเวบช้ามาก เมนูนี้จะช่วยในการเข้าถึงบล็อกต่างๆ ได้ง่ายขึ้น วิธีทำก็ไม่ยากเท่าไหร่ลองเอาไปทำดูค่ะ

<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 (…//..url รูปไอคอน...);
}
li.folderOpen {
list-style-image: url (…//..url รูปไอคอน...);
}
li.file {
list-style-image: url (…//..url รูปไอคอน...);
}
a.treeview {
font-family:cordia new;
font-size:18px;
}
a.treeview:link {
text-decoration:none;
color: #990000;
}
a.treeview:visited {
text-decoration:none;
color: #990000;
}
a.treeview:hover {
text-decoration:none;
color: #006600;
}
</style>
</head>

<body>
<ul xstyle='margin-left:20px;' id='N0'>
<li class="file" id="P00"> (อันนี้เป็นกรุ๊บบล็อกที่ 1 กรณีที่ไม่มีเมนูย่อย)
<a class="treeview" href=" (…ลิ้งของกรุ๊ปบล็อคที่ 1...)" target="_self" title=""><strong> (...ชื่อของกรุ๊ปบล็อกที่จะแสดง......)</strong></a></li>

<li class="folder" id=" P01"> (อันนี้เป็นกรุ๊ปบล็อกที่ 2 กรณีมีเมนูย่อย)
<a class="treeview" href="javascript:toggle (N0_1','(P01')"><strong>((...ชื่อของกรุ๊ปบล็อกที่จะแสดง......))</strong></a>

<ul class=tree id="(N0_1">

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="(…ลิ้งของบล็อคที่ 1 ในกรุ๊ปนี้... " target="_self" title="">(..ชื่อของบล็อกที่ 1 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 2 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 2 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 3 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 3 ในกรุ๊ปนี้.... </a></li>
</ul></li>

<li class="folder" id="P02"> (อันนี้เป็นกรุ๊ปบล็อกที่ 3 ตัวเลขจะเพิ่มขึ้นตามจำนวนของกรุ๊บบล็อกนะค่ะ)
<a class="treeview" href="javascript:toggle('N0_2','P02')"><strong>...ชื่อของกรุ๊ปบล็อกที่จะแสดง...... </strong></a>

<ul class=tree id="N0_2">

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="(…ลิ้งของบล็อคที่ 1 ในกรุ๊ปนี้... " target="_self" title="">(..ชื่อของบล็อกที่ 1 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 2 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 2 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 3 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 3 ในกรุ๊ปนี้.... </a></li>
</ul> </li>

</ul>
</body>
</html>

ตัวหนังสือสีแดงแก้ไขได้ค่ะ
ตัวหนังสือสีน้ำเงินอย่าลืมลบนะค่ะ
ต้องการทำเมนูของกรุ๊บบล็อกกี่อันก็ใช้ โค้ดนี้ ไปปรับแก้เอานะค่ะ
<li class="folder" id=" P01">
<a class="treeview" href="javascript:toggle (N0_1','(P01')"><strong>((...ชื่อของกรุ๊ปบล็อกที่จะแสดง......))</strong></a>

<ul class=tree id="(N0_1">

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="(…ลิ้งของบล็อคที่ 1 ในกรุ๊ปนี้... " target="_self" title="">(..ชื่อของบล็อกที่ 1 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 2 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 2 ในกรุ๊ปนี้.... </a></li>

<li style='list-style-image: url(…// รูปไอคอนของเมนูย่อยค่ะ...);' class="file"><a class="treeview" href="…ลิ้งของบล็อคที่ 3 ในกรุ๊ปนี้... " target="_self" title="">..ชื่อของบล็อกที่ 3 ในกรุ๊ปนี้.... </a></li>
</ul></li>

Create Date : 16 พฤษภาคม 2551

Last Update : 16 พฤษภาคม 2551 15:25:28 น.

2 comments

Counter : 1784 Pageviews.

ได้ความรู้มากเลยค่ะ
ขออนุญาตลองเอาไปใช้ดูนะคะ
อาจต้องคลำนานนิดนึง เพราะโค้ดยาวมากค่ะ อิอิ

ขอบคุณมากๆ นะคะ

ถ้าไงก้อแวะไปเที่ยวที่บล๊อกปอมั่งนะคะ
จะดีใจมากๆ และยินดีต้อนรับเสมอค่ะ...งุงิ

โดย: ใบปอ (Butterflyblog

) วันที่: 24 พฤษภาคม 2551 เวลา:17:16:57 น.

สวัสดีฮ่ะ
อยากถามเกี่ยวกับลิงเมนูย่อยอ่ะคราฟ
ทำไงอ่ะคราฟ

ตอนนี้ทำเวบในดรีมอยู่อะ

โดย: pang (idear_j

) วันที่: 16 พฤศจิกายน 2552 เวลา:23:05:28 น.