انسخ رمز الكود كما يلي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<أتش تي أم أل>
<الرأس>
<title>قائمة تلسكوبية</title>
<نمط>
<!--
جسم{
لون الخلفية:#ffdee0;
}
#ملاحة {
العرض: 200 بكسل؛
عائلة الخط: Arial؛
}
# الملاحة > أول {
نوع نمط القائمة: لا شيء؛/* لا تعرض الرموز النقطية*/
الهامش: 0 بكسل؛
الحشو: 0 بكسل؛
}
# الملاحة > أول > لي {
الحد السفلي: 1 بكسل صلب #ED9F9F;/* إضافة تسطير*/
}
# التنقل > أول > لي > أ{
عرض: كتلة؛/* عرض الكتلة */
الحشو: 5px 5px 5px 0.5em؛
زخرفة النص: لا شيء؛
border-left:12px Solid #711515;/* حد أحمر سميك على اليسار*/
الحدود اليمنى: 1 بكسل صلب #711515;/* الظل الأيمن*/
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
لون الخلفية:#c11136;
اللون: #FFFFFF؛
}
#navigation > ul > li > a:hover{ /* عند مرور الماوس */
لون الخلفية:#990020;/* تغيير لون الخلفية*/
اللون:#ffff00;/* تغيير لون النص*/
}
/* نمط CSS للقائمة الفرعية*/
# الملاحة ul li ul {
نوع نمط القائمة: لا شيء؛
الهامش: 0 بكسل؛
الحشو: 0px 0px 0px 0px؛
}
#الملاحة ul li ul li{
الحد العلوي: 1 بكسل صلب #ED9F9F؛
}
#الملاحة ul li ul li a{
عرض:كتلة؛
الحشو: 3px 3px 3px 0.5em؛
زخرفة النص: لا شيء؛
الحد الأيسر: 28 بكسل صلب #a71f1f؛
الحدود اليمنى: 1 بكسل صلب #711515؛
}
#الملاحة ul li ul li a:رابط، #الملاحة ul li ul li a:تمت الزيارة{
لون الخلفية:#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";
}
نافذة.onload = وظيفة () {
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes;//عناصر فرعية
فار الزراعة العضوية؛
for(var i=0;i<aLi.length;i++){
// إذا كان العنصر الفرعي هو li، وكان هذا li يحتوي على قائمة فرعية ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild;// ابحث عن الارتباط التشعبي
oA.onclick = Change;// إضافة وظيفة النقر ديناميكيًا
}
}
}
</script>
</الرأس>
<الجسم>
<div معرف = "الملاحة">
<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><a href="#">الرياضة</a>
<ul>
<li><a href="#">كرة السلة</a></li>
<li><a href="#">كرة القدم</a></li>
<li><a href="#">الكرة الطائرة</a></li>
</ul>
</لي>
<li><a href="#">الطقس</a>
<ul>
<li><a href="#">طقس اليوم</a></li>
<li><a href="#">التوقعات</a></li>
</ul>
</لي>
<li><a href="#">اتصل بي</a></li>
</ul>
</div>
</الجسم>
</html>