1. نظرة عامة
لا يمكن أن يؤدي استخدام قائمة العائمة المنبثقة إلى جعل محتوى التنقل في موقع الويب أكثر وضوحًا ، ولكن أيضًا لا يؤثر على التأثير الكلي للصفحة. قم بتشغيل هذا المثال ، كما هو موضح في الشكل 1 ، عندما ينتقل الماوس إلى عنوان قائمة التنقل من المستوى الأول ، ستظهر القائمة العائمة لعرض القائمة الفرعية المقابلة للقائمة. عندما ينتقل الماوس ، سيتم إخفاء القائمة العائمة.
2. النقاط الفنية
هذا المثال هو أساسا في جافا سكريبت ، وتغيير قيمة سمة العرض ديناميكيا لسمة النمط لكائن العلامة <div> لعرض قائمة التنقل الثانوية وإخفاءها ديناميكيًا. في الواقع ، تمت إضافة محتوى القائمة الثانوية تحت كل قائمة من المستوى الأول إلى علامة <viv> لصفحة الويب ، ولكن تم تعيين <viv> في هذا الوقت ولن يتم عرضه. لذلك ، في JavaScript ، عندما يمر الماوس عبر عنوان التنقل ، يحتاج فقط إلى استدعاء كائن <Div> المحدد وتعديل سمة العرض الخاصة به ديناميكيًا. تحتوي سمة العرض على قيمتين للسمات للعرض ومخفي ، وهما لا شيء (مخفي) وكتلة (عرض).
على سبيل المثال: هناك علامة <div> مع معرف MyDiv في صفحة الويب ، ويتم تعيين هذا <Div> على الاختباء. في JavaScript ، طريقة الكتابة للتحكم في عرض هذا <Div> كما يلي:
document.getElementById ("mydiv"). style.display = "block" ؛3. تنفيذ محدد
(1) اكتب طرق JavaScript للعرض والاختباء. سيتم عرض القائمة الثانوية عندما يمر الماوس عبر عنوان القائمة الأساسي ، وسيتم إخفاء القائمة الثانوية عندما ينتقل الماوس. رمز المفتاح كما يلي:
تغيير الوظيفة (img ، menu ، path ، type) {img.src = "images/"+path+". gif" ؛ if (submenu! = null) {if (type == 0) {submenu.style.display = "none"(2) في الصفحة ، أضف محتوى القائمة الثانوية إلى كل قائمة تنقل أساسية في علامة <div> مقدمًا ، وقم بتعيين علامة <Div> من القائمة الثانوية للاختباء. رمز المفتاح كما يلي:
<div id = "nuser" style = "background-color:#f3ffd5 ؛ الحدود:#75a102 1px صلبة ؛ العرض: 200px ؛ الموضع: المطلق ؛ العرض: لا شيء ؛ اليسار: 1px ؛ أعلى: 34px ؛ المعلومات </a> <a href = "#"> أضف موظفين جدد </a> </td> </tr> </table> </div> .../يتم حذف محتوى القوائم الثانوية الأخرى هنا
(3) قم بتعيين أحداث OnMouseover و OnMouseout في <td> من جدول القائمة الأساسية ، واتصل طريقة تغيير JavaScript () المحددة في الخطوة (1) ، وتغيير الشاشة وإخفاء القائمة الثانوية <Div>. رمز المفتاح كما يلي:
<td onMouseover = "Change (imguser ، nuser ، 'nuser_r' ، 1)" onMouseout = "Change (imguser ، nuser ، 'nuser_b' ، 0)" style = "cursor: hand ؛ تم حذفه </td>
ما سبق هو القائمة العائمة المنبثقة في شريط التنقل الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!