W3.CSS Вкладки навигации
Лондон
Лондон - это столица Англии.
Это самый густонаселенный город в Соединенном Королевстве с населением более 9 миллионов человек.
Париж
Париж - это столица Франции.
Агломерация Парижа является одним из крупнейших населенных пунктов в Европе с населением более 12 миллионов человек.
Токио
Токио - это столица Японии.
Это центр Большого Токио и самый густонаселенный мегаполис в мире.
Навигация по вкладкам
Навигация по вкладкам - это один из способов навигации по сайту.
Обычно при навигации по вкладкам используются кнопки навигации (вкладки), расположенные вместе с выделенной выбранной вкладкой.
В этом примере используются элементы с одинаковым именем класса (в нашем примере это "city"), и изменяется стиль между display:none и display:block чтобы скрывать и отображать различный контент:
Пример
<div id="London" class="city">
<h2>Лондон</h2>
<p>Лондон - это столица Англии.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Париж</h2>
<p>Париж - это столица Франции.</p>
</div>
<div id="Tokyo" class="city" style="display:none">
<h2>Токио</h2>
<p>Токио - это столица Японии.</p>
</div>
И некоторые кликабельные кнопки, чтобы открыть вкладку контента:
Пример
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">Лондон</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Париж</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Токио</button>
</div>
И JavaScript, чтобы выполнить работу:
Пример
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
Попробуйте сами »
Объяснение JavaScript кода
Функция openCity() вызывается, когда пользователь нажимает одну из кнопок в меню.
Функция скрывает все элементы с именем класса "city" (display="none"), и отображает элемент с заданным названием города (display="block");
Закрываемые вкладки
Лондон
Лондон - это столица Англии.
Чтобы закрыть вкладку, добавьте onclick="this.parentElement.style.display='none'" к элементу внутри контейнера вкладок:
Пример
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>Лондон</h2>
<p>Лондон - это столица Англии.</p>
</div>
Попробуйте сами »
Активная/Текущая вкладка
Чтобы выделить текущую вкладку/страницу, на которой находится пользователь, используйте JavaScript и добавьте класс цвета к активной ссылке. В приведенном ниже примере мы добавили класс "tablink" к каждой ссылке. Таким образом, легко получить все ссылки, связанные с вкладками, и присвоить текущей ссылке вкладки класс "w3-red" чтобы выделить его:
Пример
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
Попробуйте сами »
Вертикальные вкладки
Пример
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">Лондон</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Париж</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Токио</button>
</nav>
Попробуйте сами »
Анимированные вкладки контента
Используйте любой из w3-animate-классов для плавного появления, увеличения или скольжения содержимого вкладки:
Пример
<div id="London" class="w3-container city w3-animate-left">
<p>Лондон - это столица Англии.</p>
</div>
Попробуйте сами »
Галерея изображений с вкладками
Нажмите на изображении:
Пример
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Попробуйте сами »
Вкладки в сетке
Использование вкладок в трёхколонном макете. Обратите внимание, что мы добавляем нижнюю границу к активной вкладке вместо цвета фона:
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
