هذه قائمة بسيطة جدًا، على الرغم من بساطتها، إلا أنه يمكننا تعلم بعض المعرفة ذات الصلة حول CSS وJavaScripts من هذا المثال، وهو أمر ذو فائدة كبيرة في فهم مبادئ وأساسيات إنشاء القوائم المنسدلة. في هذا المثال، استخدمت علامة DIV كعمود القائمة المنسدلة، وTABLE كرأس القائمة. المبدأ هو تبديل سمات العرض لعمود القائمة المنسدلة عن طريق تحديد حركات الماوس.
فيما يلي تأثير قائمة DIV هذه. يمكنك النقر فوق أي مساحة فارغة في الصفحة لإلغاء عرض القائمة المنسدلة.
موقع مجلة التكنولوجيا موقع البوابة موقع المجموعة الشخصية
نعمسكي.كوم
معلومات تاجر الكمبيوتر
الالكترونيات العصرية
سينا
سوهو سوهو
نيتياس نيتياس
محطة برمجة شبكة الفأرة
سجل زميل الصينية
حسنًا،
شبكة تطوير البرمجيات الصينية
، إذا أخبرتك أن مثل هذا التأثير لن يستغرق سوى عشرات الأسطر من التعليمات البرمجية، هل ستصدق ذلك؟على أية حال، دعونا نتعلم كيفية عمل هذه القائمة خطوة بخطوة. خطوة بخطوة، هيا بنا.
الخطوة الأولى هي تحديد أوراق أنماط CSS المتتالية لعناصر القائمة وأعمدة القائمة هنا، إذا كنت لا تعرف معنى CSS، فيرجى الرجوع إلى البرنامج التعليمي الخاص بـ CSS في "موقع أخبار الكمبيوتر". نحدد فئتين من CSS، أحدهما Meun والآخر هو SubMenu. تحدد القائمة النمط المعروض في الجزء العلوي من القائمة، وتحدد القائمة الفرعية نمط العرض لعمود القائمة المنسدلة. ما يجب ملاحظته هنا هو سمة CSS "position:absolute;width:200" في القائمة الفرعية، وهذا ضروري لأنه يحدد الموضع الذي نعرض فيه القائمة الفرعية. خصائص CSS الأخرى اختيارية. فيما يلي وصف هاتين الفئتين من CSS. يمكنك وضع الفقرة التالية بين
<النمط>
في الخطوة الثانية، دعونا نلقي نظرة على كود Javascript لإخفاء وإظهار أعمدة القائمة المنسدلة. هذا الرمز بسيط جدًا ويجب أن يكون سهل الفهم لأي شخص تعلم القليل من JavaScripts. إذا كنت لا تفهم جافا سكريبت، يرجى أيضًا الرجوع إلى المقالات حول جافا سكريبت على "موقع أخبار الكمبيوتر". معنى هذا الكود هو أنه عندما يدخل الفأر إلى عنصر القائمة (Menu)، سيتم عرض عمود القائمة المنسدلة الخاص به بواسطة وظيفة تسمى Show. تتمثل الوظيفة الرئيسية لوظيفة العرض هذه في عرض عمود القائمة المنسدلة الحالي وإخفاء أعمدة القائمة الأخرى ووضع عنصر القائمة المعروض حاليًا في المتغير cm. بالإضافة إلى ذلك، أضفت هنا أيضًا معالجًا بسيطًا لحدث النقر بالماوس (onclick). عندما ينقر الماوس على صفحة الويب، سيتم إخفاء جميع أعمدة القائمة المنسدلة. أدناه، أقدم برنامج Javascript بالكامل، والذي يتضمن وظيفة تسمى getPos، والتي تُستخدم للحصول على موضع العرض لعمود القائمة المنسدلة.
<النص>
varcm=null;
document.onclick = وظيفة جديدة("show(null)")
الدالة getPos(el,sProp)
{فار آي بوس = 0
بينما (ش!=فارغة)
{iPos+=el["إزاحة" + sProp]
إل = el.offsetParent}
إرجاع أجهزة iPos}
عرض الدالة (el,m)
{إذا (م) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
إذا ((م!=سم) && (سم)) cm.style.display='none' cm=m }