W3.CSS navigatsiya
Navigatsiya panellari foydalanuvchilarga veb-saytning sahifalari va bo‘limlari o‘rtasida harakatlanishga yordam beradi.
W3.CSS gorizontal, moslashuvchan va vertikal navigatsiya yaratishni osonlashtiradi.
Vertikal:
Gorizontal:
W3.CSS navigatsiya paneli klasslari
W3.CSS navigatsiya panellari uchun quyidagi klasslarni taqdim etadi:
| Klass | Vazifasi |
|---|---|
w3-bar |
HTML elementlari uchun gorizontal konteyner |
w3-bar-block |
HTML elementlari uchun vertikal konteyner |
w3-bar-item |
Bar ichidagi elementlar |
w3-sidebar |
HTML elementlari uchun vertikal yon panel |
w3-mobile |
Istalgan bar elementini mobile-first tamoyili asosida moslashuvchan qiladi |
w3-dropdown-hover |
Hover’da ochiladigan dropdown elementi |
w3-dropdown-click |
Bosilganda ochiladigan dropdown elementi (hover o‘rniga) |
Oddiy navigatsiya
w3-bar klassi HTML elementlarini gorizontal ko‘rsatish uchun mo‘ljallangan konteyner.
w3-bar-item klassi konteyner ichidagi elementlarni belgilaydi.
Bu navigatsiya panellarini yaratish uchun ajoyib vosita:
Misol
<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>
Eslatma
w3-bar klassi aynan navigatsiya panellari va asboblar panellari uchun mo‘ljallangan.
Yanada egiluvchan maketlar uchun w3-flex klassidan ham foydalanishingiz mumkin.
Flexbox oraliqlar, tekislash va moslashuvchan xatti-harakat ustidan ko‘proq nazorat beradi.
Moslashuvchan navigatsiya
w3-mobile klassi istalgan bar elementlarini moslashuvchan qiladi (katta ekranlarda gorizontal, kichik ekranlarda vertikal).
O‘rta va katta ekranlar:
Kichik ekranlar:
Misol
<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>
Rangli navigatsiya panellari
Navigatsiya paneliga rang berish uchun w3-color klassidan foydalaning:
Misol
<div class="w3-bar w3-light-grey">
<div class="w3-bar w3-green">
<div class="w3-bar w3-blue">
O‘zingiz sinab ko‘ring »
Chegarali navigatsiya panellari
Navigatsiya paneli atrofiga chegara qo‘shish yoki uni kartochka ko‘rinishida ko‘rsatish uchun w3-border yoki w3-card klassidan foydalaning:
Misol
<div class="w3-bar w3-border w3-light-grey">
<div class="w3-bar w3-border w3-card-4">
O‘zingiz sinab ko‘ring »
Faol/joriy havola
Havolani ajratib ko‘rsatish uchun unga w3-color klassini qo‘shing:
Misol
<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>
Hover effektli havolalar
Sichqonchani tugma ustiga olib borganingizda fon rangi kulrangga o‘zgaradi.
Hover holatida boshqa fon rangi bo‘lishini istasangiz, istalgan w3-hover-color klassidan foydalaning:
Misol
<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>
Agar buning o‘rniga matn rangini o‘zgartirmoqchi bo‘lsangiz, standart hover effektini w3-hover-none klassi bilan o‘chiring va w3-hover-text klassini qo‘shing.
Misol
<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>
Turli hover effektlari bilan tajriba qilib ko‘ring:
Misol
<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>
Qatoriy menyu
Misol
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">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>
</div>
O‘ngga tekislangan havolalar
Muayyan havolani o‘ngga tekislash uchun ro‘yxat elementida w3-right klassidan foydalaning:
Misol
<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>
Navigatsiya paneli o‘lchami
Navigatsiya paneli ichidagi havolalarning shrift o‘lchamini o‘zgartirish uchun w3-size klassidan foydalaning:
Misol
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Navigatsiya paneli ichidagi har bir havolaning ichki bo‘shlig‘ini o‘zgartirish uchun w3-padding klassidan foydalaning:
Misol
<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>
Eslatma: Ichki bo‘shliqni har bir tugmaga emas, balki navigatsiya paneliga ham qo‘shishingiz mumkin. Biroq bunday qilsangiz, hover holatida havolalar to‘liq ichki bo‘shliqqa ega bo‘lmasligini hisobga oling:
Havolalar kengligini CSS width xususiyati yordamida sozlang
(Eslatma: kichik ekranlarda havolalarni 100% kenglikka o‘tkazish uchun w3-mobile klassidan foydalaning):
Misol
<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>
O‘zingiz sinab ko‘ring »
Ikonkali navigatsiya paneli
Misol
<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>
O‘zingiz sinab ko‘ring »
Yuqoridagi misoldagi "fa fa" klasslari "Font Awesome" ikonkalarini ko‘rsatadi.
Ikonkalarni ko‘rsatish haqida W3.CSS ikonkalari bobida batafsil bilib oling.
Navigatsiya panelidagi matn
Navigatsiya panelida tugmalar o‘rniga matn bo‘lishini istasangiz, tugmalar bilan bir xil ichki bo‘shliqqa ega bo‘lish uchun w3-bar-item klassidan foydalaning.
Misol
<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>
O‘zingiz sinab ko‘ring »
Kiritish maydonlari va tugmalarga ega navigatsiya paneli
Misol
<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>
O‘zingiz sinab ko‘ring »
Dropdown’li navigatsiya paneli
Sichqonchani "Dropdown" havolasi ustiga olib boring:
Misol
<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>
O‘zingiz sinab ko‘ring »
Eslatma: Dropdown menyu "ochiq" bo‘lganda, dropdown havolasi faol ekanini ko‘rsatish uchun kulrang fon rangini oladi. Buni o‘zgartirish uchun "dropdown" konteyneriga ham, tugmaga ham w3-hover-color klassini qo‘shing:
Maslahat: Dropdown matni yonida dropdown belgisi bo‘lishini istasangiz, mos ikonka qo‘shing (masalan, ):
Misol
<div class="w3-dropdown-hover w3-hover-orange">
<button class="w3-button w3-hover-orange">Dropdown <i class="fa fa-caret-down"></i></button>
<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>
</div>
O‘zingiz sinab ko‘ring »
Bosilganda ochiladigan dropdown
Dropdown havolasini hover o‘rniga bosib ochishni afzal ko‘rsangiz, w3-dropdown-click klassidan foydalaning:
Misol
<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>
O‘zingiz sinab ko‘ring »
Gorizontal dropdown menyu
Dropdown havolalari vertikal emas, gorizontal ko‘rsatilishini istasangiz, dropdown konteyneridan w3-bar-block klassini olib tashlang:
Misol
<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>
O‘zingiz sinab ko‘ring »
Moslashuvchan dropdown’li moslashuvchan navigatsiya paneli
Moslashuvchan dropdown havolalariga ega moslashuvchan navigatsiya panelini yaratish uchun barcha havolalarda, jumladan dropdown konteynerida ham w3-mobile klassidan foydalaning.
Effektni ko‘rish uchun brauzer oynasining o‘lchamini o‘zgartiring:
Misol
<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>
O‘zingiz sinab ko‘ring »
Qotirilgan navigatsiya paneli
Foydalanuvchi sahifani aylantirganda ham navigatsiya paneli sahifaning yuqori yoki pastki qismida qolishi uchun bar atrofiga <div> elementini qo‘shing va unga w3-top yoki w3-bottom klassini bering:
Yuqorida qotirilgan
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Pastda qotirilgan
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
O‘zingiz sinab ko‘ring »
Vertikal navigatsiya paneli
w3-bar-block klassi HTML elementlarini vertikal ko‘rsatish uchun mo‘ljallangan konteyner.
Misol
<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>
O‘zingiz sinab ko‘ring »
Navigatsiya panelini yig‘ish
Navigatsiya paneli kichik ekranda juda ko‘p joy egallasa va uni standart holatda vertikal ko‘rsatishni istamasangiz, navigatsiya panelidagi muayyan havolalarda yashirish va ko‘rsatish klasslaridan foydalanishingiz mumkin.
Quyidagi misolda planshet va mobil qurilmalarda navigatsiya paneli yuqori o‘ng burchakdagi tugma (☰) bilan almashtiriladi. Tugma bosilganda navigatsiya panelidagi havolalar vertikal ravishda ustma-ust joylashadi:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!