Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vertikal navigatsiya paneli

ULASHISH

CSS vertikal navigatsiya paneli

Vertikal navigatsiya panelida navigatsiya havolalari vertikal (birining ustida bir) joylashadi va odatda veb-sahifaning chap yoki o‘ng tomoni bo‘ylab tekislanadi.

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

CSS vertikal navigatsiya paneli misoli

Bu yerda kulrang fon rangi bilan bazaviy vertikal navigatsiya panelini yaratamiz va foydalanuvchi sichqonchani havolalar ustiga olib borganda ularning fon rangi hamda matn rangini o‘zgartiramiz:

Misol

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link and background color on hover */
li a:hover {
  background-color: #555555;
  color: white;
}
O‘zingiz sinab ko‘ring »

Misol tushuntirilishi:

  • Birinchi blok (ul) oldingi sahifanikiga o‘xshaydi. Bundan tashqari, qat’iy kenglik (200px) va och kulrang fon rangi belgiladik
  • Keyingi blok (li a) <li> elementlari ichidagi <a> elementlarga uslub beradi
  • Havolalarni blok elementlar sifatida ko‘rsatish butun havola maydonini bosiladigan qiladi (faqat matnni emas) va kenglik, padding, margin, balandlik va h.k. belgilash imkonini beradi. Havola rangi va biroz padding qo‘shamiz. Shuningdek, bu <a> elementlaridan taggi chiziqni olib tashlaymiz
  • Oxirgi blok (li a:hover) foydalanuvchi sichqonchani olib borganda havola rangi va fon rangini o‘zgartiradi

Faol holat (active state)

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

Misol

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

Navigatsiya paneli havolalarini markazlash va chegaralar qo‘shish

Navigatsiya paneli havolalarini markazlashtirish uchun <li> yoki <a> ga text-align: center; qo‘shing.

Navigatsiya paneli atrofida chegara kerak bo‘lsa, <ul> ga border xossasini qo‘shing.

Agar navigatsiya paneli ichida ham chegaralar kerak bo‘lsa, oxirgisidan tashqari barcha <li> elementlariga border-bottom xossasini qo‘shing:

Misol

ul {
  border: 1px solid #555555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555555;
}

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

To‘liq balandlikdagi vertikal navigatsiya paneli

To‘liq balandlikdagi "yopishqoq" yon navigatsiya yarating:

Misol

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 130px;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
O‘zingiz sinab ko‘ring »

Eslatma: Bu misol mobil qurilmalarda to‘g‘ri ishlamasligi mumkin.

Moslashuvchan navigatsiya paneli

Misol

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

Responsive Navbar
O‘zingiz sinab ko‘ring »
‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish