أشرطة التنقل W3.CSS
رأسي:
أفقي:
فئات شريط التنقل W3.CSS
يوفر W3.CSS الفئات التالية لأشرطة التنقل:
| فصل | يعرّف |
|---|---|
| w3- بار | حاوية أفقية لعناصر HTML |
| w3- شريط بلوك | حاوية عمودية لعناصر HTML |
| w3- شريط البند | عناصر شريط الحاوية |
| w3- الشريط الجانبي | الشريط الجانبي العمودي لعناصر HTML |
| w3 موبايل | يجعل أي عنصر شريطي يستجيب أولاً للجوّال |
| w3- المنسدلة-تحوم | عنصر القائمة المنسدلة القابل للتحويم |
| w3- انقر فوق القائمة المنسدلة | عنصر القائمة المنسدلة القابل للنقر (بدلاً من التمرير) |
التنقل الأساسي
فئة w3-bar عبارة عن حاوية لعرض عناصر HTML أفقيًا.
تحدد فئة w3-bar-item عناصر الحاوية.
إنها أداة مثالية لإنشاء أشرطة التنقل:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
التنقل المستجيب
تجعل فئة w3-mobile أي عناصر شريطية تستجيب (أفقيًا على الشاشات الكبيرة وعموديًا على صغير).
الشاشات المتوسطة والكبيرة:
الشاشات الصغيرة:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
أشرطة التنقل الملونة
استخدم فئة w3-color لإضافة لون إلى شريط التنقل:
مثال
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
أشرطة التنقل ذات الحدود
استخدم فئة w3-border أو w3-card لإضافة حدود حول شريط التنقل ، أو لعرضها كبطاقة:
مثال
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
نشط / الارتباط الحالي
أضف فئة ألوان w3 إلى ارتباط لتمييزه:
مثال
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
روابط قابلة للتحويم
عند تحريك الماوس فوق أحد الأزرار ، سيتغير لون الخلفية إلى اللون الرمادي.
إذا كنت تريد لون خلفية مختلفًا عند التمرير ، فاستخدم أيًا من فئات ألوان w3-hover- :
مثال
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
إذا كنت تريد تغيير لون النص بدلاً من ذلك ، فقم بإيقاف تشغيل تأثير التمرير الافتراضي باستخدام فئة w3-hover-none ، وأضف فئة نص w3-hover-text .
مثال
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
اقض بعض الوقت للتلاعب بتأثيرات التمرير المختلفة:
مثال
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
روابط يمين محاذاة
استخدم فئة w3-right على عنصر قائمة لمحاذاة ارتباط معين إلى اليمين:
مثال
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
حجم شريط التنقل
استخدم فئة w3-size لتغيير حجم خط الروابط داخل شريط التنقل:
مثال
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
استخدم فئة w3-padding لتغيير المساحة المتروكة لكل رابط داخل شريط التنقل:
مثال
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
ملاحظة: يمكنك أيضًا إضافة المساحة المتروكة إلى شريط التنقل ، بدلاً من كل زر. ومع ذلك ، إذا قمت بذلك ، فلاحظ أن الروابط لا تحصل على مساحة متروكة كاملة عند التمرير:
مثال
<div class="w3-bar w3-green w3-padding-16"></div>
تخصيص عرض الروابط باستخدام خاصية عرض CSS
( ملاحظة : استخدم w3-mobile لتحويل الروابط إلى عرض 100٪ على الشاشات الصغيرة):
مثال
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
شريط التنقل مع الرموز
مثال
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
تعرض فئات "fa fa" في المثال أعلاه رموز "Font Awesome".
تعرف على المزيد حول كيفية عرض الرموز في الفصل W3.CSS Icons .
نص شريط التنقل
إذا كنت تريد نصًا بدلاً من الأزرار داخل شريط التنقل ، فاستخدم فئة عنصر w3-bar-item للحصول على نفس المساحة المتروكة مثل الأزرار.
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Navbar مع المدخلات والأزرار
مثال
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
شريط التنقل مع القائمة المنسدلة
حرك الماوس فوق رابط "القائمة المنسدلة":
مثال
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
قائمة منسدلة قابلة للنقر
استخدم الضغط المنسدل w3 إذا كنت تفضل النقر فوق ارتباط القائمة المنسدلة بدلاً من التمرير:
مثال
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
قائمة أفقية منسدلة
قم بإزالة فئة w3-bar-block من الحاوية المنسدلة إذا كنت تريد عرض الروابط المنسدلة أفقيًا وليس رأسيًا:
مثال
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
شريط التنقل المستجيب مع قائمة منسدلة مستجيبة
استخدم فئة w3-mobile على جميع الروابط بما في ذلك الحاوية المنسدلة لإنشاء شريط تنقل سريع الاستجابة مع روابط قائمة منسدلة سريعة الاستجابة.
قم بتغيير حجم نافذة المتصفح لرؤية التأثير:
مثال
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.