شريط التنقل CSS
العرض التوضيحي: أشرطة التنقل
أشرطة التنقل
يعد التنقل السهل الاستخدام أمرًا مهمًا لأي موقع ويب.
باستخدام CSS ، يمكنك تحويل قوائم HTML المملة إلى أشرطة تنقل جيدة المظهر.
شريط التنقل = قائمة الروابط
يحتاج شريط التنقل إلى HTML قياسي كقاعدة.
في أمثلةنا ، سنبني شريط التنقل من قائمة HTML القياسية.
شريط التنقل هو في الأساس قائمة من الروابط ، لذا فإن استخدام <ul> و <li> يعتبر أمرًا منطقيًا تمامًا:
مثال
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
لنقم الآن بإزالة الرموز النقطية والهوامش والحشو من القائمة:
مثال
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
شرح المثال:
list-style-type: none;
- يزيل الرصاص. لا يحتاج شريط التنقل إلى علامات القائمة- تعيين
margin: 0;
وإزالةpadding: 0;
الإعدادات الافتراضية للمتصفح
الكود في المثال أعلاه هو الكود القياسي المستخدم في كل من أشرطة التنقل الرأسية والأفقية ، والتي ستتعلم المزيد عنها في الفصول التالية.