التنقل للهاتف المحمول أولاً

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 8 من 35.

تعني التنقل المعتمد على الهاتف المحمول أولاً البدء بقائمة بسيطة وسهلة الاستخدام باللمس للشاشات الصغيرة، ثم تحسينها للشاشات الأكبر.

ابدأ بهيكل أساسي للتنقل عبر الهاتف المحمول: داخل عنصر <nav>، قم بتضمين زر وقائمة.

<nav class="main-nav">
  <button class="menu-toggle">Menu</button>
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

قم بتطبيق تنسيقات الهاتف المحمول أولاً. على الشاشات الصغيرة ← أظهر زر "القائمة" وأخفِ القائمة.

.menu-toggle {
  display: block;
  //المزيد من التنسيقات
}

.nav-list {
  display: none;
  //المزيد من التنسيقات
}

ثم استخدم استعلامات الوسائط (media queries) للشاشات الأكبر. في الشاشات الأكبر ← اعرض القائمة كقائمة أفقية في الأعلى وأخفِ زر "القائمة".

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    display: flex;
  }
}

يضمن هذا النهج تحسين التنقل للأجهزة المحمولة أولاً، ثم تحسينه للشاشات الأكبر.

التحدي

سهل

بفرض وجود ملف HTML يحتوي على قائمة تنقل تضم زر قائمة و قائمة، حالياً القائمة مرئية دائماً.

مهمتك هي إصلاح نمط التنقل المعتمد على الهاتف أولاً (mobile-first) من خلال:

جعل قائمة التنقل مخفية افتراضياً على شاشات الهاتف المحمول.
جعل قائمة التنقل مرئية على الشاشات الأكبر (display: flex).

ورقة مرجعية

تبدأ التنقلات الموجهة للأجهزة المحمولة أولاً بقائمة بسيطة وسهلة اللمس للشاشات الصغيرة، ثم يتم تحسينها للشاشات الأكبر.

هيكل التنقل الأساسي للأجهزة المحمولة:

<nav class="main-nav">
  <button class="menu-toggle">Menu</button>
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

تنسيق الأجهزة المحمولة (إظهار الزر، إخفاء القائمة):

.menu-toggle {
  display: block;
}

.nav-list {
  display: none;
}

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

@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-list {
    display: flex;
  }
}

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Navigation</title>
  <style>
    :root {
      --primary-color: #4a6de5;
      --text-color: #333333;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-weight: bold;
      color: var(--primary-color);
      text-decoration: none;
      font-size: 1.5rem;
    }
    
    .menu-toggle {
      display: block;
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
    
    .nav-list {
      list-style: none;
      padding: 0;
      margin: 1rem 0 0 0;
      width: 100%;
    }
  
    .nav-list li a {
      color: var(--text-color);
      text-decoration: none;
      display: block;
      padding: 0.5rem 0;
    }
    
    @media (min-width: 768px) {
      .menu-toggle {
        display: none;
      }
      
      .nav-list {
        margin: 0;
        width: auto;
      }
      
      .nav-list li {
        margin: 0 0 0 1.5rem;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <nav class="nav-container">
      <a href="#" class="logo">MySite</a>
      <button class="menu-toggle">Menu</button>
      <ul class="nav-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>