Простые табы на HTML и CSS. Как это сделать?

Сегодня я решил показать и рассказать как сделать простые табы (вкладки) используя только HTML и CSS. В уроке показаны интересные решения включающие псевдокласс target и свойство text-overflow.
🔴 Результат урока fls.guru/howtodoit/howtodoit_1...
☝️ Внимание, это примитивное решение с рядом недостатков. Используйте только там где оно достаточное.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@fN9ne]

Спасибо парень! Начинаю только изучать Html и Css, в связи с этим искал на разных источниках, как сделать табы. Мало того, что ничего не понятно, так и ещё и не получается по ним сделать всё качественно. Ты всё чётко и ясно объяснил, ещё раз спасибо. Продолжай выпускать контент в том же ключе!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-lt5is3do2d]

Огромное спасибо за полезную информацию и приятную манеру подачи материала. Настроение поднимаешь 😘

[@FreelancerLifeStyle]

Спасибо, стараюсь!

[@zmeygorynych5684]

Как всегда круто и полезно) Без всякой фигни, плюс круто тем, что обходимся более простыми средствами.

[@elenavolkova5950]

Постоянно захожу посмотреть не пропал ли ты. Так вот, не пропадай, видосики огонь

[@FreelancerLifeStyle]

Я тут) спасибо!

[@pepelac128]

Вангую курсы JS от Евгения: Начало 1. Нафиг js - делаем всё при помощи css! Конец.

[@FreelancerLifeStyle]

Ахахах)) Если бы))

[@user-bz5hl1tk1r]

Не, ну а если можно не извращаться и сделать проще, это ж классно. А js оставить на более сложные случаи.

[@tyafizi]

Так да. Всё что можно делать через css - желательно делать через него. Так будет более производительно

[@FreelancerLifeStyle]

Результат урока fls.guru/howtodoit/howtodoit_12.zip Напоминаю, это примитивное решение с рядом недостатков. Используйте только там где оно достаточное. Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

[@user-ki5bm5ku7j]

Качественный контент, спасибо. Будем учиться, глядишь что получится))

[@FreelancerLifeStyle]

Все получится!

[@user-ej2cx5ig9d]

Всё гениальное, просто и доступно, как бы сложно, оно не было выполнено! Благодарю!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-kv5ze5qc2b]

Спасибо за качественные уроки! Ты помогаешь становиться людям лучше 🙌

[@sultan_243]

Не перестаешь удивлять, так держать Евгений)

[@FreelancerLifeStyle]

Спасибо!

[@777bujhm]

Спасибо Женя! очень круто, ты как всегда полон крутых идей, желаю что бы твой канал развивался и распространялся как микробы))) то есть очень быстро и стремительно, очень жду от тебя JS, удачи тебе!!!

[@FreelancerLifeStyle]

Спасибо!

[@user-mi4ms5be1o]

За text-overflow отдельная благодарность.

[@user-jz5cd5uu8w]

Добрый день! Благодарю, Женя, за полезный функционал и понятное объяснение! Успехов, профессиональных и личностных достижений, развития каналу и новых подписчиков! 👍🤝🙂

[@hamzatpadiev627]

Здравствуйте, я хочу поблагодарить вас за все что я знаю, я студент технологического колледжа когда у нас начались практические занятия я заранее знал что надо делать и все это благодаря вам Огромное вам спасибо Пожалуйста выпускайте чаще такие видео которые реально пригодятся в работе то есть на подобии этого Желаю всего наилучшего

[@ffedchik]

Для меня, как для подписчика и зрителя контента Жеки, рубрика "Как это сделать?" - скорее звучит как "Учиться - так взахлеб".

[@FreelancerLifeStyle]

Спасибо! Я рад!

[@lera6580]

100%))) я так сериалы не смотрела, как за Женей наблюдаю. вот все феномен не могу понять... дико круто, что еще и Автор в видео - это точно. ну и подача мега-крутая. Многое смотрю даже из того, что применяю давно и нахожу новые "ништяки") откуда Евгений взялся вдруг в этом хаосе ... надо поддерживать всем, чем можешь, вангую Евгению большие успехи.

[@user-ut3up9fc2n]

Молодец Жека! Только начал смотреть этот видос и сразу лайк. Потому что знаю, будет информативно и понятно

[@FreelancerLifeStyle]

Спасибо!

[@Medulla_oblongata01]

отлично и просто! смотрел в инете про эти табы, все так сложно, а у тебя бац-бац и готово! так держать!!

[@denisshoemaker3880]

Как всегда просто ОГОНЬ!!!!! Спасибо!!!

[@user-nb8ex1tq6r]

Как всегда на высоте! Отличный видос! :)

[@kotlancer]

Великолепно! Век живи - век учись. Огромное спасибо)

[@FreelancerLifeStyle]

Спасибо!

[@pepelac128]

И дураком помрешь

[@user-wf4np1ne2c]

Спасибо ЖЕКА!! Очень актуальный и полезный урок)))

[@FreelancerLifeStyle]

Пожалуйста!

[@enenotowitch628]

Супер! Ждем чистый JS!) Спасибо за труды!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-nu3iw9po7z]

Большое спасибо тебе за твою работу на YouTybe!!!! Мне очень нравятся твои видео. С твоей помощью я быстро и эффективно изучаю необходимые мне азы для работы front-end разработчиком))))) Желаю тебе увеличение канала и новых идей)

[@stanislavafanasiev5766]

Это шикарно) просто и элегантно

[@Dmitryderzhawin]

Как всегда красавчик, как всегда лайк. Спасибо тебе огромное что занимаешься этим делом!

[@FreelancerLifeStyle]

Спасибо!

[@user-vk1kb3xj6b]

Жека, спасибо за годноту!

[@FreelancerLifeStyle]

Пожалуйста!

[@MegaTesei]

Крутяк. Здорово. Удивился тому, что можно обойтись вез ява скрипта! Лойс!

[@fbr_xsfbr_xs2271]

Видео бомба. Канал бомба. Просто уважение и лайк. Было бы ещё хорошо, если бы подсказки писал бы и в css

[@FreelancerLifeStyle]

Спасибо! Что-то придумаю

[@nabi8297]

Спасибо за мастер класс!!!

[@user-ez9cu1gi4v]

Вот опять моя капилочка знаний немного наполнилась, спасибо !!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-cs5zp9rv9c]

Спасибо тебе за уроки!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-ob4jp1mq9u]

Spasibo za kachestvenniy kontent)

[@user-sq3bk1zc6b]

Делал подобное через JavaScript, ибо не знал про такой метод. Спасибо, очень интересно!

[@FreelancerLifeStyle]

Пожалуйста!

[@alex45779]

Все видео очень актуальны!

[@romaibragimov9872]

Спасибо большое за полезную информацию!

[@user-vv7pc6rk5m]

Очень полезно и познавательно.

[@denissycheuski6370]

Спасибо, супер урок)!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-sr9ic1jy5p]

В коде переместить кнопки под табы (и вынести их из контейнера nav), флексом переместить их вверх, а стиль активной кнопки таба тогда можно задавать через селектор #tab01:target~[href^=“#tab01”] {...} Тогда в мобильней версии кнопки можно вытянуть на всю длину и весь текст будет виден.

[@user-qb1sc3vx4e]

Супер объяснения, как раз хотел что то сделать с табами

[@brodyagaPATY]

Спасибо за урок👍🚀🚀🚀

[@FreelancerLifeStyle]

Пожалуйста!

[@kostrik6278]

С относительно новым тегом делать табы и разворачивать описание стало намного быстрее и проще

[@vitaliyyasinskiy3689]

интересно, никогда его не использовал

[@Toxa2424]

Спасибо за табы ) Теперь жду табы в табах )

[@FreelancerLifeStyle]

Пожалуйста!

[@user-pn2ev2je2l]

Благодарю Вас за видео.

[@zmeygorynych5684]

Годный видос!!!)))хотелось бы еще какие-то сложные решения по табам, c чистым js, я думаю многие поддержат

[@FreelancerLifeStyle]

Сделаю!

[@lunasvetdebil5979]

Благодарю за подробные и понятные уроки, второй раз уже спасаете личинку фронтендера

[@user-jy9sq8un6r]

Решение конечно интересное и понимаю, что вариант для наглядности сделал, но думаю при малом разрешении уместно было бы и информативные иконки с названием вкладки юзать для такого подхода, или же вообще чтобы они заменяли текст полностью). А вообще спасибо за такой информативный контент, очень крутой! Надеюсь к концу 20-го 100к подписчиков наберёшь на волне хайпа IT и фронтенда).

[@FreelancerLifeStyle]

Спасибо, я тоже надеюсь)

[@MrAlexander88m]

Сейчас хайп в машинном обучении. Весь этот фронтенд нахрен никому не нужен будет через пару лет ибо ИИ уже умеет верстать легкие макеты. Скоро фронтенд разработчики нахрен никому не нужны будут, так что учите бакенд или что-нибудь поинтереснее.

[@user-qq1ig7jf5k]

@@MrAlexander88m Понятно, что станет не нужен, но понимание того, "как это работает" еще никогда и никому не мешало в любом деле.

[@cryfos]

​@@MrAlexander88m вот только что будет при наполнении контентом крупного проекта сетевого магазина, владелец которого решил все переиначить на свой "дизайнерский вкус" при помощи не ИИ, а при помощи индийский ребят на фрилансе(естесно, чтобы съэкономить). Потом никакой ИИ не разберет что к чему там. Взять к примеру конструкторы сайтов. Сайтов наделали, а потом не знают как и что добавить и всё у них плывёт. В общем про роботов тоже говорили, что заменять людей. Однако живём и дальше.Работаем как-то.

[@MrAlexander88m]

@@cryfos творчество всегда присутствует и никогда не умирает. Взять например тех же кузнецов... Но сейчас же в универах не учат кузнечному делу... Кстати, про контент. Сейчас как раз таки при помощи машинного обучения ставят ценники на товары в крупных сайтах типа Амазон. Ну а Индусы разные бывают... Вон, половина работников Гугл - Индусы...

[@user-gf1hf6ux7z]

Чувак, ты крут! Спасибо!

[@playrun3077]

*Как всегда крутое видео!!! Но есть вопрос:* *Как можно заменить теги , чтобы при большом контенте не было такого, что при нажатии на псевдоэлемент :before не опускалась страница вниз к самим tabs__block'ам, а оставалась на месте для удобства использования?*

[@auditore_1459]

к сожалению, это невозможно именно при этом способе осуществления. дело в том, что кнопки "первая вкладка" и т.д. являются ссылками, которые при нажатии отправляют нас туда, куда указывает их атрибут href. таким образом, при нажатии на эти ссылки браузер отправляет нас к самой "цели" и показывает эту цель в самом верху экрана. я очень надеюсь, что я ошибаюсь и Евгений скажет, что это очень просто исправляется. до сих пор я осуществлял все это на jQuery, что снимало указанную проблему) Евгению огромное спасибо за его труд. слежу, смотрю, наслаждаюсь и учусь тому, чего не знаю. просто, без замудренностей. шикарно, благодарю)

[@BboyMidnigth]

@@auditore_1459 Столкнулся с такой же проблемой. Скажи как ты через jQuery убрал эту проблему??

[@auditore_1459]

@@BboyMidnigth стоит повесить событие click() на вкладку и добавлять класс active, например, к нужной. и, соответственно, к ее контенту. на вкладку можно повесить атрибут data-target, чтобы прямо из ее данных находить требуемый контент. перед добавлением класса нужно почистить ВСЕ вкладки и ВЕСЬ контент от класса active. грубо говоря, сначала закрываем все, потом открываем нужную

[@ruleti5347]

супер, классно, спасибо

[@FreelancerLifeStyle]

Пожалуйста!

[@lera6580]

Появился как Джин из бутылки))) Привет-привет! смотрю ^^

[@FreelancerLifeStyle]

Привет)

[@niceman5890]

Круто сделано!

[@user-wy1qd5oi3v]

Ну наконец-то, хоть что-то нормальное на этом ютубе 😁

[@FreelancerLifeStyle]

Спасибо!

[@xxnxzx]

Спасибо огромное, очень помог

[@yonjoo8258]

Ооохх спасибо огромное)))

[@FreelancerLifeStyle]

Пожалуйста!

[@user-jq6tr6rr8v]

Большое спасибо !

[@FreelancerLifeStyle]

Пожалуйста!

[@gin101]

Нааииисс!) спасибо, ты лучший!)

[@aleksei-demon9814]

Благодарю!

[@user-ns2tx6oc4q]

Женя, спасибо! Как всегда все просто супер! Поделись программой которой ты пользуешься для переключение рус/игл текст? Эффект джина мне тоже понравился!

[@FreelancerLifeStyle]

Пунтосвитчер

[@user-qq1ig7jf5k]

Подписался на канал. Очень понравился стиль изложения материала, доступность, дикция ведущего, легкость подачи. И сразу возникает вопрос - Евгений, есть ли у вас видео на тему создания форм с вспомогательными формами выбора значений? Это когда, например, в форме есть два поля: "Водитель" "Номер автомобиля" При этом значения этих полей заполняются пользователем не с клавиатуры, а выбираются из списков, открывающихся в отдельном вспомогательном окне (так называемой форме выбора), как из справочника. Или хотя бы, в сторону какой технологии покопать, чтобы такое реализовать (именно с точки зрения верстки)?

[@FreelancerLifeStyle]

Спасибо! Такого случая еще небыло

[@valentyndubin5441]

Когда на дворе постапокалипсис, самое время заварити каву, и глянуть Женины видосы🙂) Спасибо Женя, как всегда отлично и полезно🙂👍👍👍)Я сначала думал, что будеш через чекбоксы делать, интересно)

[@FreelancerLifeStyle]

Через чекбоксы круче, это самый самый простой вариант)

[@armenakcomp]

Беру себе на вооружение, спасибо! 👍

[@nb-cy6cw]

Сама клёвая заставка)

[@FreelancerLifeStyle]

Спасибо!

[@user-dm6tu9yu3i]

Спасибо что сделал это. Не думал что это так легко. Ещё одна идея есть для тебя)). Есть такая штука как якоря, покажи как делать плавные якоря простым кодом, потому что же опять в интернете много кода и мне кажется что для этого всего лишь нужно прописать несколько строк. Спасибо заранее!!! Твой вечный подпищик)

[@FreelancerLifeStyle]

Сделаю и по якорям

[@STELLS541]

Оч крутой способ, спасибо тебе!

[@FreelancerLifeStyle]

Пожалуйста!

[@panamaver4917]

Обожаю эту песню в конце

[@FreelancerLifeStyle]

Я тоже)

[@lera6580]

музыка в конце ассоциируется с чем-то вроде "да, я крутая! " ))

[@lera6580]

ну, мы все здесь крутые. пока одни сходят с ума от безделья или уходят в серию роликов про коронавирус, тратят время на пыво и шоу - мы тут с Евгением мозг качаем))

[@androideasycoding]

Очень суперовое видео. Подскажите пожалуйста а как сделать что бы табы переносились на строку ниже? Для трёх вкладок вариант отличный но если будет больше 10 вкладок то этот вариант попросту не подходит.

[@tirrex1141]

Круто, спасибо огромное! А про выпадающие списки такой туториал будет? Или я что пропустил? Жека, мой почет и уважение! Спасибо за твой труд.

[@FreelancerLifeStyle]

Пожалуйста! Про выпадающее меню было уже в этом плейлисте

[@tirrex1141]

@@FreelancerLifeStyle понял, спасибо! Извини, что отвлек.

[@user-zy4cy5tv7i]

Огромное спасибо

[@tannymissis4282]

Чувак, ты крутой!

[@FreelancerLifeStyle]

Спасибо!

[@lasusitatv2799]

Я сохранил код предыдущего видео табы и сегодня использовал на странице товара Жека спасибо большое

[@FreelancerLifeStyle]

Супер!

[@user-eu5xm7xv6q]

Спасибо!!!

[@smert-chekistam]

Уписаться можно от восторга 👍👍

[@user-jc5yr6wz5i]

Класс. Ждём JS. Женя вопрос, немного о grid(ах) раскажеш? Что это такое, и с чем его едят?

[@FreelancerLifeStyle]

Расскажу

[@safar6519]

5:07 для важных переговоров

[@ploxer9915]

спасибо за курс по html, с нетерпением жду js. и конечно же, "живу, а работаю в свободное время". и также вопрос : почему вы перешли на vs code?

[@FreelancerLifeStyle]

Пожалуйста. Вот будет стрим отвечу на подобные вопросы

[@user-bp3vk3uj8h]

Жека, давай плэйлист по оптимизации: google page speed по lazy load и всякое такое

[@user-zx6hh8jj7l]

Привет, Евгений. Недавно начал тебя смотреть и никак не могу понять один нюанс. Для примера: есть запись .class li > ul и запись .class li ul. Чем они отличаются? И вообще какую роль выполняет елемент ">"? Спасибо за твою работу на канале!

[@FreelancerLifeStyle]

> - это только первый уровень вложенности.

[@velyar]

Красаучик:)

[@FreelancerLifeStyle]

Спасибо!))

[@aleksandrsrudkevics6384]

Супер.😃

[@FreelancerLifeStyle]

Спасибо!

[@shumashok]

Спасибо за видео! Подскажите, пожалуйста, что нужно добавить или изменить, чтобы на активной вкладке изменился цвет названия вкладки?

[@Eduard_1407]

башку сейчас ломаю над этим)если разобрался-напиши пожалуйста по-братски)

[@user-nl9gm1uv7g]

@@Eduard_1407 тоже часа 3 думал, походу только через js

[@user-rj5mo1mf5p]

Очень познавательно и интересно. Но для мобилки в медиа запросе табы перевести бы в вертикальное положение, - в спойлер.

[@odduck41]

А что за расширение для VScode у вас стоит, которое показывает результат работы?????

[@Sergey-rn2hj]

вечер добрый. такой вопрос . как быть с подтягиванием хэша к верхнему краю браузера , при большом заполнении контента как происходит на 10,08 минуте ну и дальше по видео?

[@Markeldo]

Можно ещё попробовать через скрытые радиобаттоны и их соседние элементы решать. Чуть сложнее получается, зато надёжнее в плане современных js-фреймворков с их роутингом. К тому же, можно задавать активную по умолчанию вкладку.

[@FreelancerLifeStyle]

Проблема в том, что не ясно обратиться к соседним элементам из CSS

[@anikinae]

Комментарий в знак благодарности за видео

[@FreelancerLifeStyle]

Спасибо!

[@annagrigorewa]

Я влюбилась.....

[@FreelancerLifeStyle]

😱😱😱 В код? 😅

[@annagrigorewa]

@@FreelancerLifeStyle Сначала в html, потом в css...потом в Жеку)

[@rodisguitar339]

все классно

[@user-si2lo2tb1s]

Интересная идея, не знал об этом. Я почему то думал что будет label c for для input radio будут в одном блоке и будут ссылаться на input которые помещены в отдельный блок, а после input шли бы 3 блока с текстами которые надо отобразить и сразу статическая привязка input[id="aaa"]:checked ~ div[class="aaa"] {display:block}

[@FreelancerLifeStyle]

~ он применим ко всем последующим, но не к предыдущим(

[@user-si2lo2tb1s]

@@FreelancerLifeStyle верно, по этому input располагаются сверху, а все блоки которые надо менять ставят после них, можно даже в отельном контейнере, только поменяется обращение с сиблинга на .родитель сиблинг[class="aaa"]{}. Это кстати вопрос по верстке который всегда задают на собеседованиях с middle frond-end)

[@TarasKasiukhnych]

Дякую за корисні відео!

[@Benedict_Chanal]

Жека привет, подскажи пожалуйста как на винде сделать на панели задач много значков приложений как у тебя?

[@user-jo7pj2zy2l]

Как сделать сразу чтоб 1 таб был открыт, без дополнения ссылки?

[@smert-chekistam]

Всё же объяснили на последней минуте!

[@ilgizreklama]

input type="radio" лучше использовать если какой то блок при переходе на страницу должна быть открыта

[@alex-troshin]

Евгений, внимание вопрос Вы верстаете в реальном времени через browserSync? Почему у вас при измении, допустим, отступа контент едет плавно? У меня все дерганое :C

[@Oreo_Raccoon]

Подскажите пожалуйста как сделать смену цвета шрифта при нажатии на вкладку в табах? Пробовал псевдоклассы, hover,focus,active, но шрифт меняется только когда навожу мышь, а нужно чтобы был постоянно другого цвета пока не переключу на другую вкладку.

[@fsoky]

Воу, круто. Не подскажешь плагин на Sublime Text. У тебя цвет в кубе подсвечивается. Заранее спасибо. Удачи

[@sharyar_t]

Это редактор VS Code

[@fsoky]

@@sharyar_t Разве? Ну ладно. Спасибо)

[@FreelancerLifeStyle]

Это vs code но можно и на sublime kzbin.info/www/bejne/rojLhZmVpJ1pgsk

[@Peschanyj_Voin_V]

Спасибо за урок! А как сделать табы для catalog.section.list Битрикс?

[@milazh4271]

Здравствуйте. Можно ли написать скрипт для табов на чистом HTML без css? Просто у меня есть личный блог, где поддерживается только html, а переходить на платный тариф не вижу смысла из-за очень низкой посещаемости.

[@variagc1232]

Женя, а можно поподробнее остановиться и заострить внимание на ::after ::before? А то что-то туплю и до конца не понимаю их свойства

[@FreelancerLifeStyle]

Вот тут все есть kzbin.info/www/bejne/nX7Cap5nmrycjqM

[@ivansavka3748]

супер

[@maxistocki6191]

Привіт, дякую за відео, але є питаннячко. Якщо контенту у вкладці багато то при натисканні на неї браузер перекидує на блок з контентом, і для того щоб натиснути іншу вкладку потрібно скролити усе догори, чи є вирішення цієї проблеми, тобто чи можна якось приліпити блок з контентом до навігаційного блоку щоб не було тих перепадів, дякую!

[@aramas36]

Добрый день, подскажите пожалуйста, как убрать скачки экрана при нажатии на ссылку если контента много на странице, имею введу, что если ссылка где то посередине и при нажатии на неё, текст становится вначале экрана, происходит резкий скачек контента.