3

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

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

Пример реализуемого меню

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

    <nav id="" class="navigation">
      <ul>
        <li>
          <div>01</div>
        </li>
        <li>
          <div>02</div>
        </li>
        <li>
          <div>03</div>
        </li>
        <li>
          <div>04</div>
        </li>
      </ul>
    </nav>

    <nav class="nav">
      <div class="nav-item">
        <div class="nav-item__line"></div>
        <div class="nav-item__number">01</div>
        <div class="nav-item__line"></div>
      </div>
      <div class="nav-item">
        <div class="nav-item__line"></div>
        <div class="nav-item__number">02</div>
        <div class="nav-item__line"></div>
      </div>
      <div class="nav-item">
        <div class="nav-item__line"></div>
        <div class="nav-item__number">03</div>
        <div class="nav-item__line"></div>
      </div>
      <div class="nav-item">
        <div class="nav-item__line"></div>
        <div class="nav-item__number">04</div>
        <div class="nav-item__line"></div>
      </div>
    </nav>
        .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');
    });
2
  • 1
    можете добавить изображения до и после наведения? 17 окт 2019 в 10:15
  • @StrangerintheQ добавил.
    – 4rmr3d1
    17 окт 2019 в 10:26

1 ответ 1

6

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

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;
}
<div>
  <div class=expand>01</div>
  <div class=expand>02</div>
  <div class=expand>03</div>
  <div class=expand>04</div>
</div>

3
  • 3
    @4rmr3d1 можно испоьзовать :focus, или использовать порсто добавление произвольного стиля, а не :hover 17 окт 2019 в 11:13
  • Максимум, чего бы я подправил, это margin у псевдоэлемента поставил auto для центрирования бордера, а кто кажется 20px - это немного костыльно, ну зависит именно от величины шрифта.
    – 4rmr3d1
    17 окт 2019 в 11:23
  • @4rmr3d1 у родительского элемента ширина 40 и центровка текста, но можно как Вам угодно =) 17 окт 2019 в 11:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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