شرح وأمثلة عن الـ Sidebar و Navbar باستخدام HTML وCSS

Amro Atef Awad · 1 يونيو 2023

لم افهم جيدا ما هو sidebar و navbar هل هناك المزيد من الشرح المبسط مع صورة لتوضيح اجزاء الصفحة الموضحة واماكنها

تم التعديل في 1 يونيو 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

أسامة زيادة · 1 يونيو 2023

"Navbar"، وهي الشريط العلوي الذي يتواجد عادة في الجزء العلوي من الصفحة. يحتوي Navbar على عناصر تنقل تساعد المستخدمين على التنقل بين صفحات الموقع. يشمل ذلك عادة الروابط الرئيسية مثل "الصفحة الرئيسية"، "الخدمات"، "المنتجات"، "عن الشركة" وما إلى ذلك. يمكن أن يحتوي Navbar أيضًا على عناصر أخرى مثل الشعار الخاص بالموقع وأزرار الاتصال.

أما بالنسبة لـ "Sidebar"، فهو الشريط الجانبي الذي يعرض عادة على الجانب الأيسر أو الأيمن من الصفحة. يستخدم الـ Sidebar لعرض محتوى إضافي أو لوحة تحكم للمستخدم. يمكن أن تتضمن العناصر الموجودة في Sidebar روابط فرعية أو أزرار تنقل إلى صفحات فرعية أو محتوى ذو صلة بالصفحة الحالية. يمكن أيضًا استخدام Sidebar لعرض أدوات أو قوائم متعددة.

محمد Fahmy · 1 يونيو 2023

سأحاول شرح ذلك بأسلوب سهل ومبسط.

الـ Sidebar هو الشريط الجانبي في صفحة الويب.

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

بالنسبة للصورة التوضيحية.

Adnane Kadri · 1 يونيو 2023

هي وسوم دلالية في HTML يعبر كل منها على ما يعنيه الاسم نفسه، فـ sidebar يشير الى العنصر الذي يفترض ان يكون قائمة جانبية، في حين ان navbar يفترض أن يكون شريط تصفح فهو اختصار navigation bar.

تسمى الهيكلة بواسطة الوسوم التي هي مثلهما في HTML بالهيكلة الدلالية semantic HTML.

استعمالات sidebar:

يُستخدم الـ sidebar غالبًا لعرض قوائم التنقل الجانبية والاختصارات إلى الصفحات أو المحتوى الفرعي.
قد يحتوي الـ sidebar على أيقونات لتمكين أو تعطيل ميزات معينة أو إظهار معلومات إضافية.
قد يظهر الـ sidebar في جميع الصفحات أو يتم إظهاره فقط في صفحات محددة.

استعمالات Navbar:

يُستخدم الـ navbar عادةً لعرض شعار الموقع وقائمة التنقل الرئيسية للموقع.
يوفر الـ navbar أيضًا وسيلة للتنقل بين صفحات الموقع والانتقال إلى أقسام محددة.
عند التمرير على الصفحة، قد يظل الـ navbar مرئيًا في الجزء العلوي للمساعدة في التنقل السريع.

وهذا بشكل عام، ان كان سؤالك يختص بمكون ما في دورة ما يرجى اضافة تعليق أسفل فيديو الدرس الذي تواجه به المشكلة.

Mustafa Suleiman · 1 يونيو 2023

سأشرح لك بواسطة الكود ليتضح لك الأمر:

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

مثال بسيط باستخدام HTML و CSS لإنشاء Sidebar:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* ستايل للسايدبار */
    .sidebar {
      width: 200px;
      background-color: #f1f1f1;
      padding: 10px;
    }
    
    /* ستايل لروابط السايدبار */
    .sidebar a {
      display: block;
      margin-bottom: 10px;
      text-decoration: none;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <a href="#">الصفحة الرئيسية</a>
    <a href="#">الملف الشخصي</a>
    <a href="#">الإعدادات</a>
    <a href="#">تسجيل الخروج</a>
  </div>
</body>
</html>

في الكود لدينا عنصر <div> يحمل الصنف (class) "sidebar" يمثل الـ Sidebar. نستخدم CSS لتعيين العرض ولون الخلفية والتباعد الداخلي (padding) للسايدبار، وكذلك لتنسيق روابطه.

أما الـ Navbar هو القائمة العلوية للموقع، وفي العادة ما يتم وضعها في أعلى الصفحة وتحتوي على روابط وأزرار للانتقال بين الصفحات الرئيسية للموقع أو الأقسام المختلفة، وقد يتم تصميم الـ Navbar ليكون ثابتًا في الأعلى عند التمرير (sticky) أو ليظهر/يختفي عند الحاجة.

مثال:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* ستايل للنافبار */
    .navbar {
      background-color: #f1f1f1;
      overflow: hidden;
    }
    
    /* ستايل لروابط النافبار */
    .navbar a {
      float: left;
      display: block;
      color: #333;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <a href="#">الصفحة الرئيسية</a>
    <a href="#">المقالات</a>
    <a href="#">المنتدى</a>
    <a href="#">الاتصال</a>
  </div>
</body>
</html>

عنصر <div> يحمل الصنف (class) "navbar" يمثل الـ Navbar، ونستخدم CSS لتعيين لون الخلفية وخاصية الـ overflow للنافبار. كما نستخدم CSS أيضًا لتنسيق روابط النافبار وتحديد توضعها بواسطة خاصية الـ float وتحديد التباعد الداخلي (padding) وغيرها من الخصائص.

وسأقوم بدمج الكود وإضافة وظيفة لجعل الـ Sidebar قابلة للغلق والفتح، حيث استخدمت لغة الـ JavaScript لتحقيق هذه الوظيفة، وتستطيع يمكنك نسخ كود HTML التالي واختباره في متصفحك:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* ستايل النافبار */
    .navbar {
      background-color: #333;
      overflow: hidden;
    }
    
    /* ستايل روابط النافبار */
    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    
    /* ستايل روابط النافبار عند التحويم عليها */
    .navbar a:hover {
      background-color: #ddd;
      color: #333;
    }
    
    /* ستايل السايدبار */
    .sidebar {
      width: 200px;
      background-color: #f1f1f1;
      padding: 10px;
      transition: width 0.3s ease;
      position: fixed;
      height: 100%;
      overflow-y: auto;
      z-index: 1;
    }
    
    /* ستايل روابط السايدبار */
    .sidebar a {
      display: block;
      padding: 12px;
      text-decoration: none;
      color: #333;
      transition: background-color 0.3s ease;
    }
    
    /* ستايل روابط السايدبار عند التحويم عليها */
    .sidebar a:hover {
      background-color: #ddd;
      color: #333;
    }
    
    /* ستايل زر الفتح/الغلق */
    .toggle-btn {
      display: inline-block;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
      color: #333;
	  background-color: #eee;
	  padding: 5px;
	  
    }
    
    /* ستايل الصفحة */
    .content {
      margin-left: 250px;
      padding: 16px;
      transition: margin-left 0.3s ease;
    }
    
    /* إخفاء القائمة الجانبية */
	.sidebar-closed{
		display: none
	}
  </style>
  <script>
    // تعريف وظيفة toggleSidebar() باستخدام ES6
    const toggleSidebar = () => {
      const sidebar = document.getElementById("sidebar");
      
      sidebar.classList.toggle("sidebar-closed");
    }
  </script>
</head>
<body>
  <div class="navbar">
    <a href="#">الصفحة الرئيسية</a>
    <a href="#">المقالات</a>
    <a href="#">المنتدى</a>
    <a href="#">الاتصال</a>
  </div>
  
  <div id="sidebar" class="sidebar">
 
    <a href="#">الصفحة الرئيسية</a>
    <a href="#">الملف الشخصي</a>
    <a href="#">الإعدادات</a>
    <a href="#">تسجيل الخروج</a>
  </div>
  
  <div id="content" class="content">
    <h2>محتوى الصفحة</h2>
    <p>هذا محتوى الصفحة الرئيسية.</p>
	     <div class="toggle-btn" onclick="toggleSidebar()">زر فتح وإغلاق القائمة الجانبية</div>

  </div>
</body>
</html>

والنتيجة هي:

شرح وأمثلة عن الـ Sidebar و Navbar باستخدام HTML وCSS

السؤال

Amro Atef Awad

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

Recommended Posts

أسامة زيادة

محمد Fahmy

Adnane Kadri

Mustafa Suleiman

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية