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

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

التاريخ

16 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3418

المواضيع

التالى

50%

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

CSS Syntax keyboard_arrow_down

CSS Text keyboard_arrow_down

CSS Text Decoration keyboard_arrow_down

CSS Fonts keyboard_arrow_down

CSS Backgrounds keyboard_arrow_down

CSS Borders keyboard_arrow_down

CSS Outline keyboard_arrow_down

CSS Box Model keyboard_arrow_down

CSS Dimensions keyboard_arrow_down

CSS Position keyboard_arrow_down

CSS Style keyboard_arrow_down

CSS Navigation keyboard_arrow_down

CSS Grid System keyboard_arrow_down

CSS Grid Columns keyboard_arrow_down

CSS Grid rows keyboard_arrow_down

CSS Grid Area keyboard_arrow_down

CSS Grid Gaps keyboard_arrow_down

CSS Grid keyboard_arrow_down

CSS Responsive keyboard_arrow_down

CSS Text Effects keyboard_arrow_down

CSS Advanced keyboard_arrow_down

CSS Selectors 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;
}

جربها بنفسك

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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

CSS Vertical Navigation Bar

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

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

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

CSS vertical navigation with float

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

CSS create vertical navigation bar

CSS vertical navigation bar with hover

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

CSS vertical navigation active current link

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

CSS vertical navigation center links

معلومات تهمك

مشاركة

هل هذه المعلومات نالت إعجابك ؟

الشروحات

الدورات

قانوني

الدعم

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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

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

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

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

CSS vertical navigation with float

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

CSS create vertical navigation bar

CSS vertical navigation bar with hover

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

CSS vertical navigation active current link

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

CSS vertical navigation center links

معلومات تهمك

مشاركة

هل هذه المعلومات نالت إعجابك ؟

الشروحات

الدورات

قانوني

الدعم

حقوق النشر © 2023 CLOSETAG كل الحقوق محفوظة

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

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

CSS Vertical Navigation Bar

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

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

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

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

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

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