سيشرح هذا البرنامج التعليمي خطوة بخطوة كيفية استخدام JQuery و CSS لإنشاء قائمة ديناميكية رائعة. ميزة "اكتب أقل، افعل المزيد" في jQuery معروفة للجميع، حتى الأشخاص الذين ليس لديهم خبرة واسعة في برمجة JS يمكنهم تعلم كيفية استخدامها بسرعة من خلال واجهة برمجة التطبيقات التي يوفرها يمكنك فهم مبادئ التنفيذ لكل وظيفة رئيسية في jQuery. دعونا لا نتحدث عن أشياء أخرى. دعنا نرى فقط كيفية استخدامها لتحقيق التأثير السحري للقائمة.
.jpg)
يمكنك النقر لعرض العرض التوضيحي أو تنزيل الكود المصدري .
الخطوة 1 - هيكل HTML
ألقِ نظرة على رمز HTML الخاص بالقائمة، وهو لا يختلف عن رمز القائمة العادي:
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">الصفحة الرئيسية</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">جافا سكريبت</a></li>
<li><a href="javascript:;">الموارد</a></li>
<li><a href="javascript:;">البرامج التعليمية</a></li>
<li><a href="javascript:;">حول</a></li>
</ul>
</div>
المفتاح هو استخدام البرامج النصية لإنشاء عدة طبقات منفصلة في كل نقطة ربط (عنصر)، بحيث يمكن التحكم فيها لتحريكها بشكل منفصل عند تحريك الماوس. للقيام بذلك، نحتاج إلى تعديل بنية DOM عند تحميل DOM بحيث يصبح كل كود ربط على النحو التالي:
<a href="javascript:;">
<span class="out">الصفحة الرئيسية</span>
<span class="bg"></span>
<span class="over">الصفحة الرئيسية</span>
</أ>
سيتم إلحاق المحتوى الموجود في كل نقطة ربط أصلية بعنصري الامتداد (.out و.over)، وعنصر الامتداد الآخر (.bg) هو طبقة صورة الخلفية.
أما بالنسبة لكيفية تعديل بنية DOM، فسيتم شرح كود JS في الخطوة 3.
الخطوة 2 - أسلوب CSS
في المثال، يتم عرض نمطين، أحدهما مع صورة خلفية والآخر بدون صورة خلفية (راجع العرض التوضيحي للحصول على التفاصيل). :
/* ما يلي هو النمط الأساسي للقائمة
*/.menuulli{
تعويم: يسار؛
/* محتوى العنصر الفرعي للقائمة خارج نطاق الرؤية */
الفائض: مخفي؛
/* تم حذف بعض الرموز أدناه*/
}
.القائمة ul لي أ {
/* يجب أن يكون موضعًا نسبيًا */
الموقف: نسبي؛
عرض: كتلة؛
العرض: 110 بكسل؛
/* تم حذف بعض الرموز أدناه*/
}
.menu ul li aspan {
/* ستستخدم جميع الطبقات الموضع المطلق */
الموقف: مطلق؛
اليسار: 0؛
العرض: 110 بكسل؛
}
.menu ul li aspan.out {
أعلى: 0 بكسل؛
}
.menu ul li aspan.over،.menu ul li aspan.bg {
/* في البداية، يكون حجم الطبقة .over وطبقة .bg -45 بكسل بالنسبة للعنصر a لتحقيق التأثير المخفي*/
الأعلى: -45 بكسل؛}/
*ما يلي هو مثال لاستخدام صورة الخلفية*/
#قائمة طعام {
/*خلفية القائمة*/
الخلفية: url(bg_menu.gif) التمرير 0 -1px تكرار-x؛
الحدود: 1 بكسل الصلبة #CCC؛}
#القائمة ul li a {
اللون: #000؛
}
#menu ul li aspan.over {
اللون: #FFF؛
}
#القائمة ul lispan.bg {
/* تحديد الارتفاع وصورة الخلفية*/
الارتفاع: 45 بكسل؛
الخلفية: url(bg_over.gif) مركز المركز بدون تكرار؛
}
يمكنك أيضًا تخصيص نمط CSS بنفسك، كما يتم توفير نسخة مبسطة من النمط هنا ( عرض العرض التوضيحي )