悬停时更改导航位置

Question

如何使这种导航效果。演示链接：https://hookandbarrelrestaurant.com/

我的代码链接：https://codepen.io/Dhaval182/pen/rQPMoW

Answer 1

我能够通过使用CSS变量和Javascript中的一个事件监听器来实现这一点。

它并不是超级复杂，但是，它确实需要一些修补才能正常工作。

示例：

为了检测鼠标位置并使内容像那样移动，您需要侦听Javascript中的mousemove事件。但是，您可以将该值转换为CSS(与Javascript共享CSSvar()语句(，并使用纯CSS完成其余操作。

对于CSS，我们使用display:inline-block属性和white-space:nowrap属性来制作列。

我们将overflow设置为hidden，并使width和height成为100%

我对HTML所做的唯一更改是info元素。我把它改成了div，只是为了让它看起来更漂亮(这不是必要的，可以改成任何东西(。

const navbar = document.getElementById('navbar-list');
document.addEventListener('mousemove', evt => {
let x = evt.clientX;
navbar.style.setProperty('--pos-x', (-x / 1.35));
});

html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.flex-container,
.menu,
ul,
li,
a {
height: 100%;
}
.flex-container,
.menu {
width: 100%;
height: 100%;
}
.menu {
overflow: hidden;
position: relative;
}
.menu ul {
position: absolute;
/* Use calc() method to add "px" to the number transferred from Javascript */
left: calc(var(--pos-x) * 1px);
list-style: none;
margin: 0px;
padding: 0px;
white-space: nowrap;
width: 100%;
}
.menu ul>li {
padding: 0px;
margin: 0px;
margin-left: -4px;
text-align: center;
display: inline-block;
width: 25%;
}
.menu ul>li>a {
display: inline-block;
margin: 0px;
width: 100%;
text-decoration: none;
color: #000;
font-size: 18pt;
background: rgba(0, 0, 0, 0.0);
-webkit-transition: background-color 0.3s;
/* Safari */
transition: background-color 0.3s;
}
.menu ul>li>a>.info {
position: absolute;
bottom: -30px;
display: block;
width: 25%;
-webkit-transition: bottom 0.3s;
/* Safari */
transition: bottom 0.3s;
}
.menu ul>li>a:hover .info {
bottom: 20px;
}
.menu ul>li>a:hover {
background: rgba(0, 0, 0, 0.6);
color: #FFF;
}

<!-- Menu -->
<div class="menu" id="menu">
<ul class="flex-container" id="navbar-list">
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
<li>
<a href="#">
<span class="menu-title">About us</span>
<div class="info">Est. 1995</div>
</a>
</li>
</ul>
</div>