html
CopyEdit
<nav class="main-navigation">
  <ul class="menu">
    <li><a href="#">الرئيسيةa>li>
    <li><a href="#">عن الموقعa>li>
    <li><a href="#">الخدماتa>li>
    <li><a href="#">اتصل بناa>li>
  ul>
nav>

تصميم القائمة على الشاشات الكبيرة

في الشاشات الكبيرة، يمكن عرض القائمة بشكل أفقي:

css
CopyEdit
.main-navigation ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  background-color: #333;
}

.main-navigation ul.menu li {
  margin-right: 20px;
}

.main-navigation ul.menu li a {
  color: white;
  text-decoration: none;
  padding: 15px 20px;
  display: block;
}

التصميم المتجاوب للشاشات الصغيرة

لجعل القائمة متجاوبة، يتم استخدام خاصية الـ media queries في CSS، حيث تتغير طريقة العرض حسب حجم الشاشة:

css
CopyEdit
@media (max-width: 768px) {
  .main-navigation ul.menu {
    flex-direction: column;
    display: none; /* يتم إخفاؤها بشكل افتراضي */
  }
  
  .main-navigation ul.menu.active {
    display: flex; /* تُعرض عند تفعيلها */
  }
  
  .menu-toggle {
    display: block;
    background-color: #333;
    color: white;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
  }
}

في هذه الحالة، يتم إخفاء القائمة بشكل افتراضي على الشاشات الصغيرة، ويتم توفير زر (عادة يسمى “menu-toggle”) لعرضها عند الضغط عليه.

4. إضافة زر التبديل (Toggle Button) للقائمة على الهواتف

يتم إضافة عنصر زر يتحكم في عرض القائمة وإخفائها على الشاشات الصغيرة:

html
CopyEdit
<nav class="main-navigation">
  <div class="menu-toggle">القائمةdiv>
  <ul class="menu">
    <li><a href="#">الرئيسيةa>li>
    <li><a href="#">عن الموقعa>li>
    <li><a href="#">الخدماتa>li>
    <li><a href="#">اتصل بناa>li>
  ul>
nav>

5. استخدام جافاسكريبت لإضافة تأثير التبديل

يتم إضافة كود بسيط بلغة جافاسكريبت لجعل زر القائمة يتحكم في إظهار وإخفاء القائمة عند النقر:

js
CopyEdit
document.addEventListener('DOMContentLoaded', function() {
  const menuToggle = document.querySelector('.menu-toggle');
  const menu = document.querySelector('.main-navigation ul.menu');
  
  menuToggle.addEventListener('click', function() {
    menu.classList.toggle('active');
  });
});

هذا الكود يضيف أو يزيل صنف CSS active عند النقر على زر القائمة، مما يؤدي إلى عرض أو إخفاء القائمة.

6. إضافة تأثيرات بصرية على القائمة

لجعل القائمة أكثر جاذبية، يمكن إضافة تأثيرات CSS مثل التحولات (Transitions) والرسوم المتحركة (Animations) عند ظهور القائمة أو عند التمرير على الروابط.

تأثير الانتقال السلس

css
CopyEdit
.main-navigation ul.menu {
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
  max-height: 0;
}

.main-navigation ul.menu.active {
  max-height: 500px; /* قيمة كافية لعرض القائمة */
}

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

تأثير تغيير لون عند التمرير على الرابط

css
CopyEdit
.main-navigation ul.menu li a:hover {
  background-color: #555;
  color: #fff;
  transition: background-color 0.3s ease;
}

7. استخدام مكتبات وأدوات جاهزة لتحسين القائمة

بدلاً من كتابة كل شيء من الصفر، يمكن الاستفادة من مكتبات مثل:

• jQuery: كثير من القوالب تستخدم jQuery لإضافة تأثيرات متقدمة.

• Plugins ووردبريس: مثل “WP Responsive Menu” أو “Max Mega Menu” التي توفر قوائم متجاوبة مع تأثيرات جاهزة وقابلة للتخصيص.

• Frameworks CSS: مثل Bootstrap الذي يقدم قوائم تنقل متجاوبة جاهزة مع تأثيرات.

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

8. الاعتبارات الفنية لتحسين الأداء وتجربة المستخدم

تحسين سرعة تحميل القائمة

• تقليل عدد عناصر القائمة قدر الإمكان.

• استخدام صور وأيقونات خفيفة الحجم.

• تحميل ملفات CSS وJS المتعلقة بالقائمة بشكل مخصص (Lazy Load).

سهولة الاستخدام

• جعل عناصر القائمة كبيرة كفاية للضغط باللمس على الأجهزة المحمولة.

• توفير تباين لوني جيد بين النص والخلفية.

• دعم لوحة المفاتيح للتنقل داخل القائمة لتسهيل الوصول لذوي الاحتياجات الخاصة.

9. خطوات متقدمة لتخصيص القائمة باستخدام PHP في ووردبريس

يمكن تعديل ملف functions.php في القالب لتسجيل قائمة جديدة أو تخصيص القائمة الحالية:

php
CopyEdit
function register_my_menu() {
  register_nav_menu('primary', __( 'القائمة الرئيسية' ));
}
add_action( 'init', 'register_my_menu' );

ثم يمكن استدعاء القائمة في القالب باستخدام:

php
CopyEdit
wp_nav_menu(array(
  'theme_location' => 'primary',
  'menu_class'     => 'menu',
  'container'      => 'nav',
  'container_class'=> 'main-navigation',
));

هذا يسمح بمرونة أكبر في التحكم ببنية القائمة عبر لوحة ووردبريس.

10. التعامل مع القوائم الفرعية (Submenus) والتأثيرات عليها

في حالة وجود قوائم فرعية، من المهم تنسيقها بحيث تكون متجاوبة أيضًا:

تنسيق القوائم الفرعية

css
CopyEdit
.main-navigation ul.menu ul.sub-menu {
  display: none;
  position: absolute;
  background-color: #444;
  margin-top: 10px;
  list-style: none;
  padding: 0;
}

.main-navigation ul.menu li:hover > ul.sub-menu {
  display: block;
}

في الشاشات الصغيرة

يتم تعديل عرض القوائم الفرعية لتكون مدمجة مع القائمة الرئيسية عبر خاصية العرض العمودي، مع إمكانية إضافة تأثيرات طي القوائم:

css
CopyEdit
@media (max-width: 768px) {
  .main-navigation ul.menu ul.sub-menu {
    position: relative;
    margin-top: 0;
  }
}

يمكن إضافة جافاسكريبت للتحكم في فتح وإغلاق القوائم الفرعية عند الضغط على الأيقونات.

جدول يوضح الفرق بين تصميم قائمة التنقل في شاشات مختلفة

الخاتمة التقنية

إن تصميم قائمة تنقل متجاوبة مع تأثيرات في ووردبريس يتطلب فهمًا جيدًا لكل من تقنيات الواجهة الأمامية (HTML, CSS, JavaScript) إضافة إلى معرفة بخصائص نظام ووردبريس مثل تسجيل القوائم وعرضها. كما يجب أن تكون القائمة سهلة الاستخدام على كل الأجهزة، وأن تستجيب لحجم الشاشة بشكل ديناميكي. استخدام التأثيرات بحذر يمكن أن يعزز من تجربة المستخدم، ولكن يجب مراعاة سرعة الأداء وتوافق الموقع مع معايير الوصول (Accessibility).

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

المراجع