Bloggang.com : weblog for you and your gang
โค้ดทำลิ้งเมนู 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 : 1628 Pageviews.
Share
Tweet
ได้ความรู้มากเลยค่ะ
ขออนุญาตลองเอาไปใช้ดูนะคะ
อาจต้องคลำนานนิดนึง เพราะโค้ดยาวมากค่ะ อิอิ
ขอบคุณมากๆ นะคะ
ถ้าไงก้อแวะไปเที่ยวที่บล๊อกปอมั่งนะคะ
จะดีใจมากๆ และยินดีต้อนรับเสมอค่ะ...งุงิ
โดย: ใบปอ (
Butterflyblog
) วันที่: 24 พฤษภาคม 2551 เวลา:17:16:57 น.
สวัสดีฮ่ะ
อยากถามเกี่ยวกับลิงเมนูย่อยอ่ะคราฟ
ทำไงอ่ะคราฟ
ตอนนี้ทำเวบในดรีมอยู่อะ
โดย: pang (
idear_j
) วันที่: 16 พฤศจิกายน 2552 เวลา:23:05:28 น.
ชื่อ :
* blog นี้ comment ได้เฉพาะสมาชิก
Comment :
*ส่วน comment ไม่สามารถใช้ javascript และ style sheet
ผู้หญิงขี้รำคาญ
Location :
[ดู Profile ทั้งหมด]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 2 คน [
?
]
/--โค้ด BG--> /--ลบกรอบ--> /--นับคอมเม้น> /รูปกล่องคอมเม้น> /--เปลี่ยนรูป Bullet> /--เปลี่ยน submit and reset>
/--Emotion>
Please do not change this code for a perfect fonctionality of your counter
counter widget
Group Blog
GuestBook
Cat Story
Love Story
ห้องนั่งเล่น
Forword Mail
ห้อง(ลับ)
ของแต่งบล็อก(1)
ธีมสำเร็จรูป
Glitters
โค้ดต่่างๆ
ของแต่งบล็อก(2)
ตุ๊กตาแต่งบล็อก
ภาพแต่งบล็อก
นาฬิกา&ปฎิทิน
โปรแกรม&เทคนิค
กรอบแต่งบล็อก
ถาม-ตอบ
เที่ยวตะรุเตา-อาดัง-ราวี
ภาพแต่งหัวบล็อก
เทคนิคการเขียนบล็อก
โค้ด Emotion
Tag...Tag
พฤษภาคม 2551
>>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
16 พฤษภาคม 2551
โค้ดทำลิ้งเมนู Site Map
All Blogs
เทคนิคเล็กๆ น้อยของโค้ด html
มาทำ Icon แสดงสถานะของ MSN
โค้ดลบกรอบ+ข้อความเลื่อนขึ้น
วิธีใส่แบล็คกราวด์สองชั้นค่ะ
สร้างกรอบรูปสวยๆ ด้วยตัวคุณเอง
โค้ดทำลิ้งเมนู Site Map
โค้ดนาฬิกาดิจิตอลวิ่งตามเม้าค่ะ
แจกโค้ดทำตัวหนังสือร่วงหน้าเว็บค่ะ
code สถานีวิทยุและสถานีโทรทัศบนเว็บค่ะ
รวมโค้ดอักษรเลื่อน
Friends' blogs
kun_isara
ชมพร
พรหมญาณี
mastana
winggy
Webmaster - BlogGang
[Add ผู้หญิงขี้รำคาญ's blog to your web]
Links
ซ้อ 7
ีUpload file
Uplode Flash
BlogGang.com
MY VIP Friend
Pantip.com
|
PantipMarket.com
|
Pantown.com
| © 2004
BlogGang.com
allrights reserved.
ขออนุญาตลองเอาไปใช้ดูนะคะ
อาจต้องคลำนานนิดนึง เพราะโค้ดยาวมากค่ะ อิอิ
ขอบคุณมากๆ นะคะ
ถ้าไงก้อแวะไปเที่ยวที่บล๊อกปอมั่งนะคะ
จะดีใจมากๆ และยินดีต้อนรับเสมอค่ะ...งุงิ