W3.CSS Бічна навігація (сайдбар)
W3.CSS Вертикальні панелі навігації
За допомогою бічної навігації у вас є кілька варіантів:
- Завжди відображати навігаційну панель ліворуч від вмісту сторінки
- Використання складеної "повністю автоматичної" адаптивної бічної навігації
- Відкрити навігаційну панель у лівій частині вмісту сторінки
- Відкрити навігаційну панель над усім вмістом сторінки
- Посунути вміст сторінки праворуч, відкриваючи навігаційну панель
- Відображати панель навігації праворуч, а не ліворуч
Завжди відображати бічну панель
Приклад
<div class="w3-sidebar w3-bar-block" style="width:25%">
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
<div style="margin-left:25%">
... page content ...
</div>
Спробуйте самі »
Відкрити навігацію бічної панелі над частиною вмісту
Приклад
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Спробуйте самі »
Відкрити бічну панель навігації над вмістом
Приклад
function w3_open() {
document.getElementById("mySidebar").style.width = "100%";
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
Спробуйте самі »
Складна адаптивна бічна навігація
Приклад
<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 ×</button>
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
<div class="w3-main" style="margin-left:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>My Page</h1>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
Спробуйте самі »
Посунути вміст сторінки вправо
Приклад
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";
}
Спробуйте самі »
Правостороння бічна навігація
Приклад
<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
<h5 class="w3-bar-item">Menu</h5>
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
<div style="margin-right:25%">
... page content ...
</div>
Спробуйте самі »
Правостороння навігація, що згортається
Приклад
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close ×</button>
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
<div class="w3-main" style="margin-right:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">☰</button>
<div class="w3-container">
<h2>My Page</h2>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
Спробуйте самі »
Ліва & Права навігація
Приклад
Спробуйте самі »Стилізація бічної навігації
Додайте клас w3-color до w3-sidebar, щоб змінити колір фону. Якщо вам потрібне активне/поточне посилання, щоб користувач знав, на якій сторінці він/вона перебуває, також додайте клас w3-color до одного з посилань:
Бічна навігація з рамкою (межами)
Використовуйте клас w3-border, щоб додати рамку навколо бічної панелі навігації:
Додайте клас w3-border-bottom до посилань, щоб створити роздільники посилань:
Приклад
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
Спробуйте самі »
Використовуйте клас w3-card, щоб відобразити бічну навігацію як картку:
Посилання, які можна навести
Коли ви наводите курсор миші на посилання всередині панелі, колір фону змінюється на сірий.
Якщо вам потрібен інший колір тла під час наведення курсора, використовуйте будь-який із класів w3-hover-color:
Приклад
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Посилання 3</a>
</div>
Спробуйте самі »
Ви можете вимкнути ефект наведення за замовчуванням за допомогою класу w3-hover-none. Це часто використовується, коли ви хочете лише виділити колір тексту (а не колір фону) при наведенні:
Приклад
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Посилання 3</a>
</div>
Спробуйте самі »
Розміри бічної навігації
Збільшений розмір шрифту (w3-large тощо):
Збільшення відступів (w3-padding тощо):
Приклад
<div class="w3-sidebar w3-bar-block w3-large">
<a href="#" class="w3-bar-item w3-button">Посилання</a>
<a href="#" class="w3-bar-item w3-button">Посилання</a>
<a href="#" class="w3-bar-item w3-button">Посилання</a>
</div>
Спробуйте самі »
Бічна навігація з іконками
Приклад
<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>Спробуйте самі »
Бічна панель зі спадним меню
Приклад
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Посилання</a>
<a href="#" class="w3-bar-item w3-button">Посилання</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
Спробуйте самі »
Підказка: Коли спадне меню "відкрито", посилання на спадне меню стає сірим фоном, що вказує на те, що воно активне. Щоб змінити це, додайте клас w3-hover-color до обох "випадаючих" <div> та <a>.
Бічна панель з акордеоном
Приклад
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Посилання 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
<div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Посилання</a>
<a href="#" class="w3-bar-item w3-button">Посилання</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</button>
<div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Посилання</a>
<a href="#" class="w3-bar-item w3-button">Посилання</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
Анімована бічна панель
Використовуйте будь-який із w3-animate-класів, щоб згасати, масштабувати або ковзати в бічній панелі навігації:
Накладання бічної панелі
Клас w3-overlay можна використовувати для створення ефекту накладання під час відкриття бічної панелі. Клас w3-overlay додає чорний фон із непрозорістю 50% до "вмісту сторінки" - цей ефект "виділить" бічну навігацію.
Приклад
<!-- Sidebar -->
<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">Посилання 1</a>
<a href="#" class="w3-bar-item w3-button">Посилання 2</a>
<a href="#" class="w3-bar-item w3-button">Посилання 3</a>
</div>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<!-- Page content -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide in the side navigation.</p>
</div>
<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
Спробуйте самі »
Вміст бічної панелі
Додайте все, що вам подобається, у бічну навігаційну панель:
Приклад
<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">
<a href="#" class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects
<span class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#" class="w3-bar-item w3-button">Contact</a>
<div class="w3-panel w3-blue-grey w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem ipsum box...</p>
</div>
</div>
Спробуйте самі »
