CSS

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

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

التاريخ

16 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2092

المواضيع

24
الشروحات chevron_left CSS Navigation Bar chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

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

CSS Vertical Navigation Bar

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

CSS Horizontal Navigation Bar

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

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

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

Result

جربها بنفسك chevron_right

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

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;
}
مصطلحات الدرس
Navigation Bar
Navigation Bar

شريط تنقل

List of Links
List of Links

قائمة الروابط

Links
Links

روابط

Elements
Elements

عناصر

Test
Test

إختبار

Remove
Remove

حذف

Bullets
Bullets

نقاط

None
None

لاشئ

List
List

قائمة

Type
Type

نوع

Style
Style

نمط أو شكل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
Href
Href

Hypertext Reference

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.