Табы (вкладки) для сайта на CSS и JavaScript – 3 способа
В этой статье рассмотрим примеры вкладок для сайта, выполненных как с использованием только CSS, так и с применением JavaScript.
Что такое табы
На странице очень часто бывает необходимо вывести большое количество информации.
Для того чтобы эту информацию не отображать всю сразу, её можно разделить на отдельные части, а затем выводить в определённый момент времени только одну порцию этих данных.
Табы (вкладки) – это как раз и есть тот элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.
В вебе табы – это просто набор ссылок или других HTML элементов, которые визуально обычно оформляют в виде вкладок или группы кнопок. При нажатии ни них они включают видимость одного какого-то блока с контентом и скрывают другие.
Табы предназначены для экономии места и более удобного представления информации на сайте (по названию вкладки можно определить какой контент отобразится на странице, если нажать на неё).
Вкладки на чистом CSS
Рассмотрим несколько способов создания табов на CSS.
Первый способ построен на радиокнопках ( input с type=»radio» ) и CSS селекторе checked.
HTML и CSS код таба:
В этом варианте радиокнопки связаны с определённым label . Связь элемента label с input выполнена через атрибут for . Это действие необходимо для того, чтобы можно было скрыть элементы input , а управление ими (установку checked ) выполнять через клики по элементам label .
Стилизация выбранного элемента label в этом примере выполнена с использованием селектора input[type=»radio»]:checked+label . Этот селектор выбирает элемент label , который расположен сразу же после элемента input[type=»radio»] , находящимся в состоянии checked .
Отображение и скрытие контента, связанного с вкладками, выполняется очень просто. По умолчанию элементы, содержащие контент, не отображаются. Показ того или иного элемента с контентом осуществляется только в том случае, если селектор в следующем правиле позволяет выбрать его:
Отобразить вкладки можно по-разному. В следующем примере они визуально отображаются как кнопки .
CSS код для создания адаптивных вкладок в виде кнопок:
В этом примере вкладки визуально представлены в виде хэштегов :
Второй способ основывается на использовании псевдокласса :target.
Пример HTML и CSS кода для создания адаптивных вкладок, механизм работы которых организован через :target :
Логика этих табов основана на следующих моментах. Первый момент заключается в добавлении хэша к URL-адресу страницы при нажатии на ссылку (вкладку). Второй – это стилизация элементов, выбор которых осуществляется в зависимости от хэша в URL-адресе. Выбрать элемент, идентификатор которого соответствует хэшу в URL-адресе в CSS можно выполнить посредством псевдокласса :target. С помощью него мы можем написать селектор не только для получения элемента, на который он указывает, но и для выбора других элементов, которые каким-то определённым образом связаны с ним.
Например, выбрать вкладку, которая должна быть активной для элемента на который указывает :target можно так:
В зависимости от дизайна проекта табы можно визуально представить так, как вам это нужно.
Например, чтобы сделать вкладки вертикальными их код можно изменить на следующий:
При этом табы отображаются вертикально только на больших экранах, а на маленьких (мобильных) они отображаются горизонтально. Адаптивность табов в коде реализуется с помощью медиа-запросов.
Табы с использованием JavaScript
Сейчас разберём как можно создать табы на чистом JavaScript (без использования jQuery и каких-либо других библиотек).
Способ реализации на JavaScript может потребоваться для решения задач, которые просто невозможно решить на CSS. Например, когда нужно загружать контент динамически (через AJAX) в момент открытия вкладки.
JavaScript (с использованием классов):
Инициализация табов на странице осуществляется посредством создания нового объекта типа ItcTabs и передаче ему в качестве аргумента CSS-селектор или DOM-элемент которой необходимо инициализировать как табы.
Если в качестве аргумента указать селектор класса, то в качестве табов будет инициализирован только первый элемент.
Для того чтобы на странице инициализировать несколько вкладок, можно использовать следующий код:
Кроме этого, результат вызова new ItcTabs() можно сохранить в переменную, а затем использовать её для программного переключения вкладок.
Краткое описание исходного кода JavaScript
Исходный JavaScript построен на основе класса ItcTabs .
- this._elTabs — это DOM-элемент, содержимое которого нужно инициализировать в качестве табов;
- this._elButtons — элементы, которые представляют собой вкладки;
- this._elPanes — элементы, содержащие контент, который необходимо переключать с помощью вкладок.
Установка обработчика для события click осуществляется в методе _events() . Данный метод вызывается в конструкторе.
Для отображения определённого контента в зависимости от нажатой вкладки выполняется с помощью метода show() . Элемент, на который нажали передаём в качестве аргумента:
Метод showByIndex(index) предназначен для перехода на вкладку по её индексу.
Примеры
1. Пример, в котором данные о последней открытой вкладки таба будем сохранять в LocalStorage, а затем использовать эту информацию при открытии страницы для переключения на неё:
2. Пример синхронизации вкладок на разных открытых страницах, относящихся к одному источнику (через LocalStorage):
3. Пример, в котором показано как на одной странице можно вывести несколько табов с сохранением их состояний (активных вкладок) в LocalSorage:
4. Табы, содержащие видео с YouTube. При переходе на другую вкладку будет приостанавливаться воспроизведение текущего видео.
В элементах .player атрибут data-video-id определяет videoId ролика, а data-width и data-height — ширину и высоту iframe .
Загрузку API IFrame Player будем выполнять асинхронно. Для этого напишем следующий код:
Создание <iframe> и проигрывателя YouTube будем выполнять после загрузки кода API посредством функции onYouTubeIframeAPIReady :
Решено: как переключаться между html страницами
Основная проблема с переключением между HTML-страницами заключается в том, что браузер интерпретирует структуру документа по-разному в зависимости от того, где вы находитесь в документе. Это может привести к ошибкам или неожиданному поведению.
Эта строка кода создает гиперссылку, которая при нажатии переходит на страницу page2.html.
Навигация между html-страницами
Существует несколько способов навигации между html-страницами в HTML. Один из способов заключается в использовании ярлык. Например, чтобы перейти на вторую страницу HTML-документа, вы должны использовать следующий код:
Что такое страница
Страница в HTML — это документ, содержащий весь текст и графику, из которых состоит веб-страница.
Кнопки для переключение страниц в CSS
Где теперь есть возможность поставить на различные переключатели, там, где много страниц или новостей, и как раз такой формат станет отличным решение, чтоб поставить его для переключения, как самих страниц, так и различной информации, которая может содержать описание или картинки. Не исключаю, что их можно увидеть под функциями, которые созданы в одном месте, и чтоб не занимать много место, вот для этого и устанавливаем этот формат.
Такая стилистика отлично смотрится, как на светлом фоне, так и на темном:
Само оформление переключателей сделано понятно, которые больше напоминают переключателей страниц на сайте. Ведь нумерацию нужно выставлять самостоятельно, и какая она будет, тут больше зависит под каким функционалом их устанавливают.
Переходы между разделами страницы с использованием CSS3
В последнее время увеличивается количество одностраничных сайтов. которые используют JavaScript для формирования различных эффектов для переходов между разделами. В данном уроке мы рассмотрим как построить такой шаблон, но будем использовать средства CSS для формирования перехода между разделами.
Разметка HTML
Код HTML содержит пять основных разделов: заголовок и четыре секции с содержанием. Каждая секция содержания будет иметь ID и класс panel. Также мы добавим еще один раздел с классом content внутрь секции . Первая секция #home будет иметь класс content без дополнительного раздела:
В заголовке будет размещаться описание и навигация:
Причина, по которой такая «неупорядоченная» структура размещается в конце, заключается в том, что навигация становится доступной с помощью общего селектора соседей (
) и можно устанавливать свой цвет для каждого пункта.
Основная идея заключается в использовании псевдо-класса :target для того, чтобы организовать переход к текущей секции. В описанном примере используется выскальзывание панелей сверху. В демонстрации построено еще два разных эффекта перехода.
Сначала зададим стили для заголовка и навигации. Нужно сохранять их положение в одной точке, хотя все остальное будет двигаться.
Все секции, кроме #home , имеют класс panel. Здесь будет использоваться переход, когда элемент получает класс “ targeted ”. Трюк заключается в использовании отрицательного значения для поля в классе “ normal ” и отказ от поля в псевдо-классе :target . Добавлением перехода мы заставляем панель выскальзывать сверху, когда ее выбирают:
Теперь определим стиль класса content:
Для того, чтобы изменить цвет текущего элемента навигации будем использовать псевдо-класс :target с общим селектором соседей, чтобы получить соответствующий пункт:
Готово!
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
Перевел: Сергей Фастунов
Урок создан: 13 Февраля 2012
Просмотров: 37498
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.