إعلان أولا:
على الرغم من أنني عملت في الوضع الأمامي للويب لسنوات عديدة ، إلا أنه ليس لدي متطلبات تقنية عالية لهذا المنصب. يتم استخدام HTML و CSS في كثير من الأحيان ، وهناك عدد قليل جدًا من JavaScript الأصلي ، ويتم تعديلها بشكل أساسي. لذلك عندما أكتب حقًا ، وجدت أن الأساس لم يكن صلبًا ، وقد تعلمت وممارس ، واكتسبت الكثير.
صورة التكاثر:
لا مزيد من الهراء ، رمز البريد
1. رمز CSS
نسخة الكود كما يلي:
ج: الارتباط {اللون: أبيض ؛ تكرار النص: لا شيء ؛}
ج: زيارة {اللون: أبيض ؛ نصية نصية: لا شيء ؛}
ج: hover {color: White ؛ Text-Decorative: none ؛}
ج: نشط {اللون: أبيض ؛ النصوص النصية: لا شيء ؛}
li {float: left ؛ display: inline ؛ background-color:#003366 ؛ width: 120px ؛ text-align: center ؛ margin: 2px ؛ padding: 10px 0 5px 0 ؛ position: expers ؛}
.limouseover {خلفية اللون:#0033ff ؛ اللون: أحمر ؛}
.limouseout {خلفية اللون:#003366 ؛ اللون: أسود ؛}
li ul {display: none ؛ width: 120px ؛ الموضع: مطلق ؛ اليسار: 0 ؛ Top: 30px ؛}
li ul li {margin: 0px auto ؛ top-top: 1px solid #006699 ؛}
2. كود جافا سكريبت
نسخة الكود كما يلي:
<لغة البرنامج النصي = javaScript>
قائمة الوظائف (menu1) {
// انقل الماوس داخل وخارج ClassName تبديل وإخفاء وعرض التبديل.
if (document.getElementById (menu1)) {
var menu_ul = document.getElementById (menu1) ؛
if (menu_ul.getelementsbytagname ("li"). الطول) {
var menu_li = menu_ul.getElementsByTagName ("li") ؛
لـ (أنا في menu_li) {
menu_li [i] .onmouseover = function () {this.className = "limouseover" ؛ if (this.getElementsByTagName ("ul"
menu_li [i] .onmouseout = function () {this.className = "limouseout" ؛ if (this.getElementsByTagName ("ul"). length) {this.getElementsByTagName ("ul") [0]
}
}
}
}
</script>
3. كود HTML
نسخة الكود كما يلي:
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> menu 1 menu 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> menu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> menu 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> menu 2 </a> </li>
</ul>
</li>
</ul>
<script> var menu1 = قائمة جديدة ("menu1") ؛ </script>
يوضح:
1. بالنظر إلى أن صفحات UL و LI تستخدم في كثير من الأحيان ، يمكنك إضافة #Menu1 قبل CSS للحد من نطاق نمط القائمة.
2. يستمع JS بشكل أساسي إلى أحداث الحركة وإزالة الماوس ، ويتحول إلى أنماط Limouseover و Limouseout ؛ في الوقت نفسه ، يغير سمات العرض من القائمة الفرعية لتحقيق وظيفة عرض مخفي.
3. يمكن استدعاء نفس الصفحة مرارًا وتكرارًا دون صراع. رمز JavaScript في رمز HTML هو مثيل للاتصال. القائمة 1 في السابق هو اسم متغير تعسفي ، والقائمة 1 في الأقواس هي المعرف في صفحة HTML.
عيوب هذا المثال:
1.
2. نظرًا لأنه متوافق مع IE6 و IE7 ، الموضع: يتم استخدام المطلق ، ويتم إضافة السمات اليسرى والأعلى. يجب تعيين الجزء العلوي وفقًا للارتفاع الكلي للقائمة LI.