كيفية إنشاء قائمة تنقل دائرية باستخدام CSS Transforms

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

تتيح خاصية CSS Transforms للمطورين تحويل العناصر بصريًا من خلال التدوير، التحجيم، الترجمة، والإمالة، دون تغيير موقعها الفعلي في المستند. من خلال دمج هذه الخاصية مع التنسيقات الدقيقة وpositioning المناسب، يمكن إنشاء قائمة تنقل دائرية تتفاعل مع المستخدم بطريقة سلسة ومبهرة بصريًا.

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

أهمية القوائم الدائرية في واجهة المستخدم

على الرغم من أن القوائم الدائرية ليست الخيار التقليدي في جميع المواقع، إلا أنها تحمل مزايا عديدة تجعل منها عنصرًا جذابًا ومناسبًا في سيناريوهات معينة، مثل:

• جذب الانتباه في التطبيقات التفاعلية.

• توفير تجربة مستخدم مرنة في تطبيقات الجوال.

• استخدامها في التصاميم الإبداعية مثل المواقع الفنية أو المعارض الرقمية.

• القدرة على إخفاء وإظهار الروابط بطريقة ديناميكية.

المتطلبات الأساسية لإنشاء قائمة دائرية

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

• HTML بسيط يحتوي على عنصر مركزي (زر أو رمز) يُستخدم لفتح أو إظهار القائمة.

• CSS متقدم يعتمد على position: absolute وtransform لرسم العناصر بشكل دائري.

• Transition لتنعيم حركة العناصر عند الفتح والإغلاق.

الهيكل العام للقائمة الدائرية

1. كود HTML الأساسي

html
CopyEdit
<div class="circular-menu">
  <button class="menu-toggle">+button>
  <nav class="menu">
    <a href="#" class="menu-item">1a>
    <a href="#" class="menu-item">2a>
    <a href="#" class="menu-item">3a>
    <a href="#" class="menu-item">4a>
    <a href="#" class="menu-item">5a>
    <a href="#" class="menu-item">6a>
  nav>
div>

يحتوي الكود أعلاه على عنصر رئيسي (.circular-menu) يتضمن زرًا لتشغيل القائمة (.menu-toggle) ومجموعة من العناصر الفرعية التي تشكل روابط التنقل (.menu-item).

التصميم باستخدام CSS

2. إعداد الشكل العام

css
CopyEdit
.circular-menu {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
}

.menu-toggle {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  font-size: 30px;
  border: none;
  cursor: pointer;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

3. تنسيق العناصر الدائرية

css
CopyEdit
.menu {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 0.4s ease;
}

.menu-item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

حساب الزوايا وتوزيع العناصر

توزيع العناصر بشكل دائري يتم عن طريق حساب الزاوية الفاصلة بين كل عنصر باستخدام المعادلة التالية:

$$زاوية_كل_عنصر = 360 / عدد_العناصر$$

ثم يتم تعيين transform لكل عنصر كالتالي:

javascript
CopyEdit
const items = document.querySelectorAll('.menu-item');
const numberOfItems = items.length;
const radius = 80;

items.forEach((item, index) => {
  const angle = (index / numberOfItems) * (2 * Math.PI);
  const x = radius * Math.cos(angle);
  const y = radius * Math.sin(angle);
  item.style.transform = `translate(${x}px, ${y}px)`;
});

إظهار وإخفاء القائمة باستخدام فئات CSS

4. فئة تفعيل القائمة

css
CopyEdit
.circular-menu.active .menu {
  pointer-events: all;
}

.circular-menu.active .menu-item {
  opacity: 1;
}

5. تفعيل العناصر عبر JavaScript

javascript
CopyEdit
const toggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.circular-menu');

toggle.addEventListener('click', () => {
  menu.classList.toggle('active');
});

إضافة تأثيرات بصرية متقدمة

6. حركة ديناميكية عند الفتح

لإضفاء طابع ديناميكي، يمكن استخدام transition-delay لكل عنصر لتوزيع الحركة:

javascript
CopyEdit
items.forEach((item, index) => {
  item.style.transitionDelay = `${index * 0.05}s`;
});

جدول توزيع العناصر الدائرية حسب عدد العناصر

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

تخصيص القائمة لأجهزة الجوال

يمكن تعديل التصميم ليكون متجاوبًا مع الأجهزة الصغيرة، عن طريق استخدام استعلامات الوسائط:

css
CopyEdit
@media (max-width: 600px) {
  .circular-menu {
    width: 150px;
    height: 150px;
  }

  .menu-toggle {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .menu-item {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

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

تُستخدم القوائم الدائرية عادة في:

• تطبيقات الهاتف المحمول ذات واجهات مستخدم تفاعلية.

• لوحات تحكم الوسائط المتعددة مثل تطبيقات التحكم في الصوت.

• المواقع الفنية التي تتطلب لمسة تصميم إبداعية.

• القوائم المخفية التي تظهر عند النقر على زر معين، مثل القوائم المنبثقة في تطبيقات الألعاب.

أفضل الممارسات عند استخدام القوائم الدائرية

1. البساطة: لا تبالغ في عدد العناصر لتفادي الفوضى البصرية.

2. التناسق: اختر ألوانًا متناسقة لتبرز العناصر بوضوح.

3. سهولة الوصول: اجعل الحجم والمسافات مناسبة للضغط خاصة على الشاشات اللمسية.

4. الدلالة الواضحة: اجعل أيقونة التبديل توحي بأن هناك قائمة دائرية.

مصدر الإلهام والتطوير المستقبلي

قائمة التنقل الدائرية ليست مجرد عنصر جمالي، بل تمثل أسلوبًا مبتكرًا للتفاعل مع المستخدم. يمكن تحسينها أكثر بإضافة مؤثرات ثلاثية الأبعاد (3D Transforms) أو دمجها مع مكتبات JavaScript مثل GSAP أو Anime.js لجعل الحركة أكثر سلاسة.

المراجع

1. MDN Web Docs – CSS Transforms

2. CSS Tricks – Positioning Elements in a Circle