هذا هو البرنامج التعليمي حول كيفية إنشاء محض إسقاط المغلق أسفل القائمة دون استخدام جافا سكريبت. لقد لاحظت ذلك ، أن الناس غالبا ما تستخدم جافا سكريبت لتحقيق هذا التأثير. في الواقع ، هناك طريقة بسيطة للقيام بذلك فقط مع المغلق.

وهنا مثال

الخطوة الأولى : نقوم بإنشاء بنية الأساسية أتش تي أم أل.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <شعبة معرف = "رأس"> <h1> المطور ديموس الجنة </ H1> <ماي معرف = "القائمة"> <li> <span> الرئيسية </ تمتد> <ul> <li> <أ href = "#" > القائمة البند 1 </ أ> </ لى> <li> <أ href = "# عنصر القائمة"> 2 </ أ> </ لى> <li> <أ href = "# عنصر القائمة"> 3 </ أ> </ لى> </ ماي> </ لى> <li> <span> عنا </ تمتد> <ul> <li> <أ href = "# عنصر القائمة"> 1 </ أ> </ لى > <li> <أ href = "# عنصر القائمة"> 2 </ أ> </ لى> <li> <أ href = "# عنصر القائمة"> 3 </ أ> </ لى> </ ماي> < / لى> <li> <span> منتجات </ تمتد> <ul> <li> <أ href = "# عنصر القائمة"> 1 </ أ> </ لى> <li> <أ href = "#"> القائمة البند 2 </ أ> </ لى> <li> <أ href = "#"> القائمة البند 3 </ أ> </ لى> </ ماي> </ لى> </ ماي> <شعبة /> 

الخطوة الثانية : الآن نحن خلق السحر رمز المغلق

  ; padding : 0 ; } * {هامش : 0 ؛ الحشو : 0 ؛}

 هيئة {
 ; خلفية : # 222 ؛
 Arial, Helvetica, sans-serif ; الخط : 100 ٪ طبيعي ارييل ، هلفتيكا ، بلا الرقيق ؛
 }

 : #fff ; } H1 {لون : # الاتحاد الفرنسي ؛}

 # رأس {
 ; الطول : 120px ؛ الموقف : النسبية ؛
 ; خلفية : # 333 ؛
 }

 # {القائمة
 هامش : 0px ؛
 حشوة : 0px ؛
 الموقف : المطلق ؛
 ; الأعلى : 70px ؛
 يعرض : الكتلة ؛
 }

 # <القائمة لى {
 قائمة على النمط من نوع : لا شيء ؛
 تعويم : غادر ؛
 يعرض : الكتلة ؛
 ; الهامش : 10px 0px ؛
 الموقف : النسبية ؛
 حشوة : 10px ؛
 العرض : 100px ؛
 }

 ul { # القائمة> لي : ماي تحوم {
 يعرض : الكتلة ؛
 }

 { # <القائمة لى : {تحوم
 ; لون الخلفية : # 808080 ؛
 غادة عادل ، الحدود ، دائرة نصف قطرها : 10px ؛
 بكت ، الحدود ، دائرة نصف قطرها : 10px ؛
 }

 # القائمة لي ماي {
 هامش : 0px ؛
 حشوة : 0px ؛
 عرض : لا شيء ؛
 }
 # القائمة لى لى ماي {
 قائمة على النمط من نوع : لا شيء ؛
 ; الهامش : 10px 0 0 0 ؛
 حجم الخط : 11px ؛
 }

 # القائمة لى لى ماي {
 يعرض : الكتلة ؛
 ; حشوة : 10px 5px ؛
 ; لون : # الاتحاد الفرنسي ؛
 النصوص الديكور : لا شيء ؛
 الخط الوزن : جريئة ؛
 }

 a { # القائمة لى لى المقدس : {وتحوم
 ; لون الخلفية : # 606060 ؛
 غادة عادل ، الحدود ، دائرة نصف قطرها : 5px ؛
 بكت ، الحدود ، دائرة نصف قطرها : 5px ؛
 }

 # لى تمتد القائمة {
 المؤشر : نقطة ؛
 ; الهامش : 10px 0px ؛
 الخط الوزن : جريئة ؛
 ; font-size : 11px ; لون : # الاتحاد الفرنسي ؛ حجم الخط : 11px ؛
 } 

يرجى ملاحظة أن هذا الرمز لا يعمل في IE6 (هذا المتصفح الفقراء فقط لا أعرف ماذا يعني لي ماي>).

وسأكون ممتنا لو تفضلتم تأخذ ثانية للمساعدة في تعزيز بلدي بلوق وحصة هذا الارتباط مع أي من مواقع الشبكات الخاص يفضل استخدام الوصلة أدناه. وهنا لتصل إلى موقعنا المفضل إذا كنت ترغب في تسجيل أسماء النطاقات .

قدم تحت : المغلق ، دروس من قبل المشرف