Показать сообщение отдельно
  #1 (permalink)  
Старый 28.06.2020, 14:48
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 13

Как сделать вертикальное меню с анимацией?
Всем привет, подскажите пожалуйста, как сделать эффект "переезда" к нужному элементу в вертикальном меню? Сейчас на стадии изучения js и jq и пока не могу понять как сделать плавный переход анимации, подобный правому блоку в ВК в разделе "Диалоги"... Попробовал что то сделать, ниже приведу свой код, но так и не смог реализовать смену при клике и тем более понятия не имею, как сделать чтобы анимация шла именно от твоего элемента в том направлении котором надо, примерно понимаю как сделать от 1-ого элемента и идти до нужного, а потом останавливаться, а как сделать чтобы например из нижнего линия ехала вверх до нужного...
PS: Во вложенном изображении указано стрелкой на полоску, которая плавно перебегает на выбранный элемент этого блока, при этом в зависимости от того, сверху или снизу имеется активный блок, она не начинает с начала, а движется в нужном направлении к выбранному блоку... Помогите разобраться...

---------
Вот мой HTML
<div class = "col-xs-10 col-md-12">
                    <ul class="nav vl">
                      <li class="an ac_lt_nav"><a class="navigation_a" href="#">Блок 1</a></li>
                      <li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 2</a></li>
                      <li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 3</a></li>
                      <li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 4</a></li>
                      <li  class="an st_lt_nav"><a class="navigation_a" href="#">Блок 5</a></li>
                      <li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 6</a></li>
                      <li class="an st_lt_nav"><a class="navigation_a" href="#">Блок 7</a></li>
                    </ul>
                  </div>


Вот CSS
Код:
.st_lt_nav
{
	border-left: 4px solid #C0C0C0; 
	padding-left: 12px;
	margin-left: -12px;
	height: 30px;
   
}
.ac_lt_nav
{
	border-left: 4px solid blue; 
	padding-left: 12px;
	margin-left: -12px;
   height: 30px;
}
Вот JS под Jquery
$(document).ready(function(){
  $('.an').click(function () {
    let count= $('.an').length;
    //alert(count);

    if(!this.classList.contains('ac_lt_nav')){
    $(this).removeClass("st_lt_nav");  
    $(this).toggleClass('ac_lt_nav');
    }
    else
    {
      $(this).removeClass("ac_lt_nav");  
    $(this).toggleClass('st_lt_nav');
    }
    });
  });


Тут класс an используется как идентификатор нужной группы... Это один из последних мной нахимиченных скриптов, до этого еще по другому пробовал, всё не то... помогите плс.
Изображения:
Тип файла: jpg фывфыаыв.JPG (11.3 Кб, 4 просмотров)
Ответить с цитированием