تصميم نافبار متجاوب 📱

تصميم النافبار المتجاوب المطور

بناء شريط تنقل "عائم" مع قائمة جوال جانبية وروابط تواصل ديناميكية

الهيكل المطور

كود HTML (قالب بلوجر)

لقد أضفنا قسم nav-cta كمنطقة ودجت لتتحكم في روابط السوشيال ميديا من التنسيق.

طريقة تركيب الهيكل:
  1. توجه إلى المظهر ثم تعديل HTML.
  2. ابحث عن الوسم الشهير <body>.
  3. قم بلصق الكود أدناه مباشرة بعد وسم <body> أو في المكان المخصص للرأس (Header).
HTML5هيكل النافبار
<nav class='nav-container'>
  <div class='nav-inner'>
    <!-- زر الجوال -->
    <div class='menu-toggle' id='mobile-menu'>
      <i class='fas fa-bars'/>
    </div>

    <!-- القائمة الرئيسية -->
    <div class='nav-links' id='nav-links-container'>
      <b:section class='header-menu' id='header-menu' showaddelement='yes'>
         <b:widget id='LinkList10' locked='false' title='القائمة الرئيسية' type='LinkList'/>
      </b:section>
    </div>

    <!-- أيقونات التواصل والسلة (ديناميكية) -->
    <div class='nav-cta'>
      <b:section id='nav-icons' class='icons-area' showaddelement='yes'>
        <b:widget id='LinkList11' locked='false' title='روابط التواصل' type='LinkList'/>
      </b:section>
    </div>
  </div>
</nav>
التنسيق العائم

كود CSS المتجاوب

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

طريقة تركيب التنسيق:
  1. داخل محرر HTML الخاص بالقالب، ابحث عن وسم </b:skin> أو </style>.
  2. قم بلصق كود CSS التالي قبله مباشرة لضمان تطبيق التنسيقات على النافبار.
CSS Styleتنسيق النافبار
/* إعدادات النافبار العائم */
.nav-container {
  position: fixed;
  top: 15px;
  left: 5%;
  right: 5%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 9999;
  padding: 5px 15px;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links ul {
  display: flex;
  list-style: none;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #1e293b;
  font-weight: 600;
  transition: 0.3s;
}

/* تنسيق أيقونات التواصل */
.nav-cta ul {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-cta a {
  background: var(--primary);
  color: white !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.nav-cta a:hover { transform: scale(1.1); }

.menu-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #1e293b;
}

/* الجوال */
@media (max-width: 768px) {
  .menu-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100vh;
    background: white;
    flex-direction: column;
    padding: 80px 20px;
    transition: 0.4s ease;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  }
  .nav-links.active { right: 0; }
  .nav-links ul { flex-direction: column; gap: 20px; }
}
تفعيل النافبار

كود التفعيل زر الجوال في النافبار (JS)

ملاحظة هامة: ضعه قبل وسم </body> مباشرة لضمان تحميل العناصر قبل تنفيذ الكود.

JSجافاسكريبت
        <script type='text/javascript'>
//<![CDATA[
  document.addEventListener('DOMContentLoaded', function() {
    var menuBtn = document.getElementById('mobile-menu');
    var sideMenu = document.getElementById('nav-links-container');

    if (menuBtn && sideMenu) {
      menuBtn.onclick = function() {
        sideMenu.classList.toggle('active');
        var icon = menuBtn.querySelector('i');
        icon.classList.toggle('fa-bars');
        icon.classList.toggle('fa-times');
      };

      var links = sideMenu.querySelectorAll('a');
      links.forEach(function(link) {
        link.onclick = function() { sideMenu.classList.remove('active'); };
      });
    }
  });
//]]>
</script>
التنقل الداخلي

كيف تربط القائمة بأقسام الصفحة؟

لجعل الزائر ينتقل إلى قسم معين عند الضغط على رابط في النافبار (مثل الانتقال إلى "المميزات")، اتبع هذه الطريقة البسيطة:

  1. تأكد أن القسم الذي تريد الذهاب إليه يمتلك ID (معرف فريد). مثلاً قسم المميزات في الدروس القادمة سيكون id='features'.
  2. في لوحة تحكم بلوجر (قسم التنسيق)، عند إضافة رابط جديد في أداة القائمة الرئيسية:
    • في خانة اسم الموقع: اكتب "المميزات".
    • في خانة عنوان URL: اكتب رمز الهاشتاج متبوعاً بالمعرف #features.
  3. عند الضغط على الرابط، ستقوم الصفحة بالنزول تلقائياً إلى ذلك القسم بفضل كود CSS الذي أضفناه.
إدارة أيقونات التواصل

كيف تضيف أيقونات التواصل؟

لإضافة أيقونة (واتساب أو تيليجرام أو السلة) من لوحة التحكم:

  1. اذهب إلى التنسيق (Layout) > ابحث عن nav-icons.
  2. أضف رابطاً جديداً: في "اسم الموقع" ضع كود الأيقونة، وفي "العنوان" ضع رابطك.
  3. أمثلة لأسماء المواقع (الأيقونات):
    • للواتساب: <i class="fab fa-whatsapp"></i>
    • للتيليجرام: <i class="fab fa-telegram"></i>
    • للسلة: <i class="fas fa-shopping-bag"></i>
الخطوة التالية

إنشاء قسم الهيرو (Hero Section)

شرح برمجة قسم الواجهة الرئيسي (Hero) وربطه بأدوات بلوجر

قريبا
تم نسخ الكود بنجاح!

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)