Как сделать такие вкладки?

Question

Есть макет который нужно сверстать и там есть такой момент где нужно переключаться между страницами. Выглядит это так. Для реализации этого была у меня мысля сделать это с помощью вкладок, но не знаю правильно ли это вообще, может для этого есть вообще отдельная библиотека или вроде того, и если делать через вкладки, то как вообще?. Ну вот, как сделать такое переключение между контентом как на этом gif?

P.S. Если в случае с текстом все ясно, остается непонятным вопрос про реализацию таких табов с контентом

Answer 1

Можно так же сделать, что бы заголовки изначально были спрятаны под ссылками и затем при клике возвращать их в исходное положение... и так наверное правильнее будет с точки зрения семантики... но я сначала сделал, а потом подумал, поэтому вот:

const list = document.querySelector('.menu')

list.addEventListener('click', function(e) {
   if (
    e.target.id !== 'first' &&
    e.target.id !== 'second' &&
    e.target.id !== 'third'
   ) return
  
  document.body.dataset.stage = e.target.id
})

* {
  margin: 0;
  padding: 0;
}

:root {
  --left-column-width: 30vw;
}

body {
  height: 100vh;
  display: flex;
}

.column_left {
  width: 30vw;
  
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  
  background-color: tomato;
  z-index: 1;
}

.column_right{
  position: relative;
  
  width: 70vw;

  display: flex;
  
  background-color: lightblue;
  transition-duration: 0.5s;
}

.content {
  position: absolute;
  left: 0;
  top: 0;
  
  display: none;
  
  width: 100%;
  height: 100%;
}

.content_1 {
  background-color: gold;
}

.content_2 {
  background-color: peachpuff;
}

.content_3 {
  background-color: violet;
}

.box {
  align-self: flex-end;
 
  width: var(--left-column-width);
  height: calc(var(--left-column-width) / 2.5);
  
  background-color: lightgreen;
  
  transition-duration: 0.6s;
}

.box_2 {
  transform: translateX(110%);
}

.menu {
  position: relative;
  
  width: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  list-style: none;
}

/* черточка */
.menu::after {
  content: "";
  position: absolute;
  right: 20%;
  top: 15%;
  
  width: 3vw;
  height: 0.2vw;
  
  background-color: black;
  
  transition-duration: 0.5s;
  transition-delay: 0.1s;
  opacity: 0;
}

.menu__item {
  position: relative;
  
  font-size: 4vw;
}

/* спрятанные заголовки */
.menu__item::after {
  position: absolute;
  left: 0;
  top: 0;
  
  transition-duration: 0.4s;
  transition-timing-function: linear;
  opacity: 0;
}

.menu__item_first::after {
  content: "Раз";
}

.menu__item_second::after {
  content: "Два";
}

.menu__item_third::after {
  content: "Три";
}

/* анимация сдвигания пунктов меню */
[data-stage="first"] .menu__item_first {
  animation: item_first_animation 0.3s;
}

[data-stage="second"] .menu__item_second {
  animation: item_second_animation 0.3s;
}

[data-stage="third"] .menu__item_third {
  animation: item_third_animation 0.3s;
}

/* тут анимация вылетающих заголовков */
[data-stage="first"] .menu__item_first::after,
[data-stage="second"] .menu__item_second::after,
[data-stage="third"] .menu__item_third::after {
  opacity: 1;
}

[data-stage="first"] .menu__item_first::after {
  transform: translate(var(--left-column-width), 100%) scale(2);
}

[data-stage="second"] .menu__item_second::after {
  transform: translate(var(--left-column-width), -300%) scale(2);
}

[data-stage="third"] .menu__item_third::after {
  transform: translate(var(--left-column-width), -100%) scale(2);
}

/* анимация прямоугольника */
[data-stage="first"] .box_2,
[data-stage="second"] .box_2,
[data-stage="third"] .box_2 {
  transform: translateX(0);
}

/* смена контента */
[data-stage="first"] .content_1 {
  display: block;
}

[data-stage="second"] .content_2 {
  display: block;
}

[data-stage="third"] .content_3 {
  display: block;
}

/* анимация черточки */
[data-stage="first"] .menu::after,
[data-stage="second"] .menu::after,
[data-stage="third"] .menu::after {
  opacity: 1;
}

[data-stage="second"] .menu::after {
  transform: translateY(5vw);
}

[data-stage="third"] .menu::after {
  transform: translateY(10vw);
}

/* ********************************** */
@keyframes item_first_animation {
  50% {
    transform: translate(40%, 20%);
  }
}

@keyframes item_second_animation {
  50% {
    transform: translate(40%, -25%);
  }
}

@keyframes item_third_animation {
  50% {
    transform: translate(40%, -5%);
  }
}

<div class="column column_left">
  <div class="box">logo</div>
  <div class="menu">
    <div class="menu__item menu__item_first" id="first">Раз</div>
    <div class="menu__item menu__item_second" id="second">Два</div>
    <div class="menu__item menu__item_third" id="third">Три</div>
  </div>
  <div class="box box_2"></div>
</div>
<div class="column column_right">
  <div class="content content_1">контент 1</div>
  <div class="content content_2">контент 2</div>
  <div class="content content_3">контент 3</div>
</div>

БЛОГ НА HUSL

Как сделать такие вкладки?

Ответы (1 шт):