
Ноябрь 29, 2015 Запись была обновлена
Адаптивные вкладки на всю ширину

В наше время все активно используют мобильные устройства для просмотра сайтов и серфинга по интернету. Каждый владелец сайта пытается сделать чтобы он был удобен как можно большему числу пользователей. И сейчас адаптивность сайта к различным разрешения экрана является обязательным требованием. Поэтому в этом уроке мы рассмотрим как создать адаптивные вкладки на всю ширину сайта.
Похожие материалы:
Пример можно увидеть здесь:
Посмотреть примерСкачать
Изображения еды для каждой вкладки были взяты — здесь.
HTML часть
Все вкладки и содержимое находятся в блоке с идентификатором tabs и классом tabs:
1 2 3 | <div id="tabs" class="tabs"> ... </div> |
Первым блоком здесь идут вкладки:
1 2 3 4 5 6 7 8 9 | <nav> <ul> <li><a href="#section-1" class="icon-shop"><span>Магазин</span></a></li> <li><a href="#section-2" class="icon-cup"><span>Напитки</span></a></li> <li><a href="#section-3" class="icon-food"><span>Еда</span></a></li> <li><a href="#section-4" class="icon-lab"><span>Лаборатория</span></a></li> <li><a href="#section-5" class="icon-truck"><span>Список</span></a></li> </ul> </nav> |
А затем большой блок с идентификатором content, где в содержимое каждой вкладки расположено в определенном блоке <section>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="content"> <section id="section-1"> <div class="mediabox"> ... </div> <div class="mediabox"> ... </div> <div class="mediabox"> ... </div> </section> ... </div> |
CSS часть
Для начала нам необходимо для каждой вкладки задать свою иконку:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?pvm5gj'); src:url('../fonts/icomoon/icomoon.eot?#iefixpvm5gj') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?pvm5gj') format('woff'), url('../fonts/icomoon/icomoon.ttf?pvm5gj') format('truetype'), url('../fonts/icomoon/icomoon.svg?pvm5gj#icomoon') format('svg'); font-weight: normal; font-style: normal; } .icon-food:before { content: "\e600"; } .icon-lab:before { content: "\e601"; } .icon-cup:before { content: "\e602"; } .icon-truck:before { content: "\e603"; } .icon-shop:before { content: "\e604"; } |
Далее задаем стили для вкладок и содержимого:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | .tabs { position: relative; width: 100%; overflow: hidden; margin: 1em 0 2em; font-weight: 300; } .tabs nav { text-align: center; } .tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block; } .tabs nav ul li { border: 1px solid #becbd2; border-bottom: none; margin: 0 0.25em; display: block; float: left; position: relative; } .tabs nav li.tab-current { border: 1px solid #47a3da; box-shadow: inset 0 2px #47a3da; border-bottom: none; z-index: 100; } .tabs nav li.tab-current:before, .tabs nav li.tab-current:after { content: ''; position: absolute; height: 1px; right: 100%; bottom: 0; width: 1000px; background: #47a3da; } .tabs nav li.tab-current:after { right: auto; left: 100%; width: 4000px; } .tabs nav a { color: #becbd2; display: block; font-size: 1.45em; line-height: 2.5; padding: 0 1.25em; white-space: nowrap; } .tabs nav a:hover { color: #768e9d; } .tabs nav li.tab-current a { color: #47a3da; } .tabs nav a:before { display: inline-block; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; margin: -0.25em 0.4em 0 0; } .content section { font-size: 1.25em; padding: 3em 1em; display: none; max-width: 1230px; margin: 0 auto; } .content section:before, .content section:after { content: ''; display: table; } .content section:after { clear: both; } .no-js .content section { display: block; padding-bottom: 2em; border-bottom: 1px solid #47a3da; } .content section.content-current { display: block; } .mediabox { float: left; width: 33%; padding: 0 25px; } .mediabox img { max-width: 100%; display: block; margin: 0 auto; } .mediabox h3 { margin: 0.75em 0 0.5em; } .mediabox p { padding: 0 0 1em 0; margin: 0; line-height: 1.3; } |
И последнее, это медиа запросы, ориентированные под разные размеры экранов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | @media screen and (max-width: 52.375em) { .tabs nav a span { display: none; } .tabs nav a:before { margin-right: 0; } .mediabox { float: none; width: auto; padding: 0 0 35px 0; font-size: 90%; } .mediabox img { float: left; margin: 0 25px 10px 0; max-width: 40%; } .mediabox h3 { margin-top: 0; } .mediabox p { margin-left: 40%; margin-left: calc(40% + 25px); } .mediabox:before, .mediabox:after { content: ''; display: table; } .mediabox:after { clear: both; } } @media screen and (max-width: 32em) { .tabs nav ul, .tabs nav ul li a { width: 100%; padding: 0; } .tabs nav ul li { width: 20%; width: calc(20% + 1px); margin: 0 0 0 -1px; } .tabs nav ul li:last-child { border-right: none; } .mediabox { text-align: center; } .mediabox img { float: none; margin: 0 auto; max-width: 100%; } .mediabox h3 { margin: 1.25em 0 1em; } .mediabox p { margin: 0; } } |
Javascript часть
И подключаем в конце страницы небольшой Javascript плагин(его можно скачать здесь):
1 2 3 4 | <script src="js/cbpFWTabs.js"></script> <script> new CBPFWTabs( document.getElementById( 'tabs' ) ); </script> |
Вывод
Я думаю вы и сами понимаете как важна адаптивность. Надеюсь вам понравились данные вкладки и вы найдете где их можно применить.
Успехов!
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Отличные вкладки! Спасибо!
Добрый день! Ничего непонятно по поводу иконок еды у вкладок…как мы указываем им путь и какое разширение у них?
Здравствуйте, Алексей!
Скачайте архив с исходниками. Путь к изображениям, например, для первой вкладки, задается в строках: 30, 35 и 40. Указывать высоту и ширину не нужно, потому что изображения должны быть адаптивными (подстраиваться под ширину вкладки в зависимости от размера окна браузера).
Размер этих изоборажений: 360х195 px.
Дело в том, что я хочу поставить свои изображения, они у меня в png/jpg, пытался прописать путь, но что они не появились.
Потому путь к изображению необходимо указывать относительно файла стилей.
Ок) я все равно ничего не понял). Как мне вместо СВГшек вставить PNG?
Алексей, путь к изображениям задается вот в этих строках:
Для 1-й вкладки в строках: 30-й, 35-й и 40-й.
Для 2-й вкладки в строках: 48-й, 53-й и 58-й.
Для 3-й вкладки в строках: 65-й, 70-й и 75-й.
Для 4-й вкладки в строках: 82-й, 87-й и 92-й.
Для 5-й вкладки в строках: 99-й, 104-й и 109-й.
Всё в файле index.html.
P. S. Указывать высоту и ширину не нужно, потому что изображения должны быть адаптивными.
Я имел в виду не большие картинки, а мелкие иконки рядом с заголовками, те, что меняют свой цвет: Магазин Напитки Еда Лаборатория Список. В принцие, я смог вместо СВГ вставить обычные ПНГ, но он не меняют свой цвет) Ковырялся в исходниках, но там нет картинок, а только координаты.
Иконки у вкладок задаются в строках: с 94-й по 112-ю. В файле component.css. Там используются иконочные шрифты "icomoon".
Скажите, пожалуйста, а как сделать не столбцы, а горизонтальные блоки
Здравствуйте, Игорь!
Необходимо разместить меню в одном столбце, а контент в другом. То есть сделать 2 столбца.
Если не разберетесь, то рекомендую посмотреть на готовое решение в данном мини-курсе: "Лендинг за 60 минут".
Все доступно и понятно с горизонтальным расположением. Если необходимо расположить Табы вертикально — необходимо только переписать CSS или же надо будет изменить и HTML?
Спасибо. Да, все верно, можно использовать лишь CSS.