คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<หัว>
<title>เมนูแบบยืดหดได้</title>
<สไตล์>
-
ร่างกาย{
สีพื้นหลัง:#ffdee0;
-
#การนำทาง {
ความกว้าง:200px;
ตระกูลแบบอักษร: Arial;
-
#การนำทาง > ul {
list-style-type:none;/* ห้ามแสดงสัญลักษณ์แสดงหัวข้อย่อย*/
ระยะขอบ:0px;
ช่องว่างภายใน:0px;
-
#การนำทาง > ul > li {
ขอบล่าง:1px solid #ED9F9F;/* เพิ่มขีดเส้นใต้*/
-
#navigation > ul > li > a{
จอแสดงผล:บล็อก;/* บล็อกจอแสดงผล*/
การขยาย:5px 5px 5px 0.5em;
การตกแต่งข้อความ: ไม่มี;
border-left:12px solid #711515;/* ขอบสีแดงหนาด้านซ้าย*/
เส้นขอบขวา:1px solid #711515;/* เงาขวา*/
-
#navigation > ul > li > a:link, #navigation > ul > li > a:เยี่ยมชม{
สีพื้นหลัง:#c11136;
สี:#FFFFFF;
-
#navigation > ul > li > a:hover{ /* เมื่อเมาส์เลื่อนผ่าน */
สีพื้นหลัง:#990020;/* เปลี่ยนสีพื้นหลัง*/
color:#ffff00;/* เปลี่ยนสีข้อความ*/
-
/* รูปแบบ CSS สำหรับเมนูย่อย*/
#navigation อุล ลิ อุล{
รายการสไตล์ประเภท: ไม่มี;
ระยะขอบ:0px;
การขยาย:0px 0px 0px 0px;
-
#navigation อุล ลี อุล ลี{
ขอบบน:1px ทึบ #ED9F9F;
-
#navigation อุล ลิ อุล ลี อา{
จอแสดงผล: บล็อก;
การขยาย:3px 3px 3px 0.5em;
การตกแต่งข้อความ: ไม่มี;
ขอบซ้าย:28px ทึบ #a71f1f;
เส้นขอบขวา:1px ทึบ #711515;
-
#การนำทาง ul li ul li a:link, #การนำทาง ul li ul li a:visited{
สีพื้นหลัง:#e85070;
สี:#FFFFFF;
-
#การนำทาง ul li ul li a:hover{
สีพื้นหลัง:#c2425d;
สี:#ffff00;
-
#navigation ul li ul.myHide{ /* ซ่อนเมนูย่อย*/
จอแสดงผล:ไม่มี;
-
#navigation ul li ul.myShow{ /* แสดงเมนูย่อย*/
จอแสดงผล: บล็อก;
-
-
</สไตล์>
<ภาษาสคริปต์ = "จาวาสคริปต์">
การเปลี่ยนแปลงฟังก์ชั่น () {
// ค้นหาองค์ประกอบพี่น้อง ul ผ่านองค์ประกอบหลัก li
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS ถูกแทนที่สลับกันเพื่อให้เกิดการแสดงผลและการปกปิด
ถ้า(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
อื่น
oSecondDiv.className = "myHide";
-
window.onload = ฟังก์ชั่น () {
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//องค์ประกอบลูก
var oA;
สำหรับ(var i=0;i<aLi.length;i++){
//หากองค์ประกอบลูกคือ li และ li นี้มีเมนูย่อย ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").ความยาว){
oA = aLi[i].firstChild;//ค้นหาไฮเปอร์ลิงก์
oA.onclick = change;//เพิ่มฟังก์ชันการคลิกแบบไดนามิก
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="การนำทาง">
<ul id="listUL">
<li><a href="#">บ้าน</a></li>
<li><a href="#">ข่าว</a>
<ul>
<li><a href="#">ข่าวล่าสุด</a></li>
<li><a href="#">ข่าวทั้งหมด</a></li>
</ul>
</li>
<li><a href="#">กีฬา</a>
<ul>
<li><a href="#">บาสเกตบอล</a></li>
<li><a href="#">ฟุตบอล</a></li>
<li><a href="#">วอลเลย์บอล</a></li>
</ul>
</li>
<li><a href="#">สภาพอากาศ</a>
<ul>
<li><a href="#">สภาพอากาศวันนี้</a></li>
<li><a href="#">พยากรณ์</a></li>
</ul>
</li>
<li><a href="#">ติดต่อฉัน</a></li>
</ul>
</div>
</ร่างกาย>
</html>