Простые табы на 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
🤟 Живи, а работай в свободное время! ©
Пікірлер: 319
Вангую курсы JS от Евгения: Начало 1. Нафиг js - делаем всё при помощи css! Конец.
@FreelancerLifeStyle
4 жыл бұрын
Ахахах)) Если бы))
@user-bz5hl1tk1r
4 жыл бұрын
Не, ну а если можно не извращаться и сделать проще, это ж классно. А js оставить на более сложные случаи.
@tyafizi
3 жыл бұрын
Так да. Всё что можно делать через css - желательно делать через него. Так будет более производительно
Постоянно захожу посмотреть не пропал ли ты. Так вот, не пропадай, видосики огонь
@FreelancerLifeStyle
4 жыл бұрын
Я тут) спасибо!
Спасибо парень! Начинаю только изучать Html и Css, в связи с этим искал на разных источниках, как сделать табы. Мало того, что ничего не понятно, так и ещё и не получается по ним сделать всё качественно. Ты всё чётко и ясно объяснил, ещё раз спасибо. Продолжай выпускать контент в том же ключе!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Огромное спасибо за полезную информацию и приятную манеру подачи материала. Настроение поднимаешь 😘
@FreelancerLifeStyle
4 жыл бұрын
Спасибо, стараюсь!
Для меня, как для подписчика и зрителя контента Жеки, рубрика "Как это сделать?" - скорее звучит как "Учиться - так взахлеб".
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Я рад!
@lera6580
4 жыл бұрын
100%))) я так сериалы не смотрела, как за Женей наблюдаю. вот все феномен не могу понять... дико круто, что еще и Автор в видео - это точно. ну и подача мега-крутая. Многое смотрю даже из того, что применяю давно и нахожу новые "ништяки") откуда Евгений взялся вдруг в этом хаосе ... надо поддерживать всем, чем можешь, вангую Евгению большие успехи.
Всё гениальное, просто и доступно, как бы сложно, оно не было выполнено! Благодарю!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Результат урока 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/
Спасибо Женя! очень круто, ты как всегда полон крутых идей, желаю что бы твой канал развивался и распространялся как микробы))) то есть очень быстро и стремительно, очень жду от тебя JS, удачи тебе!!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Как всегда круто и полезно) Без всякой фигни, плюс круто тем, что обходимся более простыми средствами.
Спасибо за качественные уроки! Ты помогаешь становиться людям лучше 🙌
Здравствуйте, я хочу поблагодарить вас за все что я знаю, я студент технологического колледжа когда у нас начались практические занятия я заранее знал что надо делать и все это благодаря вам Огромное вам спасибо Пожалуйста выпускайте чаще такие видео которые реально пригодятся в работе то есть на подобии этого Желаю всего наилучшего
Качественный контент, спасибо. Будем учиться, глядишь что получится))
@FreelancerLifeStyle
4 жыл бұрын
Все получится!
Молодец Жека! Только начал смотреть этот видос и сразу лайк. Потому что знаю, будет информативно и понятно
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Добрый день! Благодарю, Женя, за полезный функционал и понятное объяснение! Успехов, профессиональных и личностных достижений, развития каналу и новых подписчиков! 👍🤝🙂
Не перестаешь удивлять, так держать Евгений)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
За text-overflow отдельная благодарность.
отлично и просто! смотрел в инете про эти табы, все так сложно, а у тебя бац-бац и готово! так держать!!
Как всегда красавчик, как всегда лайк. Спасибо тебе огромное что занимаешься этим делом!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Как всегда на высоте! Отличный видос! :)
Великолепно! Век живи - век учись. Огромное спасибо)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
@pepelac128
4 жыл бұрын
И дураком помрешь
В коде переместить кнопки под табы (и вынести их из контейнера nav), флексом переместить их вверх, а стиль активной кнопки таба тогда можно задавать через селектор #tab01:target~[href^=“#tab01”] {...} Тогда в мобильней версии кнопки можно вытянуть на всю длину и весь текст будет виден.
Как всегда просто ОГОНЬ!!!!! Спасибо!!!
Большое спасибо тебе за твою работу на YouTybe!!!! Мне очень нравятся твои видео. С твоей помощью я быстро и эффективно изучаю необходимые мне азы для работы front-end разработчиком))))) Желаю тебе увеличение канала и новых идей)
Спасибо ЖЕКА!! Очень актуальный и полезный урок)))
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Крутяк. Здорово. Удивился тому, что можно обойтись вез ява скрипта! Лойс!
Это шикарно) просто и элегантно
С относительно новым тегом делать табы и разворачивать описание стало намного быстрее и проще
@vitaliyyasinskiy3689
3 жыл бұрын
интересно, никогда его не использовал
Спасибо большое за полезную информацию!
Жека, спасибо за годноту!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Спасибо за мастер класс!!!
Супер! Ждем чистый JS!) Спасибо за труды!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Видео бомба. Канал бомба. Просто уважение и лайк. Было бы ещё хорошо, если бы подсказки писал бы и в css
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Что-то придумаю
Спасибо тебе за уроки!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Очень суперовое видео. Подскажите пожалуйста а как сделать что бы табы переносились на строку ниже? Для трёх вкладок вариант отличный но если будет больше 10 вкладок то этот вариант попросту не подходит.
Spasibo za kachestvenniy kontent)
Супер объяснения, как раз хотел что то сделать с табами
Как сделать сразу чтоб 1 таб был открыт, без дополнения ссылки?
@smert-chekistam
2 жыл бұрын
Всё же объяснили на последней минуте!
@ilgizreklama
Жыл бұрын
input type="radio" лучше использовать если какой то блок при переходе на страницу должна быть открыта
Делал подобное через JavaScript, ибо не знал про такой метод. Спасибо, очень интересно!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Вот опять моя капилочка знаний немного наполнилась, спасибо !!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Все видео очень актуальны!
Очень полезно и познавательно.
Спасибо, супер урок)!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Женя, спасибо! Как всегда все просто супер! Поделись программой которой ты пользуешься для переключение рус/игл текст? Эффект джина мне тоже понравился!
@FreelancerLifeStyle
3 жыл бұрын
Пунтосвитчер
вечер добрый. такой вопрос . как быть с подтягиванием хэша к верхнему краю браузера , при большом заполнении контента как происходит на 10,08 минуте ну и дальше по видео?
*Как всегда крутое видео!!! Но есть вопрос:* *Как можно заменить теги , чтобы при большом контенте не было такого, что при нажатии на псевдоэлемент :before не опускалась страница вниз к самим tabs__block'ам, а оставалась на месте для удобства использования?*
@auditore_1459
3 жыл бұрын
к сожалению, это невозможно именно при этом способе осуществления. дело в том, что кнопки "первая вкладка" и т.д. являются ссылками, которые при нажатии отправляют нас туда, куда указывает их атрибут href. таким образом, при нажатии на эти ссылки браузер отправляет нас к самой "цели" и показывает эту цель в самом верху экрана. я очень надеюсь, что я ошибаюсь и Евгений скажет, что это очень просто исправляется. до сих пор я осуществлял все это на jQuery, что снимало указанную проблему) Евгению огромное спасибо за его труд. слежу, смотрю, наслаждаюсь и учусь тому, чего не знаю. просто, без замудренностей. шикарно, благодарю)
@BboyMidnigth
Жыл бұрын
@@auditore_1459 Столкнулся с такой же проблемой. Скажи как ты через jQuery убрал эту проблему??
@auditore_1459
Жыл бұрын
@@BboyMidnigth стоит повесить событие click() на вкладку и добавлять класс active, например, к нужной. и, соответственно, к ее контенту. на вкладку можно повесить атрибут data-target, чтобы прямо из ее данных находить требуемый контент. перед добавлением класса нужно почистить ВСЕ вкладки и ВЕСЬ контент от класса active. грубо говоря, сначала закрываем все, потом открываем нужную
Благодарю за подробные и понятные уроки, второй раз уже спасаете личинку фронтендера
Спасибо за урок👍🚀🚀🚀
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Благодарю Вас за видео.
Подписался на канал. Очень понравился стиль изложения материала, доступность, дикция ведущего, легкость подачи. И сразу возникает вопрос - Евгений, есть ли у вас видео на тему создания форм с вспомогательными формами выбора значений? Это когда, например, в форме есть два поля: "Водитель" "Номер автомобиля" При этом значения этих полей заполняются пользователем не с клавиатуры, а выбираются из списков, открывающихся в отдельном вспомогательном окне (так называемой форме выбора), как из справочника. Или хотя бы, в сторону какой технологии покопать, чтобы такое реализовать (именно с точки зрения верстки)?
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Такого случая еще небыло
Годный видос!!!)))хотелось бы еще какие-то сложные решения по табам, c чистым js, я думаю многие поддержат
@FreelancerLifeStyle
3 жыл бұрын
Сделаю!
А что за расширение для VScode у вас стоит, которое показывает результат работы?????
Решение конечно интересное и понимаю, что вариант для наглядности сделал, но думаю при малом разрешении уместно было бы и информативные иконки с названием вкладки юзать для такого подхода, или же вообще чтобы они заменяли текст полностью). А вообще спасибо за такой информативный контент, очень крутой! Надеюсь к концу 20-го 100к подписчиков наберёшь на волне хайпа IT и фронтенда).
@FreelancerLifeStyle
4 жыл бұрын
Спасибо, я тоже надеюсь)
@MrAlexander88m
4 жыл бұрын
Сейчас хайп в машинном обучении. Весь этот фронтенд нахрен никому не нужен будет через пару лет ибо ИИ уже умеет верстать легкие макеты. Скоро фронтенд разработчики нахрен никому не нужны будут, так что учите бакенд или что-нибудь поинтереснее.
@user-qq1ig7jf5k
4 жыл бұрын
@@MrAlexander88m Понятно, что станет не нужен, но понимание того, "как это работает" еще никогда и никому не мешало в любом деле.
@cryfos
4 жыл бұрын
@@MrAlexander88m вот только что будет при наполнении контентом крупного проекта сетевого магазина, владелец которого решил все переиначить на свой "дизайнерский вкус" при помощи не ИИ, а при помощи индийский ребят на фрилансе(естесно, чтобы съэкономить). Потом никакой ИИ не разберет что к чему там. Взять к примеру конструкторы сайтов. Сайтов наделали, а потом не знают как и что добавить и всё у них плывёт. В общем про роботов тоже говорили, что заменять людей. Однако живём и дальше.Работаем как-то.
@MrAlexander88m
4 жыл бұрын
@@cryfos творчество всегда присутствует и никогда не умирает. Взять например тех же кузнецов... Но сейчас же в универах не учат кузнечному делу... Кстати, про контент. Сейчас как раз таки при помощи машинного обучения ставят ценники на товары в крупных сайтах типа Амазон. Ну а Индусы разные бывают... Вон, половина работников Гугл - Индусы...
Круто сделано!
Подскажите пожалуйста как сделать смену цвета шрифта при нажатии на вкладку в табах? Пробовал псевдоклассы, hover,focus,active, но шрифт меняется только когда навожу мышь, а нужно чтобы был постоянно другого цвета пока не переключу на другую вкладку.
Чувак, ты крут! Спасибо!
супер, классно, спасибо
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Спасибо за табы ) Теперь жду табы в табах )
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Большое спасибо !
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Спасибо огромное, очень помог
Жека привет, подскажи пожалуйста как на винде сделать на панели задач много значков приложений как у тебя?
5:07 для важных переговоров
Появился как Джин из бутылки))) Привет-привет! смотрю ^^
@FreelancerLifeStyle
4 жыл бұрын
Привет)
Ну наконец-то, хоть что-то нормальное на этом ютубе 😁
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Ооохх спасибо огромное)))
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Беру себе на вооружение, спасибо! 👍
Нааииисс!) спасибо, ты лучший!)
Спасибо за видео! Подскажите, пожалуйста, что нужно добавить или изменить, чтобы на активной вкладке изменился цвет названия вкладки?
@Eduard_1407
Жыл бұрын
башку сейчас ломаю над этим)если разобрался-напиши пожалуйста по-братски)
@user-nl9gm1uv7g
Жыл бұрын
@@Eduard_1407 тоже часа 3 думал, походу только через js
А как можно изменить текст в медиа запросе? Например в десктопной версии было написано вторая вкладка, а на смартфоне было бы просто вторая
@cg_man
2 жыл бұрын
Как вариант делаешь два элемента, пишешь вторая вкладка и вторая. для смартфона скрываешь дисплей ноне. Прописываешь медиа запрос и меняешь там дисплей наоборот
Благодарю!
Добрый день, подскажите пожалуйста, как убрать скачки экрана при нажатии на ссылку если контента много на странице, имею введу, что если ссылка где то посередине и при нажатии на неё, текст становится вначале экрана, происходит резкий скачек контента.
Здравствуйте. Можно ли написать скрипт для табов на чистом HTML без css? Просто у меня есть личный блог, где поддерживается только html, а переходить на платный тариф не вижу смысла из-за очень низкой посещаемости.
спасибо за курс по html, с нетерпением жду js. и конечно же, "живу, а работаю в свободное время". и также вопрос : почему вы перешли на vs code?
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста. Вот будет стрим отвечу на подобные вопросы
Класс. Ждём JS. Женя вопрос, немного о grid(ах) раскажеш? Что это такое, и с чем его едят?
@FreelancerLifeStyle
4 жыл бұрын
Расскажу
Огромное спасибо
Оч крутой способ, спасибо тебе!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Спасибо за урок! А как сделать табы для catalog.section.list Битрикс?
Привет, Евгений. Недавно начал тебя смотреть и никак не могу понять один нюанс. Для примера: есть запись .class li > ul и запись .class li ul. Чем они отличаются? И вообще какую роль выполняет елемент ">"? Спасибо за твою работу на канале!
@FreelancerLifeStyle
4 жыл бұрын
> - это только первый уровень вложенности.
Обожаю эту песню в конце
@FreelancerLifeStyle
4 жыл бұрын
Я тоже)
@lera6580
4 жыл бұрын
музыка в конце ассоциируется с чем-то вроде "да, я крутая! " ))
@lera6580
4 жыл бұрын
ну, мы все здесь крутые. пока одни сходят с ума от безделья или уходят в серию роликов про коронавирус, тратят время на пыво и шоу - мы тут с Евгением мозг качаем))
а что делать есть есть еще блок с табами на странице? как сделать так чтобы было выбрано сразу два таба?
Евгений, внимание вопрос Вы верстаете в реальном времени через browserSync? Почему у вас при измении, допустим, отступа контент едет плавно? У меня все дерганое :C
Круто, спасибо огромное! А про выпадающие списки такой туториал будет? Или я что пропустил? Жека, мой почет и уважение! Спасибо за твой труд.
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста! Про выпадающее меню было уже в этом плейлисте
@tirrex1141
4 жыл бұрын
@@FreelancerLifeStyle понял, спасибо! Извини, что отвлек.
Жека, давай плэйлист по оптимизации: google page speed по lazy load и всякое такое
Когда на дворе постапокалипсис, самое время заварити каву, и глянуть Женины видосы🙂) Спасибо Женя, как всегда отлично и полезно🙂👍👍👍)Я сначала думал, что будеш через чекбоксы делать, интересно)
@FreelancerLifeStyle
4 жыл бұрын
Через чекбоксы круче, это самый самый простой вариант)
5:59 когда прописал псевдокласс к блоку который по задумка должен появляться, но у меня не появляется. (он игнорирует display: block;)
@user-qt1nl8sz1m
3 жыл бұрын
Напиши то же самое только после того как написал display none
Сама клёвая заставка)
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Спасибо что сделал это. Не думал что это так легко. Ещё одна идея есть для тебя)). Есть такая штука как якоря, покажи как делать плавные якоря простым кодом, потому что же опять в интернете много кода и мне кажется что для этого всего лишь нужно прописать несколько строк. Спасибо заранее!!! Твой вечный подпищик)
@FreelancerLifeStyle
4 жыл бұрын
Сделаю и по якорям
Женя можете мне ответить, как у вас сразу результат сверху . Мне чтобы посмотреть результат нужно в файлы заходить, а у вас сразу???
Уписаться можно от восторга 👍👍
Спасибо!!!
а в эти вкладки можно другие страницы сайтов вставлять?
Табы работают только с текстом или можно сделать к примеру форму регистрации на 1 вкладке, на 2 вкладке форму авторизации на 3 ещё что-то
@FreelancerLifeStyle
4 жыл бұрын
Все что угодно
Женя, а можно поподробнее остановиться и заострить внимание на ::after ::before? А то что-то туплю и до конца не понимаю их свойства
@FreelancerLifeStyle
4 жыл бұрын
Вот тут все есть kzread.info/dash/bejne/mYGTm81qlbrPiKQ.html
Вопрос! После клика на любую из вкладок, у меня меняется таб, но страница прокручивается и таб оказывается в самом верху экрана, как исправить?
а почему бы не покрасить вкладки непрямую? .vkladka:focus { background-color: color; } ?
Я сохранил код предыдущего видео табы и сегодня использовал на странице товара Жека спасибо большое
@FreelancerLifeStyle
4 жыл бұрын
Супер!
Дякую за корисні відео!
Можно ли открыть ссылку через псевдокласс :cheked или он только для Input действует?
@user-jo2rh1mn5x
3 жыл бұрын
Нет, только для инпутов. Но, табы на инпутах лучше делать (если без джс).
Воу, круто. Не подскажешь плагин на Sublime Text. У тебя цвет в кубе подсвечивается. Заранее спасибо. Удачи
@sharyar_t
4 жыл бұрын
Это редактор VS Code
@fsoky
4 жыл бұрын
@@sharyar_t Разве? Ну ладно. Спасибо)
@FreelancerLifeStyle
4 жыл бұрын
Это vs code но можно и на sublime kzread.info/dash/bejne/qouctsiYn5ucfMo.html
Супер.😃
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Привет. Как добиться фейд эффектка ? Пример есть у бУтсрапа