تخطيط الشريط الجانبي والمحتوى

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

تخطيط الشريط الجانبي + المحتوى هو نمط استجابة شائع حيث يكون لديك منطقة محتوى رئيسية وشريط جانبي للتنقل أو لمعلومات إضافية.

ابدأ بهيكل HTML الأساسي:

<div class="container">
  <main class="content">Main content here</main>
  <aside class="sidebar">Sidebar content here</aside>
</div>

الآن أضف CSS لنهج الهاتف أولاً (mobile-first):

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 20px;
}

.sidebar {
  padding: 20px;
  background-color: #f5f5f5;
}

ثم أضف استعلام وسائط (media query) لإنشاء تخطيط جنبًا إلى جنب على الشاشات الأكبر:

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .content {
    flex: 3;
  }
  
  .sidebar {
    flex: 1;
  }
}

هذا ينشئ تخطيطاً متجاوباً يتراكم عمودياً على الأجهزة المحمولة ويظهر جنباً إلى جنب على الشاشات الأكبر.

التحدي

سهل

لقد تم تزويدك بتخطيط "Sidebar + Content" متجاوب مصمم بنهج "mobile-first".

مهمتك:

اجعل الشريط الجانبي يظهر على الجانب الأيمن من المحتوى على الشاشات التي يزيد عرضها عن "768px".
في الشاشات الأكبر، امنح منطقة المحتوى "70% width" والشريط الجانبي "30% width".

ورقة مرجعية

يستخدم تخطيط الشريط الجانبي + المحتوى (Sidebar + Content) تقنية flexbox لإنشاء نمط متجاوب مع منطقة محتوى رئيسية وشريط جانبي.

هيكل HTML الأساسي:

<div class="container">
  <main class="content">Main content here</main>
  <aside class="sidebar">Sidebar content here</aside>
</div>

نهج CSS المعتمد على الهاتف المحمول أولاً (Mobile-first):

.container {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  padding: 20px;
}

.sidebar {
  padding: 20px;
  background-color: #f5f5f5;
}

استعلام الوسائط (Media query) للشاشات الأكبر:

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .content {
    flex: 3;
  }
  
  .sidebar {
    flex: 1;
  }
}

يؤدي هذا إلى إنشاء تخطيط يتراكم عمودياً على الهاتف المحمول ويُعرض جنباً إلى جنب على الشاشات الأكبر.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Sidebar + Content Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1.6;
      background: #f5f7fa;
      color: #333;
    }

    .container {
      display: flex;
      flex-direction: column;
      max-width: 1100px;
      margin: 40px auto;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .content {
      padding: 25px;
    }

    .content h2 {
      color: #2a6592;
      margin-bottom: 15px;
    }

    .content p {
      margin-bottom: 1em;
    }
    
    .sidebar {
      padding: 25px;
      background-color: #eaf3fa;
      border-left: 3px solid #2a6592;
    }
    
    .sidebar h3 {
      margin-bottom: 15px;
      color: #2a6592;
    }

    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }

    .sidebar li {
      margin: 10px 0;
    }

    .sidebar a {
      text-decoration: none;
      color: #2a6592;
      font-weight: 500;
      transition: color 0.2s;
    }

    .sidebar a:hover {
      color: #17405d;
    }

    @media (min-width: 768px) {

    }
  </style>
</head>
<body>
  <div class="container">
    <main class="content">
      <h2>Exploring Italy: A Travel Story</h2>
      <p>Italy is a country full of culture, history, and delicious food. From the romantic canals of Venice to the ancient ruins of Rome, every corner tells a story.</p>
      <p>During my trip, I explored Florence’s Renaissance art, enjoyed authentic pizza in Naples, and relaxed on the beautiful Amalfi Coast. Each city offered something unique and unforgettable.</p>
      <p>If you’re planning a trip, I recommend taking the time to explore both big cities and small villages. You’ll find hidden gems, welcoming locals, and memories that last forever.</p>
    </main>
    <aside class="sidebar">
      <h3>More Travel Guides</h3>
      <ul>
        <li><a href="#">Top 10 Things to Do in Rome</a></li>
        <li><a href="#">A Foodie’s Guide to Naples</a></li>
        <li><a href="#">Venice on a Budget</a></li>
        <li><a href="#">Best Beaches of Amalfi Coast</a></li>
      </ul>
    </aside>
  </div>
</body>
</html>