Question

如何制作此导航效果。演示链接：https://hookandbarrelrestaurant.com/

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

Answer 1

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

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

示例：

为了检测鼠标位置并使内容像这样移动，您需要侦听Javascript中的import java.io.FileWriter; import java.io.IOException; import java.io.PrintWriter; import java.util.Optional; public class Main { public static void main(String[] args) throws IOException { Integer a = null; Integer b = 1; FileWriter out = new FileWriter( "data.CSV" ); PrintWriter printWriter = new PrintWriter(out); Optional<Integer> oa = Optional.ofNullable(a); Optional<Integer> ob = Optional.ofNullable(b); printWriter.print(oa.orElse(0)); printWriter.print(ob.orElse(0)); out.close(); printWriter.close(); } }事件。但是，您可以将该值转换为CSS（sharing CSS var() statements with Javascript），然后使用纯CSS进行其余操作。

对于CSS，我们使用mousemove属性和display:inline-block属性来创建列。

我们将white-space:nowrap设置为overflow，并分别将hidden和width height

我对HTML所做的唯一更改是100%元素。我将其更改为div，只是为了使它看起来更漂亮（这不是必需的，可以更改为任何形式）。

info

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;
}

悬停时更改导航位置

1 个答案: