CSS

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

ستتعلم في هذا الدرس انشاء قوائم افقية باستخدم ال HTML list مع مجموعة من ال CSS Properties

التاريخ

16 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2080

المواضيع

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

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

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

في الوضع الافتراضي تكون عناصر  <li> بطريقة عرض display:block وتكون أسفل بعضها لبعض ويمكن تغيير طريقة العرض عن طريق float:left أو عن طريق خاصية display:inline-block لتُصف عناصر <li> بجانب بعضها لبعض في لغة CSS لتتحول القائمة العمودية إلي قائمة أفقية.

</> CSS make horizontal navigation float
تقليل حجم قائمة التنقل الأفقية في لغة CSS.

تظهر قائمة أو شريط التنقل بملئ الشاشة لأن عنصر <ul> من النوع display:block فيجب أن يكون عرضة علي قدر المحتوي الداخلي فيجب علينا أن نستخدم display:inline-block أو flaot:left في لغة CSS.

CSS horizontal navigation with float

القائمة الأفقية مع تقليل حجم العرض في لغة CSS.

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

</> CSS create horizontal navigation bar
إنشاء قائمة أفقية في لغة CSS

عمل شكل للقائمة الأفقية وعمل خلفية للعناصر الداخلية في الوضع الثابت وعند تمرير مؤشر mouse علي كل عنصر في لغة CSS.

CSS create horizontal navigation bar

ضبط القائمة العمودية في لغة CSS.

CSS horizontal navigation bar with hover

تغيير الخلفية مع تمرير مؤشر mouse في لغة CSS.

</> CSS horizontal navigation active current link
ضبط الصفحة الحالية للقائمة الأفقية في لغة CSS

قم بإضافة active class لعمل link حالي داخل الصفحة ليعلم الزوار اي صفحة مفتوحة حالياً.

CSS horizontal navigation active current link

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

.active
{
background:#007bff;
color:white;
}

</> CSS horizontal navigation center links
توسيط النصوص داخل القائمة الأفقية في لغة CSS

عن طريق خاصية text-align:center يمكن توسيط النصوص داخل horizontal navigation القائمة الأفقية في لغة CSS.

CSS horizontal navigation center links

توسيط النصوص داخل القائمة العمودية في لغة CSS.

ul a
{
border:solid 1px white;
padding:8px 16px;
display: block;
text-decoration: none;
background:#ecf0f1;
color:black;
text-align:center;
}
مصطلحات الدرس
Navigation Bar
Navigation Bar

شريط تنقل

Properties
Properties

خصائص

List
List

قائمة

Inline
Inline

مضمن

Floating
Floating

تعويم

Items
Items

عناصر

Elements
Elements

عناصر

Display
Display

شاشة

Float
Float

عائم

Left
Left

يسار

Height
Height

ارتفاع

Width
Width

عرض

Margin
Margin

هامش

Active
Active

نشط / فعال

Current
Current

الحالي

Class
Class

فئة

Right
Right

يمين

Align
Align

محاذاة

Links
Links

روابط

Dividers
Dividers

تقسيمات

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

Cascading Style Sheets

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

Hypertext Markup Language

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

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

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