6

Кто знает как приблизительно сделать такой коллапс? Верстаю на bootstrap. введите сюда описание изображения

5
  • Сильно сочувствую... 12 мар 2019 в 10:26
  • Похоже на accordion. 12 мар 2019 в 10:27
  • Так и есть, в просторах интернета не нашел похожего. Может тут кто подскажет. 12 мар 2019 в 10:28
  • 1
    Я так думаю, что похожего и не будет. Здесь специфическая анимация открытия, изменение бакграунда. Только велосипед пилить, по другому наверное никак. 12 мар 2019 в 10:37
  • 1
    данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему) 4 апр 2019 в 14:46

1 ответ 1

7

const accordeonItems = document.querySelectorAll('.accordeon-item');
let timer;

accordeonItems.forEach((item, i) => {
  if(i > 0){
    //"прижимаем" вправо все элементы, начиная со второго
    item.style.width = `${(accordeonItems.length - i) * 60}px`;
  }
  
  item.addEventListener('click', (evt) => {
    // при клике на элемемент опять перебираем все
    accordeonItems.forEach((item, j) => {
      if(j < i){
        // если индекс элемета меньше индекса того, 
        // по которому кликнули, то "отправляем" влево
        item.style.width = `calc(100% - ${j*60}px)`;
      }else if(j > i){
        // если нет, то вправо
        item.style.width = `${(accordeonItems.length - j) * 60}px`;
      }else if(j == i){
        // если индексы равны, то влево с анимацией
        item.style.width = `calc(100% - ${j*60-10}px)`;
        clearTimeout(timer);
        timer = setTimeout(() => {
          item.style.width = `calc(100% - ${j*60}px)`;
        }, 200);
      }
      
      // убираем класс active у всех
      item.classList.remove('active');
      
      // и добавляем тому, по которму кликнули
      evt.currentTarget.classList.add('active');        
    });
  });
  
});
.accordeon{
  position: relative;
  width: 100%;
  height: 60px;
}

.accordeon-item{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: #6ad9ff;
  border: 3px solid #fff;
  border-radius: 30px;
  padding: 5px;
  box-sizing: border-box;
  transition: width 200ms;
  cursor: pointer;
}

.accordeon-item.active{
  background: #0093e9;
}

.accordeon-item:first-child{
  background: #fec202;
  border: 3px solid #fec202;
}

.accordeon-item-title {
    float: left;
    background: #7a00ff;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    text-align: center;
    line-height: 44px;
    color: #fff;
}
<div class = "accordeon">
  <div class = "accordeon-item">
    <div class = "accordeon-item-title">
      1
    </div>
  </div>
  <div class = "accordeon-item">
    <div class = "accordeon-item-title">
      2
    </div>
  </div>
  <div class = "accordeon-item">
    <div class = "accordeon-item-title">
      3
    </div>
  </div>
  <div class = "accordeon-item">
    <div class = "accordeon-item-title">
      4
    </div>
  </div>
  <div class = "accordeon-item">
    <div class = "accordeon-item-title">
      5
    </div>
  </div>
</div>

2
  • там еще анишка есть... пункт меню не просто выдвигается, а еще немного назад возвращается
    – Dmytro
    12 мар 2019 в 11:57
  • Все верно, accordion как и выше писал. 12 мар 2019 в 13:07

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.