Форум программистов, компьютерный форум, киберфорум
ПисательГудвин
Войти
Регистрация
Восстановить пароль
Оценить эту запись

Серия задач по фронтенду. Задача на вёрстку 1 - панель с вкладками (табами).

Запись от ПисательГудвин размещена 11.05.2022 в 14:41

Решил попробовать сделать серию задач по темам, наиболее часто встречающимся в реальном фронтенде (например, работа с типовыми интерфейсными компонентами - табы, модалки, слайдеры и т.п.; автоподгрузка контента при скроллинге страницы, ну и так далее). Жаль, нельзя сделать для этого новый блог.
Решения скидываю в личку, при условии, что человек сам хотя бы пытался что-то сделать и может показать свой код.

Задача:
Кликните здесь для просмотра всего текста

сделать панель с табами (вкладками), используя html+css+javascript. На картинке приведён образец, а так можете заполнять любым контентом. Обязательные условия:
- вкладок д.б. не менее трёх;
- размер каждой вкладки по вертикали должен зависеть от контента, а не быть фиксированным;
- при первоначальном открытии страницы д.б. активна крайняя левая вкладка;

Нажмите на изображение для увеличения
Название: Tabs_screen-1.jpg
Просмотров: 103
Размер:	908.7 Кб
ID:	7522 Нажмите на изображение для увеличения
Название: Tabs_screen-2.jpg
Просмотров: 79
Размер:	696.1 Кб
ID:	7523 Нажмите на изображение для увеличения
Название: Tabs_screen-3.jpg
Просмотров: 83
Размер:	659.4 Кб
ID:	7524

Дополнительная задача: сделать адаптив под ширину экрана 600px, чтоб всё было красиво, без выезжающих текстов (можно обрезать названия вкладок с многоточием на конце или делать переносы слов). Как-то вот так:

Нажмите на изображение для увеличения
Название: Tabs_screen-mobile.jpg
Просмотров: 74
Размер:	364.9 Кб
ID:	7525

Работающий образец
Показов 954 Комментарии 5
Всего комментариев 5
Комментарии
  1. Старый комментарий
    Аватар для Fedor92
    Цитата:
    Наверное, мы любим программирование, потому что в работающей программе есть что-то живое.
    Я стесняюсь спросить: а как ваша задача относится к программированию? Все задачи, которые вы поставили делаются на коленке максимум за полчаса. Причём подобное можно реализовать без js - одной html-разметкой.
    Запись от Fedor92 размещена 12.05.2022 в 09:44 Fedor92 вне форума
    Обновил(-а) Fedor92 12.05.2022 в 09:45
  2. Старый комментарий
    Ну так практические задачи и не должны быть сильно сложными, разве нет? Особенно в нашу эру клипового мышления) Думаю, надо, чтоб было не очень сложно, но при этом красиво.
    Без js сомневаюсь, что можно сделать. Буду благодарен, если покажете, как.
    Запись от ПисательГудвин размещена 12.05.2022 в 11:42 ПисательГудвин вне форума
  3. Старый комментарий
    Спасибо за решение, посмотрел с удовольствием (впрочем, видел такой способ и раньше, и не сказать, что он мне нравится).
    Но раз сказано в личку, значит - в личку. Я в данной теме хочу побудить народ делать самостоятельно, а не показывать всем готовые решения.
    Запись от ПисательГудвин размещена 12.05.2022 в 14:43 ПисательГудвин вне форума
  4. Старый комментарий
    Аватар для Fedor92
    Цитата:
    Спасибо за решение, посмотрел с удовольствием (впрочем, видел такой способ и раньше, и не сказать, что он мне нравится).
    А чем он может не нравиться? Кроссбраузерный, по стандартам HTML5. На загрузку не влияет. При желании можно докрутить анимацию - опять же на css. Одни плюшки. Вот только вы писали, что сомневаетесь, что без js можно. А теперь говорите видели. Неувязочка
    Запись от Fedor92 размещена 12.05.2022 в 15:53 Fedor92 вне форума
  5. Старый комментарий
    Ответил в личку.
    Запись от ПисательГудвин размещена 12.05.2022 в 17:56 ПисательГудвин вне форума
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru