قائمة منسدلة
نقدم لكم اليوم قائمة افقية علوية منسدلة meun horizontal بمدونة بلوجر او الى اي موقع اخر ، هذه القائمة التي سنعرضها اليوم هي قائمة عادية بسيطة ولكن أدخلنا بعض التحسينات على طريقة عرضها ، لتصبح اكثر روعة وجمال من الطريفة الكلاسيكية العادية :شاهد الفيديو ادناه
طريقة التركيب:
اولا: في منطقة البدي نضع الكود المعرف للقائمة المنسدلة وهو كتالي :
ثانيا: بعد ان عرفنا القائمة مع ملاحظة ان التسميات هذه شائعة لذلك وضعتها وممكن لك اختيار اي تسميات تريد ،نبدأ بتوضيح القائمة من خلال css حيث سنقوم بتحديد الالوان والشكل والعرض والطول وكيفية العرض ، اليك كود css الخاص بذلك ،حيث يوضع هذا الكود في منطقة الهيد مع اضافة استايل ليصبح الكود:
هذه مجموعة الكود لتعريف القائمة بشكل عام .
ثالثا:تعريف شكل القائمة عند الضغط عليها:
رابعا : الان ناتي الى الجزء المهم وهو تعريف شكل القائمة النهائي وطريقة عرضها غير الكلاسيكي، في البداية نعطي اسم محدد للقوائم الفرعية المنسدلة وهنا اعطيت اسم n5 to n1 للقوائم الفرعية . الان نحدد كل تسمية ماهو المطلوب منها ان تفعلة وقد حددت ان تقوم بالظهور من الاسفل الى الاعلى بترتيب منسق حيث ستعطي شكل رائع للقائمة المنسدلة . ليصبح الكود بالشكل التالي:
في الصورة حددنا طريقة العرض والوقت المستغرق بالعرض ومتى يبدأ ومتى ينتهي كل عنصر في القائمة المنسدلة، وقد حددنا اجزاء من الثانية حتى لايستغرق ذلك وقت كبير حفاظا على وقت المستخدم .وتم تسمية العرض ب mymove.
خامسا: الان يجب استدعاء الكود في الصورة اعلاة الى العمل عند الضغط على العنصر الاول في القائمة الذي يحتوي على قائمة منسدلة مع تحديد لطريقة عرض العناصر وهو الجزء الاهم :
*انتهى، ضع كل الكود المتعلق ب css في ملف منفصل او داخل الملف البرمجي نفسه وهذا ما استخدمتة ، ضع الكود css في منطقة الهيد ويكون مبدوء ب <style type="text/css"> ومنهي ب <style/>.
لتصبح النتيجة النهائية كما في الفيديو اعلاه . في الدرس القادم انشاء الله سنقوم باضافة طرق جديدة لعرض القائمة . والى ذلك الوقت نستودعكم الله ، ولا تنسونا من دعائكم.
ليست هناك تعليقات:
إرسال تعليق