W3.CSS yon panel

w3-sidebar klassi

w3-sidebar klassi vertikal yon navigatsiya yaratadi.

Yon panel doimo ko‘rinib turishi, kichik ekranlarda yig‘ilishi yoki sahifa kontenti ustida ochilishi mumkin.

Yon panelni doimo ko‘rsatish

Qotirilgan yon panel yaratish uchun w3-sidebar ni w3-bar-block bilan birga ishlating.

Sahifa kontenti yon panel ortida qolib ketmasligi uchun unga mos chap tashqi bo‘shliq (margin) bering:

Misol

<div class="w3-sidebar w3-bar-block" style="width:25%"> <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 style="margin-left:25%"> ... page content ... </div>

O‘zingiz sinab ko‘ring »

Yon panelni ochish va yopish

Yon panel foydalanuvchi uni ochmaguncha yashirin turishi mumkin.

JavaScript display xususiyatini o‘zgartirishi mumkin:

Misol

function w3_open() { sideBar.style.display = "block"; } function w3_close() { sideBar.style.display = "none"; }

O‘zingiz sinab ko‘ring »

Yig‘iladigan moslashuvchan yon panel

Yon panelni katta ekranlarda ko‘rinadigan, kichik ekranlarda esa yig‘iladigan qilish uchun w3-collapse klassidan foydalaning.

Elementlarni katta ekranlarda yashirish uchun w3-hide-large klassidan foydalaning.

Misol

<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px" id="mySidebar"> <button class="w3-bar-item w3-button w3-hide-large" <onclick="w3_close()">Close X</button> <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 class="w3-main" style="margin-left:200px"> <div class="w3-container w3-teal"> <h2><button class="w3-button" onclick="w3_open()">☰</button>My Page</h2> </div> ... page content ... </div>

O‘zingiz sinab ko‘ring »

To‘liq avtomatik moslashuvchan yon navigatsiya yaratish uchun w3-collapse klassi w3-sidebar klassi bilan birga ishlatiladi.

Bu klass ishlashi uchun sahifa kontenti w3-main klassi ichida bo‘lishi kerak.

Yon panel ustki qatlami (overlay)

Yon panel ochiq turganda sahifani qoraytirish uchun w3-overlay dan foydalaning.

Misol

<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar"> <button class="w3-bar-item w3-button" onclick="w3_close()">Close</button> <a href="#" class="w3-bar-item w3-button">Link 1</a> <a href="#" class="w3-bar-item w3-button">Link 2</a> </div> <div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div> <button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button> <script> const sidebar = document.getElementById("mySidebar"); const overlay = document.getElementById("myOverlay"); function w3_open() { sidebar.style.display = "block"; overlay.style.display = "block"; } function w3_close() { sidebar.style.display = "none"; overlay.style.display = "none"; } </script>

O‘zingiz sinab ko‘ring »

O‘ng tomondagi yon panel

Yon panelni o‘ng tomonga joylashtirish uchun right:0 qo‘shing:

Misol

<div class="w3-sidebar w3-bar-block" style="width:25%;right:0"> <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 style="margin-right:25%"> ... page content ... </div>

O‘zingiz sinab ko‘ring »

Qo‘shimcha misollar

Yon panellarni bezash va ishlatishning boshqa usullarini ham o‘rganing.

Sahifa kontentini surish

Yon panel ochilganda sahifa kontentini surishingiz mumkin:

Misol

function w3_open() { document.getElementById("main").style.marginLeft = "25%"; document.getElementById("mySidebar").style.width = "25%"; document.getElementById("mySidebar").style.display = "block"; document.getElementById("openNav").style.display = "none"; } function w3_close() { document.getElementById("main").style.marginLeft = "0"; document.getElementById("mySidebar").style.display = "none"; document.getElementById("openNav").style.display = "inline-block"; }

O‘zingiz sinab ko‘ring »

Yon panelni bezash

Yon panel fonini o‘zgartirish va joriy havolani ajratib ko‘rsatish uchun rang klasslaridan foydalaning:

Home Link 1 Link 2

Misol

<div class="w3-sidebar w3-bar-block w3-blue"> <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> </div>

O‘zingiz sinab ko‘ring »

Chegarali yon panel

Yon panel atrofida w3-border, havolalar orasida esa w3-border-bottom dan foydalaning:

Link 1 Link 2 Link 3

Misol

<div class="w3-sidebar w3-bar-block w3-border"> <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 2</a> <a href="#" class="w3-bar-item w3-button">Link 3</a> </div>

O‘zingiz sinab ko‘ring »

Hover effektli havolalar

Sichqoncha ustiga kelganda fon rangini o‘zgartirish uchun w3-hover-color klassidan foydalaning.

Faqat matn rangini o‘zgartirmoqchi bo‘lsangiz, w3-hover-none dan foydalaning:

Link 1 Link 2 Link 3

Misol

<div class="w3-sidebar w3-bar-block w3-black"> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link 1</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link 2</a> <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link 3</a> </div>

O‘zingiz sinab ko‘ring »

Ochiluvchi menyuli yon panel

Ochiluvchi menyuni yon panel ichiga joylashtirish mumkin:

Misol

<div class="w3-sidebar w3-bar-block"> <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"> <a href="#" class="w3-bar-item w3-button">Link</a> <a href="#" class="w3-bar-item w3-button">Link</a> </div> </div> </div>

O‘zingiz sinab ko‘ring »

Akkordeonli yon panel

Akkordeonni ham yon panel ichiga joylashtirish mumkin:

Misol

<div class="w3-sidebar w3-bar-block w3-light-grey"> <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button> <div id="demoAcc" class="w3-hide"> <a href="#" class="w3-bar-item w3-button">Link</a> <a href="#" class="w3-bar-item w3-button">Link</a> </div> </div> <script> function myAccFunc() { document.getElementById("demoAcc").classList.toggle("w3-show"); } </script>

O‘zingiz sinab ko‘ring »

Animatsiyali yon panel

Yon panel ochilganda uni animatsiya qilish uchun w3-animate-left kabi animatsiya klassini qo‘shing:

Misol

<div class="w3-sidebar w3-animate-left"> ... sidebar content ... </div>

O‘zingiz sinab ko‘ring »

Yon panel kontenti

Yon panel har qanday HTML kontentni, jumladan rasmlar, sarlavhalar, tugmalar, teglar va panellarni o‘z ichiga olishi mumkin.

Misol

<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%"> <div class="w3-container w3-dark-grey"> <h4>Menu</h4> </div> <img src="img_snowtops.jpg" style="width:100%" alt="Snowy mountains"> <a href="#" class="w3-bar-item w3-button w3-red">Home</a> <a href="#" class="w3-bar-item w3-button">Projects</a> <a href="#" class="w3-bar-item w3-button">About</a> </div>

O‘zingiz sinab ko‘ring »

Ikonkali yon navigatsiya

Misol

<div class="w3-sidebar w3-bar-block w3-black" style="width:70px"> <a href="#" class="w3-bar-item w3-button"><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> </div>

O‘zingiz sinab ko‘ring »

Yon navigatsiya o‘lchamlari

Kattalashtirilgan shrift o‘lchami (w3-large va h.k.):

Link 1 Link 2 Link 3

Kattalashtirilgan ichki bo‘shliq (w3-padding va h.k.):

Link 1 Link 2 Link 3

Misol

<div class="w3-sidebar w3-bar-block w3-large"> <a href="#" class="w3-bar-item w3-button">Link</a> <a href="#" class="w3-bar-item w3-button">Link</a> <a href="#" class="w3-bar-item w3-button">Link</a> </div>

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish