كيفية عمل قائمة عمودية لموقع ويب

جدول المحتويات:

كيفية عمل قائمة عمودية لموقع ويب
كيفية عمل قائمة عمودية لموقع ويب

فيديو: كيفية عمل قائمة عمودية لموقع ويب

فيديو: كيفية عمل قائمة عمودية لموقع ويب
فيديو: تصميم قائمة منسدلة بسهوله وبشكل احترافي How to create Dropdown Menu/Navigation HTML / CSS 2024, ديسمبر
Anonim

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

كيفية عمل قائمة عمودية لموقع ويب
كيفية عمل قائمة عمودية لموقع ويب

تعليمات

الخطوة 1

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

الخطوة 2

اضبط الخط واللون في القائمة باستخدام علامة التبويب المعلمات. يمكنك تحديد خط وحجمه في حقل الخط. إذا لزم الأمر ، حدد تسطير / غامق. عيّن الخلفية (الخلفية) للقائمة العمودية في حقل الألوان ، واضبط لون الخط ولون الخلفية عند التمرير (fonthover / الخلفية)

الخطوه 3

اذهب إلى قائمة العناصر لإدارة عناصر القائمة. سيؤدي النقر فوق الزر مسح إلى مسح عناصر العينة بحيث يمكنك إنشاء العناصر الخاصة بك. يكفي النقر فوق مفتاح AddItem plus لإضافة عنصر إلى نهاية القائمة. باستخدام الزر AddNextItem ، يمكنك إضافة عنصر سيتبع بعد الوقت المحدد حاليًا. يقوم الزر AddSubitem في القائمة بإنشاء عنصر متداخل للعنصر المحدد. لإزالة خط ، استخدم الزر RemoveItem.

الخطوة 4

افتح معلمات العنصر (ItemParameters) في أسفل الموقع. أدخل اسمًا لعنصر القائمة في سطر النص وعنوان الويب الخاص به في الرابط. سطر التلميح مسؤول عن وصف العنصر ، والذي يظهر عندما يحوم المؤشر فوق الارتباط. يحدد قسم الهدف كيفية فتح الصفحة. باستخدام المعلمة _self ، يمكن تكوين الصفحة لتفتح في نافذة المتصفح الحالية.

الخطوة الخامسة

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

موصى به: