Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Gorizontal navigatsiya paneli

ULASHISH

CSS gorizontal navigatsiya paneli

Gorizontal navigatsiya panelida navigatsiya havolalari gorizontal (yonma-yon) joylashadi va odatda veb-sahifaning yuqori qismida tekislanadi.

Gorizontal navigatsiya panelining asosi — Navbar Intro sahifasida ko‘rsatilganidek, har biri havola (<a>) saqlaydigan ro‘yxat elementlaridan (<li>) iborat tartibsiz ro‘yxatdir (<ul>).

<ul> elementi atrofiga navigatsiya panelingiz uchun konteyner vazifasini o‘taydigan <nav> elementini qo‘shish ham keng tarqalgan.

Float yordamida gorizontal navigatsiya paneli

Gorizontal navigatsiya paneli yaratishning bir usuli — <li> elementlariga float xossasini qo‘shishdir.

Bu yerda to‘q fon rangi bilan bazaviy gorizontal navigatsiya panelini yaratamiz va foydalanuvchi sichqonchani havolalar ustiga olib borganda ularning fon rangini o‘zgartiramiz:

Misol

Float bilan gorizontal navigatsiya paneli:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}
O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

  • overflow: hidden; — ro‘yxat elementlarining ro‘yxatdan tashqariga chiqishining oldini oladi
  • background-color: #333333; — <ul> elementiga qora fon rangi beradi
  • float: left; -
  • elementlar hosil qiladi bir-birining yonida suzadi
  • display: block; — <a> ga padding, balandlik, kenglik va margin belgilash imkonini beradi
  • padding: 14px 16px; — har bir <a> element orasiga biroz padding qo‘shadi
  • text-decoration: none; — havolalardagi taggi chiziqni olib tashlaydi

Flex yordamida gorizontal navigatsiya paneli

Gorizontal navigatsiya panelini yaratishning zamonaviy usuli - bu CSS flexbox-dan foydalanish.

Quyidagi misol yuqoridagi kabi bir xil ko‘rinishdagi gorizontal navigatsiya panelini yaratadi, lekin flexbox bilan:

Misol

Flex bilan gorizontal navigatsiya paneli:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}
O‘zingiz sinab ko‘ring »

Buning yechimi — display: flex; dir. Bu flex kontekst yaratadi va standart holatda elementlar chapdan o‘ngga ko‘rsatiladi.

Va ul blokiga faqat bitta qator — justify-content: center; qo‘shib, gorizontal markazlashtirilgan navigatsiya paneliga ega bo‘lasiz:

Misol

Flex bilan gorizontal markazlashtirilgan navigatsiya paneli:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
  justify-content: center;
}
O‘zingiz sinab ko‘ring »

Faol holat (active state)

Bu yerda foydalanuvchi qaysi sahifa/bo‘limda ekanligini bilishi uchun joriy sahifaga mos havolani ajratib ko‘rsatadigan "active" klassini qo‘shamiz:

Misol

ul li a.active {
  background-color: #04AA6D;
}
O‘zingiz sinab ko‘ring »

Kulrang gorizontal navigatsiya paneli

Bu yupqa kulrang chegaraga ega kulrang gorizontal navigatsiya paneli misoli:

Misol

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
O‘zingiz sinab ko‘ring »

Oxirgi havolani o‘ngga tekislash

Ro‘yxat elementlarini o‘ngga suzdirish (float: right;) orqali bir yoki bir nechta havolani o‘ngga tekislashingiz mumkin:

Misol

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>
O‘zingiz sinab ko‘ring »

Chegara ajratgichlari

Havola ajratgichlarini yaratish uchun <li> elementlariga (oxirgisidan tashqari barcha <li> larga) border-right xossasini qo‘shing:

Misol

/* Add a lightgray right border to all list items, except the last */
ul li {
  float: left;
  border-right: 1px solid #bbbbbb;
}

ul li:last-child {
  border-right: none;
}
O‘zingiz sinab ko‘ring »

Fikslangan navigatsiya paneli

position xossasini top yoki bottom bilan birga ishlatib, navigatsiya panelini sahifaning yuqori yoki pastki qismida qat’iy (fixed) turishiga erishish mumkin:

Yuqorida qotirilgan

ul {
  position: fixed;
  top: 0;
  width: 100%;
}
O‘zingiz sinab ko‘ring »

Pastda qotirilgan

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}
O‘zingiz sinab ko‘ring »

Eslatma: Fixed pozitsiya mobil qurilmalarda to‘g‘ri ishlamasligi mumkin.

Yopishqoq (sticky) navigatsiya paneli

Yopishqoq (sticky) navigatsiya paneli yaratish uchun <ul> ga position: sticky; qo‘shing.

position: sticky; ega element scroll joylashuviga qarab relative va fixed joylashuv o‘rtasida almashadi.

Yopishqoq (sticky) element muayyan scroll joyiga yetguncha relative bo‘yicha joylashadi — so‘ng o‘sha joyda "yopishib qoladi" (position: fixed kabi).

Misol

ul {
  position: sticky;
  top: 0;
}
O‘zingiz sinab ko‘ring »

Eslatma: sticky joylashtirish ishlashi uchun top, right, bottom yoki left xossalarining kamida bittasini belgilash shart.

Navigatsiya panelidagi ochiluvchi menyu

Bu yerda menyu havolalaridan biri uchun dropdown menyu yaratamiz:

Misol

O‘zingiz sinab ko‘ring »

Moslashuvchan navigatsiya paneli

Misol

Moslashuvchan yuqori navigatsiya yaratish uchun CSS media so‘rovlaridan qanday foydalanish:

Responsive Navbar
O‘zingiz sinab ko‘ring »

W3Schools Spaces haqida eshitganmisiz? Bu yerda veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz mumkin.

Bepul boshlang ❯
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish