W3.CSS نقدم جميع أنواع لأشرطة التنقل:
عمودي:
أفقي (العمودي على الشاشات الصغيرة):
الإنتقال الأساسية
الطبقة W3-نافبار يخلق شريط التنقل الأفقي:
مثال
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> انها محاولة لنفسك » أشرطة ملونة للملاحة
مثال
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> انها محاولة لنفسك » البارات تحدها الإنتقال
مثال
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> انها محاولة لنفسك » نشط / وصلة الحالي
مثال
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> انها محاولة لنفسك » روابط Hoverable
عند الماوس فوق الروابط داخل شريط التنقل، وتغيير لون الخلفية إلى اللون الرمادي.
إذا كنت ترغب في لون خلفية مختلفة على التحويم، استخدام أي من طبقات اللون-W3 hover-، وإذا كنت ترغب في لون النص مختلفة على التحويم، استخدم أي من الفئات W3-تحوم-لون النص:
مثال
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> انها محاولة لنفسك » روابط الانحياز بزر الماوس الأيمن
مثال
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> انها محاولة لنفسك » شريط التنقل الحجم
تغيير حجم الخط:
مثال
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> انها محاولة لنفسك » تغيير الحشو:
مثال
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> انها محاولة لنفسك » تخصيص عرض عناصر القائمة مع الخاصية عرض CSS (ملاحظة: على الشاشات الأصغر حجما، فإنها ستحول إلى 100٪):
مثال
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> انها محاولة لنفسك » شريط الملاحة مع الأيقونات
مثال
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> انها محاولة لنفسك » شريط الملاحة مع منسدلة
تحريك الماوس فوق الارتباط "منسدلة":
مثال
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> انها محاولة لنفسك » ملاحظة: عندما القائمة المنسدلة هي "فتح"، على الرابط المنسدلة يحصل على لون الخلفية الرمادية للإشارة إلى أنه غير نشط. لتجاوز هذا، إضافة فئة اللون W3 hover- إلى كل من "القائمة المنسدلة" <li> وو<A>:
نصيحة: إذا كنت ترغب في رمز القائمة المنسدلة بجانب النص المنسدلة، إضافة رمز مناسب (مثل ):
مثال
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> انها محاولة لنفسك » استخدام W3-المنسدلة، انقر إذا كنت تفضل بالنقر على رابط المنسدلة بدلا من تحوم:
مثال
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> انها محاولة لنفسك » ثابت بار الإنتقال
لإجبار شريط التنقل للبقاء في أعلى أو أسفل الصفحة، حتى عندما تمرير المستخدم في الصفحة، والتفاف على <div> العنصر حول <UL> وإضافة W3-أعلى أو فئة W3-أسفل:
انهيار شريط الملاحة
عندما يأخذ شريط التنقل مساحة كبيرة على الشاشة الصغيرة، وكنت لا ترغب في عرضه عموديا بشكل افتراضي، يمكنك استخدام الطبقات أداة لإخفاء وإظهار روابط محددة في شريط التنقل.
في المثال التالي، يتم استبدال شريط التنقل مع زر (☰) في الزاوية اليمنى العليا عندما تظهر على أقراص والأجهزة النقالة. عند النقر فوق الزر، وسوف يتم عرض شريط التنقل عموديا:
مثال
انها محاولة لنفسك »Topnav
مثال آخر على شريط التنقل، هو الطبقة W3-topnav. وهو مشابه لW3-نافبار، إلا أنه سيضيف تسطير عندما كنت تحوم فوق الروابط، بدلا من لون الخلفية:
مثال
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> انها محاولة لنفسك » المثال مع الخط الأيقونات ممتاز
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> انها محاولة لنفسك » الإنتقال الجانب
الطبقة W3-sidenav يخلق شريط التنقل العمودي:
انتقل إلى الفصل التالي لمعرفة المزيد عن التنقل الموجود على الجانب.