ما هو شريط التنقل CSS؟
في CSS، يُعرف شريط التنقل أيضًا باسم شريط التنقل المستخدم في الواجهة لتوفير روابط التنقل أو القوائم لمختلف المحددات أو مستخدمي الصفحة في تصميم موقع الويب. يمكن للمستخدمين التنقل بسهولة في محتوى موقع الويب باستخدامه كدليل مرئي.
اجتياز ما بعد الطلب للشجرة الثنائية
بمساعدة شريط التنقل، يمكننا تحسين العرض التقديمي وتصميم صفحة الويب، ويتضمن أيضًا التصميم والألوان والخطوط والمسافات الموضحة باستخدام CSS. تم تطوير شريط التنقل في CSS وتصميمه باستخدام خصائص وقواعد CSS لإنتاج مظهر ووظيفة معينة.
خصائص شريط التنقل CSS
بعض خصائص شريط التنقل هي كما يلي:
بمساعدة شريط التنقل CSS، يمكننا تحسين تجربة المستخدم وتسهيل تنقل الزائرين لمحتوى موقع الويب، لذلك فهو جزء مهم من تصميم الويب.
مثال
لنأخذ مثالاً بسيطًا لكيفية إنشاء شريط تنقل أفقي باستخدام CSS:
/* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> انتاج:
يتم إنشاء خمسة روابط في شريط التنقل الأفقي لهذا المثال: 'الصفحة الرئيسية'، و'حول'، و'الخدمات'، و'المحفظة'، و'جهة الاتصال'. لقد استخدمنا خصائص CSS الأساسية لتصميم شريط التنقل والروابط وتأثيرات التمرير. يمكن أن ينعكس التصميم المفضل لديك في الألوان والخطوط والحشو والأنماط الأخرى.
حدود شريط التنقل CSS
هناك بعض القيود على شريط التنقل في CSS، وبعضها كما يلي:
على الرغم من هذه العيوب، لا يزال تنوع أشرطة التنقل CSS واستخدامها على نطاق واسع في تصميم الويب مستمرًا. ومع ذلك، قد تحتاج إلى استكمالها بـ JavaScript وتقنيات أخرى للحصول على ميزات أكثر تعقيدًا وتجربة مستخدم سلسة.
شريط التنقل الأفقي
شريط التنقل الأفقي عبارة عن قائمة أفقية من الروابط، والتي توجد بشكل عام في أعلى الصفحة.
دعونا نرى كيفية إنشاء شريط تنقل أفقي باستخدام مثال.
مثال
في هذا المثال، نقوم بإضافة إخفاء الفائض الخاصية التي تمنع الذي - التي عناصر من الخروج من القائمة، العرض محجوب تعرض الخاصية الروابط كعناصر الكتلة وتجعل منطقة الارتباط بأكملها قابلة للنقر عليها.
سلسلة جافا فهرس
نحن نضيف أيضًا تعويم: اليسار الخاصية، والتي تستخدم الطفو لجعل عناصر الكتلة تنزلق بجانب بعضها البعض.
إذا أردنا لون الخلفية بالعرض الكامل، فعلينا إضافة لون الخلفية الملكية ل بدلا من عنصر.
لين السلسلة في جافا
ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> فواصل الحدود
يمكننا إضافة الحدود بين الروابط في شريط التنقل باستخدام الحدود اليمنى ملكية. المثال التالي يشرح ذلك بشكل أكثر وضوحا.
مثال
ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> أشرطة التنقل الثابتة
عندما نقوم بتمرير الصفحة، تظل أشرطة التنقل الثابتة في أسفل الصفحة أو أعلىها. انظر مثالا على ذلك.
مثال
ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3> اختبره الآن