Как реализовать данную анимацию?

#javascript #html #css #jquery #navigation

Смысл в том, чтобы при наведении на число - оно отдалялось от других, но есть вот
пару проблем:
Я попробовал пару подходов, через псевдоэлементы и без них.
Проблема у первого в том, что я не знаю с какой стороны подойти к изменению положения
блока, который нужно отодвигать от остальных, да и сами псевдоэлементы, вероятно, это
не лучшее решение, так как ::before не растёт вверх от элемента.
Второй подход вероятно слишком "быдлокодерский" и я не могу через jQuery обратиться
именно к нужному родителю, чтобы он добавил класс своему потомку который я указал.

Вот изображение с примером такого меню:



https://codepen.io/4rmr3d1/pen/MWWjWXj

    

      

        

          
01
        
        

          
02
        
        

          
03
        
        

          
04
        
      
    

    

      

        

        
01
        

      
      

        

        
02
        

      
      

        

        
03
        

      
      

        

        
04
        

      
    


        .navigation {
        font-size: 30px;
        position: fixed;
        top: 20%;
        left: 25%;
        ul{
            list-style: none;
            text-align: center;
            display: flex;
            flex-flow: column wrap;
            padding-inline-start: 0;
            .active{
                transform: translateY(-50px);      
            }
            li{
                flex: 0 0 auto;
                justify-self: center;
                transition: .5s ease-in-out;
                .nav-item{

                }
                &:not(:last-child):after{
                    content: '';
                    position: absolute;
                    left:50%;
                    height: 0;
                    width: 1px;
                    background-color: black;
                    transition: .5s ease-in-out;
                }
                &:not(:first-child):before{
                    content: '';
                    position: absolute;
                    left:50%;
                    height: 0;
                    width: 1px;
                    background-color: black;
                    transition: .5s ease-in-out;
                }
                &:hover::after{
                    transition: .5s ease-in-out;
                    height: 50px
                }
                &:hover::before{
                    transition: .5s ease-in-out;
                    height: 50px
                }
            }
        }
    }
    .nav {
      font-size: 30px;
      position: fixed;
      top: 25%;
      right: 25%;
      &-item{
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        .active{
          height: 50px;
        }
        &__line{
          width: 1px;
          height: 0;
          background-color: black;
          transition: .5s ease-in-out;
        }
        &__number{
        }
      }
    }


    $(function () {
        $('body').on({
            mouseenter: function () {
                $(this).addClass('active');
            },
            mouseleave: function () {
                $(this).removeClass('active');
            }
        }, '.navigation ul li');
    });

    $(function () {
        $('body').on({
            mouseenter: function () {
                $('.nav-item__line').addClass('active');
            },
            mouseleave: function () {
                $('.nav-item__line').removeClass('active');
            }
        }, '.nav-item');
    });

    

Ответы

Ответ 1

Я бы сделал это за счет бордеров, например так:



div.expand {
  font-size: 20px;
  display:block;
  width: 20px;
  cursor:default;
  transition: 0.5s;
  width:40px;
  text-align:center;
}

div.expand:before, div.expand:after {
  content: '';
  border: 0px solid black;
  display: block;
  width: 1px;
  transition: 0.5s;
  margin-left:20px;
}
div.expand:hover{
  font-size:40px
}

div.expand:not(:first-child):hover:before {
  border-top: 50px solid black;
}

div.expand:not(:last-child):hover:after {
  border-top: 50px solid black;
}

  
01
  
02
  
03
  
04