يعد Navbar أحد العناصر الأساسية في تصميم صفحات الويب، حيث يوفر وسيلة سهلة للمستخدمين للاطلاع على الروابط الرئيسية للموقع والتنقل بين الصفحات. في هذه المقالة، سنتعلم كيفية إنشاء Navbar بسيط باستخدام أكواد HTML وCSS.
خطوات إنشاء Navbar:
البنية الاساسية لـ HTML:
قم بإنشاء عنصر <nav> لتحتوي على شريط التنقل. داخل عنصر <nav> أنشئ قائمة <ul> لتحتوي على عناصر القائمة.
إنشاء عناصر القائمة:
داخل عنصر <ul> أنشئ عناصر القائمة <li> التي تحتوي على الروابط. قم بتعيين الروابط في عناصر القائمة باستخدام عناصر <a>.
النتيجة:
تنسيق Navbar باستخدام CSS:
قم بتخصيص navbar باستخدام أكواد CSS. قم بتعيين خصائص النص مثل اللون والخطوط والحجم. قم بتعيين خصائص الخلفية والهوامش (margin) والحواف (padding) لتنسيق الشريط.
النتيجة
تأثيرات الانيميشن:
يمكنك إضافة تأثيرات الانيميشن مثل تغيير لون الخلفية عند وقوف المؤشر فوق الروابط. استخدم خاصية :hover في CSS لتحقيق هذه التأثيرات.
النتيجة:
وبإمكانك ان تجعله سلسا أكثر (smooth) عبر اضافه الخاصية transition مثل الكود التالي:
حيث ان القيمة all تعبر عن كل الخصائص التي ستطبق عليها هذه الخاصية, وال 300ms تعبر عن الوقت المستغرق حتى اكتمال تطبيق الانيميشن حيث ان ال 300ms تعني 0.3 ثانية