اشرطة التنقل هي عبارة عن أشرطة تنقل رأسية أو أشرطة تنقل أفقي وهي ضرورية لكل تطبيق ويب لكي يتم التنقل بين الصفحات يمكنك باستخدام لغة CSS تحويل قوائم HTML الي قوائم جيدة المظهر.

CSS Vertical Navigation Bar

أشرطة التنقل العمودية في لغة CSS.

CSS Horizontal Navigation Bar

أشرطة التنقل الأفقية في لغة CSS.

</> Cretae Navigation Barin HTML
إنشاء أشرطة التنقل بلغة HTML

لعمل شريط تنقل أفقي أو رأسي بلغة HTML يجب إستخدام عنصر <ul> لعمل حاوية القائمة وعنصر <li> بداخلة <a> لعمل روابط تنقل.

Result

جربها بنفسك

يظهر الكود بهذا الشكل على المتصفح

CSS navigation bar

إنشاء شريط تنقل في لغة CSS.

<ul>
  <li><a href="#default">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

جربها بنفسك

يتم إستخدام # بداخل ال href attribute لعمل test link ولكن في الوضع نشر موقع الويب نستخدم الروابط الفعلية.

</> CSS remove padding and bullets from Navigation
إزالة الهوامش الداخلية والعلامات من القوائم في لغة CSS

إزالة bullets علامات القوائم عن طريق خاصية list-style-type: none وإزالة الهوامش الداخلية من القائمة عن طريق خاصية padding في لغة CSS.

جربها بنفسك

CSS add border to navigation

إضافة إطار للقائمة بلغة CSS.

ul
{
border:gray solid 1px;
}

جربها بنفسك

CSS Remove Padding and bullets from Navigation

إزالة الهوامش وعلامات القوائم في لغة CSS.

ul
{
border:gray solid 1px;
list-style:none;
padding:0;
}

جربها بنفسك

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

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

CSS Navigation Bar
اشرطة التنقل في لغة CSS

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Navigation Bar CSS