كيف اعمل لوحة جانبية في الصفحه HTML CSS ؟

كمال صالح2 · 18 يناير

مثال الصورة التالية:

Adnane Kadri · 18 يناير

لبناء قائمة جانبية قم أولا بتوصيف الهيكلة اللازمة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Sidebar Example</title>
</head>
<body class="side-opened">
  <div class="sidebar">
    <div class="logo">
      //
    </div>
    <ul class="nav-list">
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- المحتوى الرئيسي هنا -->
  </div>
</body>
</html>

ثم أعط العناصر الموصوفة التنسيقات اللازمة:

body {
  margin: 0;
}

.sidebar {
  height: 100vh;
  width: 250px;
  background-color: #333;
  position: fixed;
  left: 0;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.nav-list {
  list-style-type: none;
  padding: 0;
}

.nav-list li {
  padding: 10px;
  text-align: center;
}

.nav-list a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  display: block;
}

.content {
  padding: 16px;
}

body.side-opened .content{ 
  margin-left: 250px;
}

انتبه إلى أن العنصر content. يتم سحبه بـ 250 بكسل لما يكون الكلاس side-opened مسندا إلى عنصر body، ولذلك سيمكنك القيام بتبديل هذا الكلاس على عنصر body لفتح وإغلاق القائمة الجانبية. يمكن أن تسند هاته الوظيفة لزر معين.

Adnane Kadri · 18 يناير

بتاريخ 5 دقائق مضت قال كمال صالح محمد:

لم افهم كيف استاذي

ممكن التوضيح

أي جزء لم تفهمه بالضبط؟

كمال صالح2 · 18 يناير

بتاريخ 5 دقائق مضت قال Adnane Kadri:

لبناء قائمة جانبية قم أولا بتوصيف الهيكلة اللازمة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Sidebar Example</title>
</head>
<body class="side-opened">
  <div class="sidebar">
    <div class="logo">
      //
    </div>
    <ul class="nav-list">
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
      <li><a href="#">رابط</a></li>
    </ul>
  </div>
  <div class="content">
    <!-- المحتوى الرئيسي هنا -->
  </div>
</body>
</html>

ثم أعط العناصر الموصوفة التنسيقات اللازمة:

body {
  margin: 0;
}

.sidebar {
  height: 100vh;
  width: 250px;
  background-color: #333;
  position: fixed;
  left: 0;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.nav-list {
  list-style-type: none;
  padding: 0;
}

.nav-list li {
  padding: 10px;
  text-align: center;
}

.nav-list a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  display: block;
}

.content {
  padding: 16px;
}

body.side-opened .content{ 
  margin-left: 250px;
}

انتبه إلى أن العنصر content. يتم سحبه بـ 250 بكسل لما يكون الكلاس side-opened مسندا إلى عنصر body، ولذلك سيمكنك القيام بتبديل هذا الكلاس على عنصر body لفتح وإغلاق القائمة الجانبية. يمكن أن تسند هاته الوظيفة لزر معين.

لم افهم كيف استاذي

ممكن التوضيح

كمال صالح2 · 18 يناير

بتاريخ 1 دقيقة مضت قال Adnane Kadri:

أي جزء لم تفهمه بالضبط؟

كامل

Adnane Kadri · 18 يناير

بتاريخ 14 دقائق مضت قال كمال صالح محمد:

كامل

الشيفرة عبارة عن هيكلة HTML باستخدام وسوم HTML العادية وقواعد CSS العادية.
بالنسبة للجزء الذي يخص عرض حاوية المحتوى، فهو مجرد تنسيق لها في حالتين:

لما تكون القائمة الجانبية مفتوحة، يعطى لها هامش جانبي بقيمة 250 بكسل لأن القائمة تكون مفتوحة في هذا المكان.
لما تكون القائمة معلقة، يعطى لها هامش جانبي بقيمة 0 بكسل لأن القائمة مغلقة ولا داعي لسحب المحتوى بـ 250 بكسل.

كيف اعمل لوحة جانبية في الصفحه HTML CSS ؟

السؤال

كمال صالح2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

كمال صالح2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

كمال صالح2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية