Как сделать табы на css
Обновлено: 02.07.2024
В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.
Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.
При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.
Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.
Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:
Размеры содержимого вкладок
могут отличаться по высоте!
Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.
При создании вкладок HTML разметка вкладок выглядит следующим образом:
div class= "tabs" >
input type = "radio" name = "inset" value = "" id = "tab_1" checked >
label for= "tab_1" > Вкладка №1 label >
input type = "radio" name = "inset" value = "" id = "tab_2" >
label for= "tab_2" > Вкладка №2 label >
input type = "radio" name = "inset" value = "" id = "tab_3" >
label for= "tab_3" > Вкладка №3 label >
input type = "radio" name = "inset" value = "" id = "tab_4" >
label for= "tab_4" > Вкладка №4 label >
div id = "txt_1" >
p > Произвольное содержимое . p >
p > Произвольное содержимое . p >
p > Произвольное содержимое . p >
div >
div id = "txt_2" >
p > Вторая вкладка p >
div >
div id = "txt_3" >
p > Размеры содержимого вкладок p >
p > могут отличаться по высоте ! p >
div >
div id = "txt_4" >
img src = "image/logo.jpg" width = "533" height = "77" alt = "Лого" >
div >
div >
Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами и добавьте следующие стили оформления:
В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.
Основная цель обоих решений:
Реализовать механизм табов или кнопок переключения контента, не прибегая к скриптам, без перезагрузки страницы.
Зачем это нужно? Скорее всего, это решение будет очень кстати для страниц широкого применения, среди клиентов которых попадаются пользователи с отключенным Javascript. Чтобы не делать для них два решения — табы через сервер и табы на JS, можно сделать табы на CSS.
Достоинства, впрочем, видны; перечислим недостатки.
Недостатки исходного решения (часть их решена далее, часть — присуща подходу):
*) нет памяти нажатия кнопки; :focus мог бы помочь, но любой клик по странице потеряет фокус;
*) неподдержка IE8 и ниже (за счёт inline-block; решаемо; решено в UPD3);
*) ограничение высоты контента — за счёт способа решения, необходимо иметь фиксированную высоту для контента, превышение которой приведёт к обрезанию содержимого. (Решение — скролл для каждого внутреннего блока.);
*) немодульность (если не в фрейме) — нельзя использовать как независимый блок на странице, только как окно или фрейм.
Недостатки в дополнении:
Кроме устранения первого недостатка, сохраняются другие и добавляется ещё пара:
*) в дополнении возможно использовать только один ряд табов или кнопок;
*) дублирование контента табов (заголовки).
Однако, важность первого недостатка была больше — влияла на отображение, а появившиеся недостатки скрыты от пользователя и относятся к трудностям реализации. Стало быть, получили чуть более ограниченное в реализации, но похожее на настоящие табы решение.
На каком принципе это работает
В принципе, можно так описать и 2, и 3 ряда табов, если мы точно рассчитаем положение дублирующей кнопки во всех рядах. Если сделать полный дубль заголовков над каждой страницей (нужный таб видимый, остальные невидимые), можно сделать и автоматически заливаемые многострочные табы. Возникает сопутствующий вопрос: красиво ли дублировать контент? Если JS отключён, то другим способом во всех браузерах мы табы не сделаем. Если не отключён, мы с помощью JS на том же решении (ведь дублировать процедуры — это же тоже некрасиво?) продублируем код на клиенте. (В примерах из статьи нет примера полного дублирования контента, это — возможность будущего развития подхода.)
Решение
Ведь плюс в них, это мало занимает место, то информации может выдавать как можно больше, ведь для этого сделаны переключатели страниц, в нашем случай идут блоки под материал. Немногие интернет ресурсы изначально выстраивают функционал, который основан на концепции области с вкладками. Здесь рассматриваем несколько вариаций по созданию табов, где будет задействовано, как HTML и CSS и на одной версий как уже сказано подключим JS.
Один из вариантов вкладок потребует задействовать Javascript для лучшего взаимодействия с пользователем, но будет работать без Javascript. Начальная загрузка, которую используют один из методов для области вкладок, поэтому вам нужно использовать Javascript для управления и выделения активной вкладки в начальной загрузке. Все эти варианты популярны, ведь они отлично созданы по оформлению, где широко используются по своему направлению.
Как видно из фрагмента ниже, мы используем простые поля ввода и метки для каждого заголовка вкладки. Затем мы добавляем контент для каждой вкладки в отдельный div. Каждое поле ввода и содержимое div имеет уникальный идентификатор, поэтому мы можем стилизовать его с помощью CSS.
1. Виджет с вкладками:
.kigedupodebas-tab + .kigedupodebas-tab <
margin-right: -1px;
>
.kigedupodebas-tab-link <
display: block;
min-width: 60px;
padding: 0 15px;
color: inherit;
text-align: center;
text-decoration: none;
border-radius: 4px 4px 0 0;
>
.kitudsac-mazedamip <
display: none;
padding-top: 50px;
>
По функций идет аналогично информер, но это вкладки, которые можно задействовать в блоке на сайте, где есть несколько вариантов переключения.
2. CSS Tabs вкладками:
Если вы развивающийся бизнес, или если вы уже зарекомендовали себя, пытаясь установить присутствие в Интернете, SEO станет вашим лучшим другом в маркетинговом аспекте.
SEO - это практика оптимизации веб-сайта или блога, чтобы его контент занимал хорошие позиции в поисковых системах и, следовательно, привлекал больше трафика.
Хотя нет гарантии, что ваш сайт займет желаемое место в поисковом запросе № 1, существует множество инструментов и тактик SEO, которые могут сделать ваш сайт доступным для обнаружения
Это важно, потому что маркетинг онлайн - самый эффективный способ привлечь бизнес сегодня.
В мире смартфонов и социальных сетей рекламные щиты начинают терять большую популярность в рекламной индустрии.
В конце концов, проще найти общую фразу в поиске Google и посмотреть, какие статьи являются самыми читаемыми и самыми всесторонними по любой теме.
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, .3);
-webkit-transition: opacity .3s linear,
-webkit-transform .3s linear;
-webkit-transform: translate(0, 0);
>
.venenas-caucibus .tab .desaciesn_nasgsavau p <
padding: 0 20px; margin: 20px 0;
>
Этот вариант создан на чистом CSS, где вместо вкладок представлены красивые страницы, которые переключаются при нажатие на круглые кнопки, что от вкладок по дизайну кардинально отличается, но по функциям они аналогичны.
3. Вкладками в темно сером цвете:
В этом варианте придется подключить библиотеку, так как без нее не работает переключатель. Где уже сами можете выставить цветовую палитру, также здесь присутствуют тени, которые отлично подойдут под светлый формат сайта или аналогичного фона.
Компаниям Google в этом районе также легче и какова их репутация. Используете ли вы тактику SEO географически или вообще, это важная часть рекламы и роста на конкурентном онлайн-рынке сегодня.
Если в вашей бизнес-стратегии отсутствует SEO, будет сложно создать какой-либо вид онлайн-присутствия.
SEO можно использовать для веб-сайтов, постов в блогах и социальных сетях, и это гарантирует, что ваш контент (и, следовательно, ваш бизнес) соответствующим образом реагирует на онлайн-запросы.
.sadorganica <
margin-top: -10px;
>
ul.nekingukib <
width: 600px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
padding: 0;
>
ul.nekingukib li <
width: 200px;
var nekingukib = $(".nekingukib li a");
Такой формат подойдет как под материал, который по клику переворачивает страницы, так и под тематику кино онлайн, где также можно расположить плееры для просмотра.
В сети интернет доступно множество вариантов создания простых навигационных вкладок, которые в большинстве от этих не отличаются по своим функциям, разве по стилистике дизайна.
Не секрет, что один из лучших способов организовать приличное количество контента на странице сайта, это задействование вкладок. Есть много случаев, когда вы можете найти эту функцию полезной, которая будет отлично смотреться на темном или светлом формате сайта.
На этом уроке мы научимся делать простые вкладки на чистом CSS и никакого JavaScript. В ряде случаев этого решения вполне достаточно, ограничиваясь возможностями только CSS стилей.
HTML код
Сначала создадим обертку для вкладок с классом wrap. Затем блок для вкладок tabs, навигацию для переключения вкладок tabs__items, вкладки-ссылки tabs__item. В адресах ссылок пропишем названия-якоря и точно такие же названия укажем в идентификаторах у текстовых блоков, таким образом связав их между собой. Далее создадим три блока с содержимым табов tab__box.
CSS код
Сделаем для обертки отступ сверху, ограничим ее по ширине и расположим по середине.
.wrap padding: 40px 0;
max-width: 900px;
margin: 0 auto;
>
Сделаем оболочку для табов флекс-контейнером, для построения табов в один ряд.
.tabs__items display: flex;
>
Поделим поровну пространство для табов и так же сделаем их контейнером для ссылок.
Изначально все вкладки нужно спрятать.
.tab__box position: relative; // относительное позиционирование
padding: 20px; // внутренние отступы
font-size: 18px;
line-height: 24px;
display: none; // вкладки скрыты
>
Как добиться, чтобы при нажатии на вкладку, показалось ее содержимое? Поможет нам псевдо-класс :target, который при клике по цели, применит заданный стиль к элементу с якорем.
.tab__box:target display: block; // покажет содержимое при клике
>
Мы хотим, чтобы при клике, сам таб и бокс с контентом меняли цвет фона и здесь без псевдоэлемента никак не обойтись. Создадим для вкладок с контентом пустые блоки при помощи псевдоэлемент :before.
.tab__box:before content: "";
height: 50px;
width: 33.333%;
position: absolute;
top: -50px;
>
Покрасим все блоки в два разных цвета, обратившись к каждому через псевдокласс :nth-child.
Цветной фон перекрывает меню навигации, поэтому переместим надпись на слой выше.
Читайте также: