0

ナビゲーションのメニュー項目間でハイライト バーを変換したいメニューがあります (そのため、各メニュー項目にカーソルを合わせると、あるメニュー項目から別のメニュー項目にハイライトがスムーズに移動します)。

「ハイライト」の高さと幅が.nav-linkナビゲーション項目に合わせて変更されるようにすることはできますが、変換プロパティを使用して X と Y の配置座標が機能しないようです。

どんな助けでも素晴らしいでしょう。

エミリー

コードペン: https://codepen.io/emilychews/pen/QWjOxKz

// SELECT NAV-LINKS AND CREATE A SPAN
var navLinks = document.querySelectorAll(".nav-link"),
  theHighlight = document.createElement("span");
  
// ADD CLASS TO SPAN AND APPEND TO BODY
theHighlight.classList.add("highlight");
document.body.append(theHighlight);

// MOVE THE HIGHLIGHT TO THE NAV LINKS X/Y COORDINATES AND MATCH WIDTH AND HEIGHT
function moveHighlight() {

  var linkCoords = this.getBoundingClientRect();

  var coords = {
    width: linkCoords.width,
    height: linkCoords.height,
    top: linkCoords.top + window.scrollY,
    left: linkCoords.left + window.scrollX
  };

  theHighlight.style.width = `${coords.width}px`;
  theHighlight.style.height = `${coords.height}px`;
  theHighlight.style.transform = `translate(${coords.left}px, translate(${coords.top}px)`;
}

// CALL moveHighlight() FUNCTION ON MOUSEENTER
navLinks.forEach(a => a.addEventListener('mouseenter', moveHighlight))
.menu-items {
  display: flex;
  list-style: none;
}

.nav-link {
  margin-left: 2rem;
  display: inline-block;
  position: relative;
}

/* ADDED WITH JAVASCRIPT */
.highlight {
  top: 0;
  left: 0;
  background: red;
  transition: all 0.2s;
  display: block;
  position: absolute;
}
<body>
  <header>
    <nav class="n">
      <ul class="menu-items">
        <li><a class="nav-link" href="#">HOME</a></li>
        <li><a class="nav-link" href="#">WORK</a></li>
        <li><a class="nav-link" href="#">PROCESS</a></li>
        <li><a class="nav-link" href="#">CONTACT</a></li>
      </ul>
    </nav>
  </header>
</body>

4

1 に答える 1

1

変換文字列translate(${coords.left}px, translate(${coords.top}px)は有効な csstransform値ではありません。

変数を実際の値に置き換えると、生成される文字列は次のようになりますtranslate(80px, translate(16px)。

代わりに:translate(80px, 16px)のようなものが必要です。これは、コードが次のようになる必要があることを意味します。

theHighlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
于 2020-05-04T01:17:04.807 に答える