إضافة قائمة Mega Menu منسدلة لمدونة بلوجر مع أعمدة متعددة وتصميم احترافي

📁

قائمة Mega Menu الاحترافية

قائمة منسدلة متعددة الأعمدة بتصميم عصري! 🚀

هل لديك مدونة كبيرة بأقسام متعددة؟

قائمة Mega Menu هي الحل الأمثل! تتيح لك عرض جميع أقسام مدونتك بشكل منظم وجذاب في قائمة منسدلة متعددة الأعمدة. مثالية للمدونات الكبيرة والمتاجر الإلكترونية!

🤔 ما هي قائمة Mega Menu؟

Mega Menu هي قائمة تنقل متطورة تظهر عند تمرير الماوس على عنصر القائمة الرئيسية. تتميز بـ:

📊

أعمدة متعددة

🖼️

صور وأيقونات

📱

تصميم متجاوب

⚡

تأثيرات سلسة

✨ مميزات القائمة

📊

أعمدة متعددة

عرض الروابط في 2، 3، أو 4 أعمدة حسب احتياجك.

🎨

تصميم عصري

ألوان متدرجة وتأثيرات Hover جذابة.

🖼️

صور وأيقونات

إمكانية إضافة صور أو أيقونات لكل قسم.

📱

متجاوب 100%

يتحول لقائمة عمودية على الموبايل تلقائياً.

⚡

سريع وخفيف

كود CSS نقي بدون JavaScript ثقيل.

🔧

سهل التخصيص

غيّر الألوان والأحجام بسهولة تامة.

👀 معاينة القائمة

🏠 الرئيسية

📁 الأقسام ▼

💻 تقنية

• أندرويد

• آيفون

• ويندوز

• برامج

💰 الربح

• أدسنس

• يوتيوب

• التسويق

• العملات

📝 بلوجر

• قوالب

• إضافات

• سيو

• شروحات

📧 اتصل بنا

ℹ️ من نحن

👆 مرر الماوس على "الأقسام" لترى القائمة المنسدلة

💻 كود HTML

⚠️ تنبيه: احفظ نسخة احتياطية من قالبك قبل إضافة أي كود!

أضف هذا الكود في مكان القائمة الرئيسية في قالبك (عادة في الـ Header):

HTML

<!-- Mega Menu Navigation -->
<nav class="mega-menu-nav">
  <div class="mega-menu-container">
    
    <!-- عنصر عادي -->
    <div class="menu-item">
      <a href="/">🏠 الرئيسية</a>
    </div>
    
    <!-- عنصر مع Mega Menu -->
    <div class="menu-item has-mega">
      <a href="#">📁 الأقسام <span class="arrow">▼</span></a>
      
      <!-- محتوى Mega Menu -->
      <div class="mega-menu-content">
        
        <!-- العمود الأول -->
        <div class="mega-column">
          <h4>💻 تقنية</h4>
          <ul>
            <li><a href="/search/label/أندرويد">أندرويد</a></li>
            <li><a href="/search/label/آيفون">آيفون</a></li>
            <li><a href="/search/label/ويندوز">ويندوز</a></li>
            <li><a href="/search/label/برامج">برامج</a></li>
          </ul>
        </div>
        
        <!-- العمود الثاني -->
        <div class="mega-column">
          <h4>💰 الربح من الإنترنت</h4>
          <ul>
            <li><a href="/search/label/أدسنس">جوجل أدسنس</a></li>
            <li><a href="/search/label/يوتيوب">يوتيوب</a></li>
            <li><a href="/search/label/تسويق">التسويق بالعمولة</a></li>
            <li><a href="/search/label/عملات">العملات الرقمية</a></li>
          </ul>
        </div>
        
        <!-- العمود الثالث -->
        <div class="mega-column">
          <h4>📝 بلوجر</h4>
          <ul>
            <li><a href="/search/label/قوالب">قوالب بلوجر</a></li>
            <li><a href="/search/label/إضافات">إضافات بلوجر</a></li>
            <li><a href="/search/label/سيو">تحسين SEO</a></li>
            <li><a href="/search/label/شروحات">شروحات بلوجر</a></li>
          </ul>
        </div>
        
        <!-- العمود الرابع (اختياري) -->
        <div class="mega-column featured">
          <h4>🔥 مقالات مميزة</h4>
          <div class="featured-post">
            <img src="رابط_الصورة.jpg" alt="مقال مميز">
            <p>أفضل 10 قوالب بلوجر 2024</p>
          </div>
        </div>
        
      </div>
    </div>
    
    <!-- عنصر آخر مع Mega Menu -->
    <div class="menu-item has-mega">
      <a href="#">🎓 دورات <span class="arrow">▼</span></a>
      
      <div class="mega-menu-content">
        <div class="mega-column">
          <h4>📚 دورات مجانية</h4>
          <ul>
            <li><a href="#">دورة بلوجر للمبتدئين</a></li>
            <li><a href="#">دورة SEO كاملة</a></li>
            <li><a href="#">دورة أدسنس</a></li>
          </ul>
        </div>
        <div class="mega-column">
          <h4>🏆 دورات متقدمة</h4>
          <ul>
            <li><a href="#">احتراف التدوين</a></li>
            <li><a href="#">بناء العلامة التجارية</a></li>
            <li><a href="#">التسويق الرقمي</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- عناصر عادية -->
    <div class="menu-item">
      <a href="/p/contact.html">📧 اتصل بنا</a>
    </div>
    
    <div class="menu-item">
      <a href="/p/about.html">ℹ️ من نحن</a>
    </div>
    
  </div>
  
  <!-- زر الموبايل -->
  <button class="mobile-menu-btn" onclick="toggleMobileMenu()">☰</button>
</nav>
<!-- End Mega Menu -->

🎨 كود CSS

أضف هذا الكود قبل وسم </head>:

CSS

<style>
/* ===== Mega Menu Styles ===== */

/* الحاوية الرئيسية */
.mega-menu-nav {
  background: linear-gradient(135deg, #48cae4 0%, #a8edea 100%);
  padding: 0;
  position: relative;
  z-index: 1000;
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.mega-menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* عناصر القائمة */
.menu-item {
  position: relative;
}

.menu-item > a {
  display: block;
  padding: 18px 25px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  transition: all 0.3s ease;
}

.menu-item > a:hover {
  background: rgba(255,255,255,0.2);
}

.menu-item .arrow {
  font-size: 10px;
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.menu-item:hover .arrow {
  transform: rotate(180deg);
}

/* محتوى Mega Menu */
.mega-menu-content {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  padding: 30px;
  min-width: 600px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 25px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 100;
}

.menu-item.has-mega:hover .mega-menu-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
}

/* أعمدة Mega Menu */
.mega-column h4 {
  color: #48cae4;
  font-size: 16px;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 3px solid #a8edea;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mega-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-column ul li {
  margin: 8px 0;
}

.mega-column ul li a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: block;
  padding: 5px 0;
  padding-right: 15px;
  position: relative;
}

.mega-column ul li a::before {
  content: '›';
  position: absolute;
  right: 0;
  color: #48cae4;
  opacity: 0;
  transition: all 0.3s ease;
}

.mega-column ul li a:hover {
  color: #48cae4;
  padding-right: 20px;
}

.mega-column ul li a:hover::before {
  opacity: 1;
}

/* عمود المقالات المميزة */
.mega-column.featured {
  background: linear-gradient(135deg, rgba(168,237,234,0.1), rgba(254,214,227,0.1));
  padding: 20px;
  border-radius: 10px;
}

.mega-column.featured .featured-post img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}

.mega-column.featured .featured-post p {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 1.5;
}

/* زر الموبايل */
.mobile-menu-btn {
  display: none;
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  font-size: 24px;
  padding: 10px 15px;
  border-radius: 8px;
  cursor: pointer;
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* ===== التصميم المتجاوب ===== */
@media (max-width: 992px) {
  .mega-menu-content {
    min-width: 400px;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .mega-menu-nav {
    padding: 15px;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .mega-menu-container {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-top: 60px;
  }
  
  .mega-menu-container.active {
    display: flex;
  }
  
  .menu-item {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  
  .menu-item > a {
    padding: 15px 20px;
  }
  
  .mega-menu-content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 100%;
    grid-template-columns: 1fr;
    box-shadow: none;
    border-radius: 0;
    padding: 20px;
    background: rgba(255,255,255,0.95);
    display: none;
  }
  
  .menu-item.has-mega.active .mega-menu-content {
    display: grid;
  }
  
  .mega-column.featured {
    display: none;
  }
}

/* ===== تخصيص الألوان (اختياري) ===== */
/* لتغيير لون القائمة، عدّل هذه القيم */
/*
.mega-menu-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mega-column h4 {
  color: #667eea;
  border-bottom-color: #764ba2;
}

.mega-column ul li a:hover {
  color: #667eea;
}
*/
</style>

⚙️ كود JavaScript

أضف هذا الكود قبل وسم </body>:

JavaScript

<script>
// Mega Menu Mobile Toggle
function toggleMobileMenu() {
  const menu = document.querySelector('.mega-menu-container');
  menu.classList.toggle('active');
}

// Toggle Mega Menu on Mobile
document.addEventListener('DOMContentLoaded', function() {
  const megaItems = document.querySelectorAll('.menu-item.has-mega');
  
  megaItems.forEach(item => {
    item.addEventListener('click', function(e) {
      if (window.innerWidth <= 768) {
        e.preventDefault();
        this.classList.toggle('active');
        
        // إغلاق القوائم الأخرى
        megaItems.forEach(other => {
          if (other !== this) {
            other.classList.remove('active');
          }
        });
      }
    });
  });
  
  // إغلاق القائمة عند النقر خارجها
  document.addEventListener('click', function(e) {
    if (!e.target.closest('.mega-menu-nav')) {
      document.querySelector('.mega-menu-container').classList.remove('active');
      megaItems.forEach(item => item.classList.remove('active'));
    }
  });
});
</script>

📝 خطوات التركيب

افتح قالب بلوجر

اذهب إلى: المظهر → تعديل HTML

أضف كود CSS

ابحث عن </head> والصق كود CSS قبله

أضف كود HTML

استبدل القائمة القديمة بكود HTML الجديد (عادة في الـ Header)

أضف كود JavaScript

الصق كود JavaScript قبل </body>

خصص الروابط والأقسام

غيّر الروابط وأسماء الأقسام حسب مدونتك

احفظ واختبر

احفظ القالب وجرب القائمة على مدونتك!

🎨 تخصيص القائمة

🎨 نماذج ألوان جاهزة:

💜

بنفسجي

#667eea, #764ba2

🩷

وردي

#f093fb, #f5576c

💙

أزرق

#4facfe, #00f2fe

🧡

برتقالي

#fa709a, #fee140

💚

أخضر

#43e97b, #38f9d7

🖤

داكن

#0f172a, #334155

تغيير عدد الأعمدة:

في كود CSS، ابحث عن:


grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

غيّرها إلى:


/* لـ 3 أعمدة ثابتة */

grid-template-columns: repeat(3, 1fr);


/* لـ 4 أعمدة ثابتة */

grid-template-columns: repeat(4, 1fr);

❓ أسئلة شائعة

هل تعمل على الموبايل؟

نعم! تتحول تلقائياً لقائمة عمودية قابلة للطي على الشاشات الصغيرة.

كيف أضيف أقسام أكثر؟

انسخ كود <div class="mega-column"> وأضفه داخل <div class="mega-menu-content">

القائمة لا تظهر؟

تأكد من إضافة كود CSS قبل </head> وأن z-index كافي (1000 أو أكثر).

هل يمكن إضافة صور للأقسام؟

نعم! استخدم العمود المميز (mega-column featured) وأضف الصور كما في المثال.

💡 نصائح للاستخدام الأمثل:

لا تضع أكثر من 4 أعمدة لتجنب الازدحام
استخدم أيقونات إيموجي لجعل القائمة أكثر جاذبية
اجعل الروابط واضحة وقصيرة
اختبر القائمة على الموبايل دائماً
استخدم ألوان متناسقة مع تصميم مدونتك

🎉

رائع! مدونتك الآن أكثر احترافية

قائمة Mega Menu ستحسن تجربة التصفح لزوارك! 💙

✍️ نبذة عن الكاتب

✓

قاسي | Kaci

PRO

🌐 مدون تقني | مطور محتوى

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

50+

مقال

10K+

زائر

100+

متابع

5.0★

تقييم

تابعني على:

YouTube Facebook

📲 امسح للمتابعة

قاسي للمعلومات | Kaci Lilmaaloumat

قائمة Mega Menu الاحترافية لبلوجر | تصميم منسدل متعدد الأعمدة 2024

قائمة Mega Menu الاحترافية

🤔 ما هي قائمة Mega Menu؟

✨ مميزات القائمة

أعمدة متعددة

تصميم عصري

صور وأيقونات

متجاوب 100%

سريع وخفيف

سهل التخصيص

👀 معاينة القائمة

💻 كود HTML

🎨 كود CSS

⚙️ كود JavaScript

📝 خطوات التركيب

افتح قالب بلوجر

أضف كود CSS

أضف كود HTML

أضف كود JavaScript

خصص الروابط والأقسام

احفظ واختبر

🎨 تخصيص القائمة

🎨 نماذج ألوان جاهزة:

تغيير عدد الأعمدة:

❓ أسئلة شائعة

هل تعمل على الموبايل؟

كيف أضيف أقسام أكثر؟

القائمة لا تظهر؟

هل يمكن إضافة صور للأقسام؟

💡 نصائح للاستخدام الأمثل:

رائع! مدونتك الآن أكثر احترافية

✍️ نبذة عن الكاتب

قاسي | Kaci

أخر المواضيع من قسم : تطوير المواقع