CSS Vertical Navigation Bar
شريط التنقل العمودي في لغة CSS
ستتعلم في هذا الدرس كيفية عمل أشرطة التنقل العمودية في لغة CSS وعمل تأثيرات مثل الخلفيات والألوان واتغيير المظهر مع تمرير زر mouse أعلي عناصر شريط التنقل.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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 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
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
