القائمة العمودية للموقع تم في شكل الأكورديون مع مسج

القائمة، كما تعلمون - جزءا لا يتجزأ من الموقع. الموارد التنقل مثيرة للاهتمام على الانترنت هو قادرة على زوار الفائدة. وبالإضافة إلى ذلك، خاصية هامة من أي القائمة - الاكتناز لها. ونتج عن القائمة العمودية بسيطة بسهولة باستخدام HTML و CSS. ولكن نذهب أبعد من ذلك: دعونا نتعلم لخلق القائمة- "الأكورديون" بمساعدة مسج.

إنشاء "الأكورديون" القائمة-

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

كود HTML

لذلك، لإنشاء القائمة العمودية لدينا، يجب عليك أولا طلب HTML رمز، والتي سوف تحتوي على النحو التالي:

حفظ هذا الرمز في ملف يسمى Accord_menu.html.

كما ترون، لقد قمنا بانشاء قائمة غير مرتبة. وهو يتألف من 3 نقاط رئيسية هي:

- صور،

- الأفلام.

- الكتب.

كل بند من بنود وفقرات قليلة. أين #، وسوف تحتاج إلى إضافة وصلات. من المهم الآن أن يصف النمط. كل هذا يتوقف على نظرة من الموارد الخاصة بك على الإنترنت. القائمة العمودية للموقع يجب دمج بانسجام في تصميمها.

CSS رمز

مع أنماط يجب أن لا يكون صعبا. ونلاحظ فقط أن في هذا المثال يستخدم تعبئة متدرجة. هنا هو رمز CSS:

يتم تحديد اللون في ملف CSS، تتم إزالة علامات حجم من العناصر في القائمة على اليسار. انها تحدد كيفية التصرف في كل بند وقائمة فرعية عند تمرير مؤشر الماوس فوقه. على سبيل المثال:

# e1fee2 - وهذا شاحب اللون الأخضر الفرعي.

# C4f0f7 -golubovaty الظل الفرعية عندما كنت تحوم فوقهم.

خاصية عرض نسأل قيمة كتلة لضبط الحشو وحجم اللازمة. اللون والحجم ونوع الخط والموقع - كل شيء كما وصف في ملف CSS. يطلق عليه، على سبيل المثال، accordionmenu_my1.css.

ربط التحسينات القائمة مسج

كما تذكرون، هدفنا - لخلق مسج القائمة العمودي. إذا كنت لم تكن مألوفة مع هذه التكنولوجيا، لا تقلق. نحن نستخدم مستودع Google والاتصال النصي مسج. وهذا سيجعل من القائمة أكثر جاذبية. مسج هي مكتبة جافا سكريبت على أساس تفاعل HTML توصيف النص التشعبي وجافا سكريبت. مسج يسمح لك للوصول إلى المحتوى وسمات من العناصر.

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

حفظ جميع التغييرات، ونرى ما يبدو في قائمة المتصفح. هذا هو نتيجة مشتركة من: ونتيجة لذلك، لقد وصلنا إلى القائمة الجذابة التي يمكنك تغيير دائما، اعتمادا على ما يفضلونه. واكتساب معارف جديدة في مجال مسج، CSS، سوف تقوم بإنشاء عناصر فريدة للموقع، وتحسين مهاراتهم.