في الوضع الافتراضي تكون عناصر <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;
}

جربها بنفسك

معلومات تهمك

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

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

التالى

CLOSETAG

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

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

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