أساسيات إطار عمل Foundation: مُكوّنات التنقّل

يُعتبر إطار عمل Foundation واحداً من أبرز أُطُر العمل المستخدمة في تطوير وتصميم واجهات المواقع الإلكترونية وتطبيقات الويب، حيث يزود المطورين بمجموعة متكاملة من الأدوات والمكونات التي تسهل بناء واجهات متجاوبة وسريعة التكيف مع مختلف الأجهزة. من بين هذه المكونات التي حظيت باهتمام كبير في تصميم واجهات الاستخدام هو مكون التنقّل (Navigation Components)، والذي يلعب دوراً حيوياً في تجربة المستخدم من خلال تسهيل الوصول إلى المحتوى وتنظيم بنية الموقع.

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

تعريف إطار عمل Foundation ومكانة مكونات التنقّل فيه

إطار العمل Foundation هو مكتبة مفتوحة المصدر تم تطويرها لتوفير بيئة متكاملة لبناء واجهات مستخدم متجاوبة Responsive، تعتمد على مبادئ تصميم مدمجة تشمل الشبكات (Grid)، العناصر التفاعلية، وأدوات تخصيص مظهر الموقع، إضافة إلى مكونات التنقّل التي تُمكّن المستخدم من التنقل بسلاسة بين صفحات الموقع أو أقسامه المختلفة.

مكونات التنقّل في Foundation ليست مجرد قوائم أو أزرار، بل هي منظومة متكاملة تتيح تصميم قوائم تنقّل أفقية أو رأسية، قوائم منسدلة Dropdowns، أشرطة جانبية Off-canvas، وأدوات متقدمة مثل التنقّل الثابت Fixed Navigation، والتي تُحسّن تجربة الاستخدام بشكل ملحوظ.

مكونات التنقّل الأساسية في Foundation

تحتوي مكتبة Foundation على عدة مكونات لتنظيم التنقل، وتُصنف بشكل رئيسي إلى:

1. قائمة التنقّل الأساسية (Top Bar Navigation)

2. القوائم المنسدلة (Dropdown Menus)

3. شريط التنقّل الثابت (Sticky Navigation)

4. شريط التنقّل الجانبي (Off-canvas Navigation)

5. قوائم التنقّل الخاصة بالهواتف (Responsive Navigation)

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

1. قائمة التنقّل الأساسية (Top Bar Navigation)

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

خصائص Top Bar في Foundation

• تجاوب عالي: تتحول القائمة تلقائياً إلى قائمة مدمجة أو قائمة منسدلة عند تقليل حجم الشاشة، لتناسب الأجهزة الصغيرة.

• دعم القوائم الفرعية: تدعم وجود قوائم فرعية منسدلة لعرض روابط إضافية ضمن نفس القسم.

• تكامل مع JavaScript: تتيح التفاعل مع المستخدم عن طريق دعم الأحداث مثل النقر أو تمرير الماوس.

• تصميم مدمج وسهل التخصيص: يمكن تخصيص الألوان والخطوط بسهولة من خلال إعدادات CSS أو SCSS.

مثال عملي على بناء قائمة التنقّل الأساسية

html
CopyEdit
<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">موقعيli>
      <li><a href="#">الرئيسيةa>li>
      <li>
        <a href="#">الخدماتa>
        <ul class="menu vertical">
          <li><a href="#">خدمة 1a>li>
          <li><a href="#">خدمة 2a>li>
          <li><a href="#">خدمة 3a>li>
        ul>
      li>
      <li><a href="#">حولناa>li>
      <li><a href="#">تواصل معناa>li>
    ul>
  div>
div>

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

2. القوائم المنسدلة (Dropdown Menus)

تُستخدم القوائم المنسدلة لتوفير روابط إضافية يمكن إظهارها عند التفاعل مع عنصر رئيسي في القائمة. توفر هذه القوائم وسيلة لترتيب عدد كبير من الخيارات بشكل منظم دون تشويش الواجهة.

مميزات Dropdown في Foundation

• تعدد المستويات: دعم القوائم ذات المستويات المتعددة.

• التحكم بالظهور: إمكانية التحكم في توقيت ظهور القائمة وإخفائها عبر خصائص JavaScript أو CSS.

• توافق مع أجهزة اللمس: دعم التفاعل على الهواتف الذكية والأجهزة اللوحية.

• سهولة التخصيص: إمكانية تغيير الألوان، الحدود، والحركات الانتقالية.

كيفية بناء قائمة منسدلة

html
CopyEdit
<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">الرئيسيةa>li>
  <li>
    <a href="#">المنتجاتa>
    <ul class="menu vertical">
      <li><a href="#">منتج 1a>li>
      <li><a href="#">منتج 2a>li>
      <li><a href="#">منتج 3a>li>
    ul>
  li>
ul>

هنا نلاحظ أن العنصر “المنتجات” يحتوي على قائمة فرعية عمودية تظهر عند التفاعل مع المستخدم.

3. شريط التنقّل الثابت (Sticky Navigation)

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

مزايا Sticky Navigation

• ثبات الشريط أثناء التمرير: يبقى مثبتاً أعلى الصفحة رغم تحرك المستخدم في المحتوى.

• تأثير بصري مريح: يمكن إضافة تأثيرات انتقال سلسة لجعل الشريط أقل إزعاجاً.

• دعم خيارات التخصيص: إمكانية التحكم في الارتفاع، الألوان، والظل.

طريقة تفعيل خاصية التنقّل الثابت في Foundation

يُضاف صف sticky إلى عنصر التنقّل مع استخدام مكوّن JavaScript خاص بـ Foundation، كما في المثال التالي:

html
CopyEdit
<div class="top-bar sticky" data-sticky>
  
div>

وبتفعيل JavaScript الخاص بـ Foundation، سيصبح الشريط ثابتاً أثناء التمرير.

4. شريط التنقّل الجانبي (Off-canvas Navigation)

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

خصائص Off-canvas في Foundation

• توفير مساحة الشاشة: الشريط مخفي بشكل افتراضي ويتم إظهاره عند النقر على زر مخصص.

• سلاسة التمرير: دعم حركة انزلاقية تجعل ظهور الشريط وإخفاؤه أكثر طبيعية.

• توافق مع جميع الأجهزة: يعمل بشكل ممتاز على الهواتف والأجهزة اللوحية.

• قابلية التخصيص: يمكن تخصيص جهة الظهور (يسار أو يمين) وأسلوب العرض.

مثال عملي لشريط التنقّل الجانبي

html
CopyEdit
<div class="off-canvas-wrapper">
  <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
    <ul class="vertical menu">
      <li><a href="#">الرئيسيةa>li>
      <li><a href="#">الخدماتa>li>
      <li><a href="#">من نحنa>li>
    ul>
  div>

  <div class="off-canvas-content" data-off-canvas-content>
    <button type="button" class="button" data-toggle="offCanvas">قائمةbutton>
    
  div>
div>

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

5. قوائم التنقّل الخاصة بالهواتف (Responsive Navigation)

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

مميزات التنقّل المتجاوب في Foundation

• تحول ديناميكي حسب حجم الشاشة: يستخدم JavaScript وCSS لتغيير شكل القائمة تلقائياً.

• سهولة الوصول: قوائم كبيرة على الأجهزة الصغيرة تتحول إلى قوائم قابلة للتمرير بسهولة.

• دعم مكوّنات أخرى: يمكن دمجها مع مكونات Off-canvas أو Dropdown لتحقيق أفضل تجربة.

تقنيات وأساسيات برمجية لمكونات التنقّل في Foundation

يتم بناء مكونات التنقّل في Foundation باستخدام مزيج من HTML وCSS مع دعم JavaScript الذي يُمكّن من التفاعل الديناميكي.

HTML والهيكلية

تعتمد قوائم التنقّل على عناصر HTML من نوع

و
• لإنشاء القوائم، حيث تُحدد الصفوف والفئات (classes) الخاصة بـ Foundation لتنشيط التنسيق والسلوك.

  CSS والتحكم في التصميم

  يُستخدم CSS الخاص بإطار Foundation لتطبيق تصميم متجاوب، يشمل تقسيم العرض، ألوان الخلفية، التنسيقات، والحركات الانتقالية للظهور والاختفاء.

  JavaScript والسلوك الديناميكي

  تُشغّل مكونات Foundation عبر مكتبة JavaScript التي توفر تحكمات مثل فتح القوائم المنسدلة، تثبيت الشريط أثناء التمرير، وتحريك أشرطة التنقّل الجانبية. يمكن تخصيص الإعدادات عن طريق تمرير خيارات عند تهيئة المكونات.

  ---

  مزايا استخدام مكونات التنقّل في Foundation

  • سهولة الاستخدام: توفر مكونات جاهزة للاستخدام دون الحاجة لكتابة أكواد معقدة.

  • التجاوب العالي: تصميم يضمن تجربة ممتازة على مختلف الأجهزة والشاشات.

  • التكامل السلس: يمكن دمجها مع مكونات أخرى مثل الشبكات وأزرار التفاعل.

  • تخصيص كامل: تتيح تغيير الألوان، الخطوط، والأنماط لتناسب هوية الموقع.

  • الدعم والتحديث المستمر: كونها مفتوحة المصدر يحظى المشروع بتحديثات دورية وتحسينات.

  ---

  مقارنة موجزة بين مكونات التنقّل في Foundation وأُطُر عمل أخرى

  عند مقارنة مكونات التنقّل في Foundation مع أُطُر العمل الأخرى مثل Bootstrap، نلاحظ أن Foundation يركز أكثر على المرونة والتخصيص المتقدم، مع دعم أفضل للميزات المتقدمة مثل الشريط الجانبي Off-canvas بشكل مدمج، بينما Bootstrap يميل إلى تسهيل الاستخدام مع قواعد تصميم أكثر تحديداً وثابتة.

  ---

  جدول يوضح مكونات التنقّل وخصائصها الرئيسية في Foundation

  المكون	الوصف	ميزات رئيسية	الاستخدام الأمثل
  Top Bar Navigation	قائمة أفقية علوية	قوائم فرعية، تجاوب عالي	المواقع ذات القوائم المتعددة
  Dropdown Menus	قوائم منسدلة	دعم متعدد المستويات، متوافقة مع اللمس	القوائم التي تحتاج لترتيب عميق
  Sticky Navigation	شريط ثابت أثناء التمرير	ثبات شريط التنقل، تأثيرات انتقال	المواقع ذات المحتوى الطويل
  Off-canvas Navigation	شريط جانبي مخفي	توفير مساحة شاشة، تحريك انزلاقي	الهواتف، الشاشات الصغيرة
  Responsive Navigation	قوائم تتكيف مع حجم الشاشة	تحول ديناميكي، دمج مع مكونات أخرى	جميع الأجهزة خاصة الهواتف

  ---

  الخاتمة

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