CSS

CSS Vertical Navigation Bar
شريط التنقل العمودي في لغة CSS

ستتعلم في هذا الدرس كيفية عمل أشرطة التنقل العمودية في لغة CSS وعمل تأثيرات مثل الخلفيات والألوان واتغيير المظهر مع تمرير زر mouse أعلي عناصر شريط التنقل.

التاريخ

16 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2967

المواضيع

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

CSS Vertical Navigation Bar
شريط التنقل العمودي في لغة CSS

</> CSS Vertical Navigation Bar
شريط التنقل العمودي في لغة CSS

يمكن بناء القوائم أو اشرطة التنقل عن طريق عنصر <ul> بداخلة <li> وروابط عن طريق عنصر <a> في لغة CSS.

</> CSS make vertical navigation float
تقليل حجم قائمة التنقل العمودية في لغة CSS.

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

CSS vertical navigation with float

تقليل حجم القائمة العمودية في لغة CSS.

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

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

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

CSS create vertical navigation bar

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

CSS vertical navigation bar with hover

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

</> CSS vertical navigation active current link
ضبط الصفحة الحالية للقائمة العمودية في لغة CSS

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

CSS vertical navigation active current link

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

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

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

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

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

عمودي

Navigation Bar
Navigation Bar

شريط تنقل

Properties
Properties

خصائص

List
List

قائمة

Style
Style

نمط أو شكل

Link
Link

رابط

Display
Display

شاشة

Block
Block

كتلة

Inline
Inline

مضمن

Clickable
Clickable

قابل للضغط

Margin
Margin

هامش

More
More

مزيد

Width
Width

عرض

Links
Links

روابط

Active
Active

نشط / فعال

Current Link
Current Link

الرابط الحالي

Class
Class

فئة

Center
Center

في المنتصف

Borders
Borders

حدود

Add
Add

إضافة

Property
Property

خاصية

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

Cascading Style Sheets

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

Hypertext Markup Language

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

Setting

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

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

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