Javascript.RU

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

Как сделать вертикальное меню с анимацией?
Всем привет, подскажите пожалуйста, как сделать эффект "переезда" к нужному элементу в вертикальном меню? Сейчас на стадии изучения 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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2020, 16:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,801

Сообщение от Wimko
Всем привет, подскажите пожалуйста, как сделать эффект "переезда"
нужен дополнительный элемент для перемещения.
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2020, 19:05
Интересующийся
Отправить личное сообщение для Wimko Посмотреть профиль Найти все сообщения от Wimko
 
Регистрация: 05.10.2019
Сообщений: 11

Как это? Вы предполагаете <span> какой то добавлять? Или что именно вы имеете в виду.
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2020, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,801

Сообщение от Wimko
Вы предполагаете <span> какой то добавлять?
да.
вариант очень древний тут
https://javascript.ru/forum/dom-wind...tml#post352643
есть более современные варианты, надо искать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вертикальное меню аккордеон ColT Javascript под браузер 2 24.02.2020 12:51
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Горизонтальное меню в двумя подменю по клику uliana-new Элементы интерфейса 1 31.03.2019 16:56
Как сделать плавное выдвигание и задвигание меню? INSIDER73 Элементы интерфейса 1 08.02.2018 10:15
Как сделать, чтобы выпадающее меню оставалось развернутым? Эдгар Элементы интерфейса 1 28.02.2011 18:43