css/html анимации

Question

css/html анимации

Рейтинг: 0Ответов: 2Опубликовано: 03.02.2023

как сделать блок в который можно поместить ссылки и он с помощью кнопки выдвигался ( с права на лево )? ( по началу его не должно быть видно )

css html css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 0

Алгоритм:

Создаем два блока -- внешний и внутренний;
Внешний должен иметь св-во position: relative и overflow: hidden. Это нужно для того, чтобы можно было позиционировать внутренний блок и при его выходе за пределы внешнего блока он не отображался;
Внутреннему задаем абсолютное позиционирование, смещаем его через left:100% за пределы внешнего. Ну и задаем параметры анимации;
Добавляем кнопку, привязываем к ней обработчик клика, в обработчике добавляем/убираем класс, сигнализирующий о том, что блок показан/убран;
При добавленном классе прописываем css-правило, чтобы блок сместился до left: 0;
Остальное -- украшательства

Пример:

const btn = document.querySelector('button');
const outerBlock = document.querySelector('.outer-block');

btn.onclick= () => {
  outerBlock.classList.toggle('links-shown');
}

.outer-block {
  width: 200px;
  height: 100px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.inner-block {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 100%;
  top:0;
  transition: 0.5s linear;
}

.inner-block a {
  display:block;
  color: #fff;
}

.links-shown .inner-block {
  left: 0;
}

<div class="outer-block">
  <div class="inner-block">
    <a href="#">1234567890</a>
    <a href="#">1111111111</a>
    <a href="#">2222222222</a>
  </div>
</div>


<button>ТЫК</button>

Answer 2

▲ 0

Не претендую на правильность ответа, но можно реализовать с помощью JS

function openNav(id) {
  document.getElementById(id).style.right = "0%";
}

  function closeNav(id) {
  document.getElementById(id).style.right = "-100%";
}

body {
   display: flex;
   flex-direction: column;
   margin: 0;
   width: 100%;
   background-color: rgb(224, 224, 224);
   font-family: Arial, Helvetica, sans-serif;
 }

header {
   display: flex;
   position: fixed;
   width: 100%;
   height: 50px;
   background-color: black;
   transition: all 0.5s ease;
}

.menu {
   width: auto;
   height: auto;
   color: aqua;
   padding: 10px 15px;
   background: gray;
   border: 0;
   border-radius: 5px;
   outline: none;
   margin: 6px;
   cursor: pointer;
}


.overlay {
   height: 100vh;
   width: 50%;
   position: fixed;
   z-index: 1;
   top: 50px;
   bottom: 0;
   right: -100%;
   overflow: auto;
   transition: 0.5s;
 }
 
 .overlay-content {
   position: absolute;
   
   background-color: #fefefe;
   border-radius: 15px;
   width: 100%;
   height: 100%;
 }

 
 .line {
   display: flex;
   width: auto;
   margin: 10;
   border: 1px solid gainsboro;
 }
 
 .modal-body {
   padding: 10px 15px;
 }
 
 .modal-params {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin: 0;
   width: auto;
   height: auto;
 }
 
 .params {
   vertical-align: middle;
   color: rgb(0, 0, 0);
   font-size: 16px;
   font-weight: lighter;
   align-items: center;
   margin: 10;
   width: auto;
   height: 20px;
   cursor: pointer;
 }
 
 .params>img {
   vertical-align: middle;
   margin-right: 10;
   width: 20;
   height: 20;
 }

<header>
    <div class="menu">Ссылки</div>
</header>

   <!-- The Modal -->
  <div id="myNav" class="overlay">
    <div class="overlay-content">
    <div class="menu">Закрыть</div>
      <div class="modal-body">
        <div class="modal-params">
          <div class="params"><a href="#">Сылка 1</a></div>
          <div class="params"><a href="#">Сылка 2</a></div>
          <div class="params"><a href="#">Сылка 3</a></div>
          <div class="line"></div>

          <div class="params"><a href="#">Сылка 4</a></div>
          <div class="params"><a href="#">Сылка 5</a></div>
        </div>
      </div>
    </div>
  </div>

css/html анимации

Ответы