يعد شريط التنقل (navbar) المصمم جيدًا والوظيفي أحد المكونات الرئيسية لأي موقع ويب. إنه بمثابة خريطة طريق للمستخدمين، حيث يساعدهم على التنقل عبر الصفحات المختلفة. يتم وضع شريط التنقل عادة في أعلى صفحة الويب، حيث يكون مرئيًا دائمًا للمستخدمين للوصول إلى الروابط الرئيسية. في هذه المقالة، سوف نستكشف كيفية إنشاء شريط تنقل CSS جذاب بصريًا وعمليًا باستخدام HTML وCSS. سنناقش أيضًا تقنيات مختلفة لضمان بقاء شريط التنقل في أعلى الصفحة.

يمكنك الاطلاع على عرض توضيحي مباشر لشريط التنقل هذا واستكشاف وظائفه من خلال زيارة المعاينة على CodePen.

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

تفكيك الكود
دعونا نلقي نظرة فاحصة على كيفية إنشاء شريط التنقل باستخدام HTML وCSS.

هيكل HTML

جزء HTML من الكود واضح ومباشر. يتكون من عنصر التنقل الذي يحتوي على ثلاثة مكونات رئيسية:

• الشعار (صورة)
• قائمة **قائمة ** تحتوي على روابط قابلة للنقر (الصفحة الرئيسية، معلومات عنا، اتصل بنا، مدونة)
• **زر ** يعمل بمثابة عبارة تحث المستخدم على اتخاذ إجراء (اتصل الآن)
• يتم تغليف البنية داخل عنصر يعمل كحاوية لشريط التنقل.

يتم إنشاء الشعار باستخدام علامة . القائمة عبارة عن قائمة غير مرتبة (

)

التصميم باستخدام CSS

يحدث السحر في قسم CSS، حيث نحدد تخطيط شريط التنقل ومظهره. دعونا نناقش بعض العناصر الأساسية.

الخلفية وتصميم الجسم
يتمتع الجسم بخلفية متدرجة تنتقل من اللون الأزرق (#2258c3) إلى اللون الوردي (#fd2df3). تم ضبط الارتفاع على 100vh (ارتفاع منفذ العرض)، مما يضمن أن الخلفية تملأ الشاشة بأكملها، وليس هناك هامش لتجنب المساحة غير المرغوب فيها حول الصفحة.

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

تصميم نافبار

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

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

إصلاح شريط التنقل إلى الأعلى

إحدى الوظائف الرئيسية لشريط التنقل هي البقاء في أعلى الصفحة أثناء التمرير. ولتحقيق ذلك نستخدم الموضع: الخاصية الثابتة. يسمح هذا لشريط التنقل بالبقاء ثابتًا في الجزء العلوي (top: 0) بغض النظر عن التمرير. بالإضافة إلى ذلك، يضمن مؤشر z: 9999 أن يكون شريط التنقل دائمًا فوق العناصر الأخرى في الصفحة.

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

عناصر القائمة والتفاعل

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

يؤدي تأثير التمرير على الروابط إلى تغيير اللون ليتناسب مع لون الخلفية الزرقاء (#2258c3)، مما يوفر إشارة مرئية إلى أن الرابط تفاعلي.

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

تصميم الزر

تم تصميم الزر بخلفية زرقاء (#2258c3)، ونص أبيض، وزوايا مستديرة (نصف قطر الحدود: 20 بكسل). عند التمرير، تتغير الخلفية إلى اللون الوردي (#fd2df3) لمطابقة التدرج في الخلفية.

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

كيفية إبقاء شريط التنقل في المقدمة دائمًا

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

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}