تنسيق القوائم (Menus) في CSS

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

---

1. تنسيق القوائم العمودية

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

مثال على قائمة عمودية

HTML:

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

CSS:

.vertical-menu {
    list-style-type: none; /* إزالة النقط من القائمة */
    padding: 0;
}

.vertical-menu li {
    margin: 10px 0; /* إضافة مسافة بين العناصر */
}

.vertical-menu a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

.vertical-menu a:hover {
    background-color: #ddd;
    color: #000;
}

تفسير الشيفرة

• إزالة النقط: باستخدام list-style-type: none; أزلنا النقط من القائمة.
• المسافات بين العناصر: أضفنا مسافة بين كل عنصر وآخر باستخدام margin.
• تأثير hover: عند التمرير فوق العنصر، يتغير لون الخلفية ولون النص لجعل التفاعل أكثر وضوحًا.

---

2. تنسيق القوائم الأفقية

القوائم الأفقية غالبًا ما تُستخدم في شريط التنقل العلوي للموقع. نستخدم خصائص CSS مثل display: inline-block أو display: flex لترتيب العناصر أفقيًا.

مثال على قائمة أفقية

HTML:

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

CSS:

.horizontal-menu {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center; /* محاذاة العناصر في الوسط */
}

.horizontal-menu li {
    margin: 0 15px; /* مسافة بين العناصر */
}

.horizontal-menu a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: background-color 0.3s;
}

.horizontal-menu a:hover {
    background-color: #ddd;
    color: #000;
}

تفسير الشيفرة

• العرض الأفقي: استخدمنا display: flex لجعل العناصر تظهر أفقيًا.
• المحاذاة في الوسط: خاصية justify-content: center; تجعل العناصر تظهر في وسط الصفحة.
• تأثير hover: باستخدام background-color و color عند تمرير المؤشر، يتغير لون الخلفية والنص.

---

3. إضافة تأثيرات Hover على القوائم

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

مثال على تأثير hover مع تظليل

CSS:

.menu a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: all 0.3s ease-in-out;
}

.menu a:hover {
    background-color: #ddd;
    color: #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* إضافة تظليل */
    transform: scale(1.05); /* تكبير العنصر قليلاً */
}

تفسير الشيفرة

• transition: أضفنا انتقالًا سلسًا لتأثير hover باستخدام transition: all 0.3s ease-in-out.
• box-shadow: أضفنا تظليلاً خفيفًا لجعل العنصر يبدو بارزًا.
• transform: scale: قمنا بتكبير العنصر قليلاً لزيادة التركيز عليه.

---

4. أمثلة متقدمة: قوائم منسدلة

تُعد القوائم المنسدلة من التنسيقات المتقدمة في CSS، حيث تعرض العناصر الفرعية عند تمرير المؤشر على أحد العناصر الرئيسية.

مثال على قائمة منسدلة

HTML:

<ul class="dropdown-menu">
    <li><a href="#">الرئيسية</a></li>
    <li>
        <a href="#">الخدمات</a>
        <ul class="submenu">
            <li><a href="#">خدمة 1</a></li>
            <li><a href="#">خدمة 2</a></li>
            <li><a href="#">خدمة 3</a></li>
        </ul>
    </li>
    <li><a href="#">المقالات</a></li>
    <li><a href="#">اتصل بنا</a></li>
</ul>

CSS:

.dropdown-menu {
    list-style-type: none;
    padding: 0;
    display: flex;
}

.dropdown-menu li {
    position: relative;
    margin: 0 15px;
}

.dropdown-menu a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    display: block;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style-type: none;
    padding: 0;
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-menu li:hover .submenu {
    display: block;
}

.submenu li {
    padding: 10px;
}

.submenu a:hover {
    background-color: #ddd;
}

تفسير الشيفرة

• القائمة الفرعية: تحتوي القائمة على عنصر فرعي submenu يتم إخفاؤه باستخدام display: none.
• إظهار القائمة الفرعية: يتم إظهار القائمة الفرعية عند التمرير على العنصر الرئيسي باستخدام :hover.
• الموقع المطلق: باستخدام position: absolute; جعلنا القائمة الفرعية تظهر تحت العنصر الرئيسي مباشرة.

---

خاتمة

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