0

Как сделать эффект ховера и т.д с плавающим выделением? Т.е обычно когда мы посещаем сайты меню выделяет конкретный блок(цвет, подчеркивание и т.д) и все это в рамках одного блока. Мне интересно как сделать элемент допустим подчеркивание, что бы при ховере на конкретный элемент меню - он плавно подъезжал под него, и при клике - фиксировался под ним. Как это реализовать?

1 ответ 1

3

Логично, что для этого нужно двигать какую-то штуку (элемент, псевдоэлемент, фон) на позицию выделенного пункта и задавать ей ширину этого самого пункта. Для примера использовал псевдоэлемент меню и css-переменные, чтобы задавать ему стили.

Немного магии на js и:

$('.menu>li').mouseenter(function(){
  var itemLeft = $(this).position().left,
      itemWidth = $(this).width();
  $(this).parent().css({
    '--left': itemLeft+'px',
    '--width': itemWidth+'px'
  })
})
*{
  box-sizing: border-box;
}
body{
  margin: 0;
  font-family: sans-serif;
}
.menu{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  background-color: #ccc;
  position: relative;
  --left: 0px;
  --width: 0px;
}
.menu:before{
  content: '';
  display: block;
  position: absolute;
  height: 3px;
  bottom: 0;
  transition: all .3s ease;
  left: var(--left);
  width: var(--width);
  background-color: red;
  opacity: 0;
  
}
.menu:hover:before{
  opacity: 1;
}
.menu>li>a{
  display: block;
  padding: 1em;
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="#">Каталог</a></li>
  <li><a href="#">О компании</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">Бу</a></li>
</ul>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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