Как сделать эффект ховера и т.д с плавающим выделением? Т.е обычно когда мы посещаем сайты меню выделяет конкретный блок(цвет, подчеркивание и т.д) и все это в рамках одного блока. Мне интересно как сделать элемент допустим подчеркивание, что бы при ховере на конкретный элемент меню - он плавно подъезжал под него, и при клике - фиксировался под ним. Как это реализовать?
1 ответ
Логично, что для этого нужно двигать какую-то штуку (элемент, псевдоэлемент, фон) на позицию выделенного пункта и задавать ей ширину этого самого пункта. Для примера использовал псевдоэлемент меню и 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>