انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 69
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,878
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

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.

HTML 
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.

HTML 
.active
{
background:#007bff;
color:white;
}
جرّب بنفسك

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

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

جرّب بنفسك

CSS vertical navigation center links

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

HTML 
ul a
{
border:solid 1px white;
padding:8px 16px;
display: block;
text-decoration: none;
background:#ecf0f1;
color:black;
text-align:center;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات22

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 22 مفهومةأول بطاقة، أول خطوة
01 Vertical عمودي
للمراجعة
02 Navigation Bar شريط تنقل
للمراجعة
03 Properties خصائص
للمراجعة
04 List قائمة
للمراجعة
05 Style نمط أو شكل
للمراجعة
06 Link رابط
للمراجعة
07 Display شاشة
للمراجعة
08 Block كتلة
للمراجعة
09 Inline مضمن
للمراجعة
10 Clickable قابل للضغط
للمراجعة
11 Padding حشو
للمراجعة
12 Margin هامش
للمراجعة
13 More مزيد
للمراجعة
14 Width عرض
للمراجعة
15 Links روابط
للمراجعة
16 Active نشط / فعال
للمراجعة
17 Current Link الرابط الحالي
للمراجعة
18 Class فئة
للمراجعة
19 Center في المنتصف
للمراجعة
20 Borders حدود
للمراجعة
21 Add إضافة
للمراجعة
22 Property خاصية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة
03 Set Set
Setting
ضبط
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

خاصية ............تمكننا من اضافة padding و margin وضبط الطول والعرض علي ال link.

02

مساحة ال display block في الوضع الافتراضي يملئ عرض الشاشة بالكامل.؟