ניווט למובייל תחילה

חלק מהיחידה פיתוח 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;
  //some more styles
}

.nav-list {
  display: none;
  //some more styles
}

לאחר מכן, השתמש בשאילתות מדיה למסכים גדולים יותר. במסכים גדולים יותר → הצג את התפריט כרשימה אופקית בחלק העליון והסתר כפתור "תפריט".

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

הגישה הזו מבטיחה שהניווט מותאם תחילה למכשירים ניידים, ולאחר מכן משופר עבור מסכים גדולים יותר.

אתגר

קל

נתון קובץ HTML עם ניווט שמכיל כפתור תפריט ורשימה, וכרגע הרשימה תמיד גלויה.

המשימה שלך היא לתקן את סגנון הניווט בגישת מובייל תחילה על ידי:

הסתרת רשימת הניווט כברירת מחדל במסכים ניידים.
הצגת רשימת הניווט במסכים גדולים יותר (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>