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%">
... содержимое страницы ...
</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()">Закрыть ×</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>Моя страница</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">Меню</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%">
... содержимое страницы ...
</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()">Закрыть ×</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>Моя страница</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-цвет на боковую панель w3, чтобы изменить цвет фона. Если вы хотите активную/текущую ссылку, чтобы пользователь знал, на какой странице он находится, добавьте также класс w3-цвет к одной из ссылок:
Боковая навигация с границами
Используйте класс 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 и т.д.):
Увеличен отступ / padding (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>
Попробуйте сами »
Примечание. При подключении иконок, необходимо предварительно подключить к странице библиотеку иконок, например, Font Awesome.
Боковая панель с выпадающим элементом (dropdown)
Пример
<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">Ссылка 1</a>
<a href="#"
class="w3-bar-item w3-button">Ссылка 2</a>
</div>
</div>
<a href="#"
class="w3-bar-item w3-button">Ссылка 3</a>
</div>
Попробуйте сами »
Совет: Когда раскрывающееся меню "открыто", раскрывающаяся ссылка получает серый цвет фона, указывающий, что она активна. Чтобы переопределить это, добавьте класс w3-hover-color к обоим "dropdown" - <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()">Аккордеон</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% непрозрачности на "страницу контента" - этот эффект "подсвечивает" боковую навигацию.
Пример
<!-- Сайдбар -->
<div class="w3-sidebar w3-bar-block w3-white w3-animate-left" style="display:none;z-index:4" id="mySidebar">
<button
class="w3-bar-item w3-button"
onclick="w3_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-overlay" onclick="w3_close()" style="cursor:pointer"></div>
<!-- Страница контента -->
<button class="w3-button w3-xxlarge"
onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>Наложение сайдбара</h1>
<p>Нажмите на иконку "гамбургер" чтобы сайдбар выскальзывал.</p>
</div>
<!-- JS, чтобы открыть и закрыть боковую панель с эффектом наложения -->
<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>Меню</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>
Попробуйте сами »
Навбар с иконками
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политики конфиденциальности.
Copyright 1999-2019 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Сайт работает на фреймворке W3.CSS.