العنصر nav

الكاتب: سامي -
العنصر <nav>
العنصر <nav>

يُمثِّل العنصر <nav> قسمًا من الصفحة غرضه هو توفير روابط للتنقل، سواءً كانت ضمن المستند نفسه أو إلى مستندات أخرى.

من أكثر الأمثلة شيوعًا هي القوائم وجداول المحتويات والفهارس.

في هذا المثال استخدمنا العنصر <nav> لاحتواء قائمة غير مرتبة <ul> من الروابط. يمكن عرض هذه القائمة كشريط جانبي أو شريط تنقل أو قائمة منسدلة باستخدام قواعد CSS الملائمة:

<nav>
  <ul>
     <li><a href="https://khamsat.com">خمسات</a></li>
    <li><a href="https://coreiten.com">الموسوعة التقنية</a></li>
    <li><a href="https://suar.me">صور</a></li>
  </ul>
</nav>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح محتوى تنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM HTMLElement

دعم المتصفحات

Chrome Firefox Edge Safari Opera
5 4 مدعوم 4.1 11.10

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

  • لا يُشترَط أن تكون جميع الروابط في المستند موجودةً ضمن عنصر <nav>، فالغرض منه هو احتواء الأقسام الرئيسية التي تحتوي روابط التنقل؛ فمثلًا العنصر <footer> يحتوي عادةً على قائمة بالروابط، وهذه القائمة لا يشترط أن تكون موجودةً ضمن عنصر <nav>.
  • قد يحتوي المستند على أكثر من عنصر <nav>، فمثلًا يمكن استخدام عنصر <nav> لإضافة روابط للتنقل في الموقع، وعنصر آخر للتنقل داخل الصفحة.
  • يمكن لبرمجيات قراءة الشاشة استخدام هذا العنصر لمعرفة أين يبدأ المحتوى الفعلي للصفحة.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <nav> مع ضبط الخاصية display إلى block:

nav {
  display: block;
}

 

شارك المقالة:
108 مشاهدة
المراجع +

هل أعجبك المقال
0
0

مواضيع ذات محتوي مطابق

مقالات عشوائية

تعلن Asus عن Chromebox 4 الجديد مع معالجات Intel من الجيل العاشر
يقوم تطبيق المراسلة هذا بتحميل كل ملف ترسله إلى الإنترنت وهو أمر سيء
إليك كيفية تشغيل أي تطبيق iOS تملكه على أجهزة M1 Mac الجديدة من Apple
تأخذ Microsoft Teams ميزة Zoom مع مكالمات فيديو مجانية طوال اليوم على الويب
تعمل Microsoft و Apple على دعم وحدة تحكم Xbox Series X لأجهزة iPhone و iPad
يلمح جيم رايان من سوني في منافس Xbox Game Pass لجهاز PS5
هل يمكن لجهاز الكمبيوتر الخاص بك تشغيل Cyberpunk 2077؟
يحتفظ أرشيف الإنترنت الآن بألعاب الفلاش والرسوم المتحركة
يُظهر تفكيك iFixit مدى تشابه أجهزة M1 MacBooks الجديدة
سيصل مساعد Google إلى أجهزة تلفزيون Samsung في 12 دولة بحلول نهاية العام
يكشف مطور Rocket League عن سبب عدم حصول PS5 على العديد من ألعاب 120 إطارًا في الثانية
يوضح أحدث تفكيك من iFixit مدى ضخامة كاميرا iPhone 12 Pro Max
كيفية إخفاء الصور والملفات على iPhone و iPad
كيفية رسم أشكال مثالية على iPhone و iPad
كيفية إضافة الأصدقاء في لعبة Pokémon Sword And Shield
التصنيفات تصفح المواضيع
youtubbe twitter linkden facebook