如何在活动导航菜单中添加点答案

【问题标题】：how to add dot in the active nav menu如何在活动导航菜单中添加点
【发布时间】：2022-02-01 01:23:13
【问题描述】：

你好，这是我的导航菜单代码，当我将鼠标悬停在导航菜单上时，我添加了动画，就像一个点移动一样。但我不知道如何使该点在活动菜单中保持静态。

ex: (menu1) 这是我的菜单，当它处于活动状态时，我希望我的菜单 (menu1.) 旁边的那个点就像我想要的这种如果有人找到解决方案，请给我代码

body {
  font-family: "Sprint Sans Ofc";
}
.navMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  White-space:nowrap;
  padding-right:20px;
  padding left:30px;
}

.navMenu a {
  color: #000000;
  text-decoration: none;
  font-size: 1.3em;
  text-transform: captilalize;
  font-weight: 600;
  display: inline-block;
  padding:30px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.navMenu a:hover {
  color: #000000;
}
.navMenu a:active {
    color:#000000;
}

.navMenu .dot {
  width: 5px;
  height: 5px;
  background: #D61E39;
  border-radius: 50%;
  opacity: 0;
  margin:-44px;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.navMenu a:nth-child(1):hover ~ .dot {
  -webkit-transform: translateX(30px);
  transform: translateX(145px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(2):hover ~ .dot {
  -webkit-transform: translateX(110px);
  transform: translateX(280px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(3):hover ~ .dot {
  -webkit-transform: translateX(200px);
  transform: translateX(415px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}

.navMenu a:nth-child(4):hover ~ .dot {
  -webkit-transform: translateX(285px);
  transform: translateX(550px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
navMenu a:nth-child(1):active ~ .dot {
  position: relative;
  left:40px;
  bottom:10px;
  opacity: 1;
}
.navMenu a:nth-child(1):active ~ .dot {
    left:20px;
    opacity:1;
}

<body>
    <nav class="navMenu">
      <a href="#">menu1</a>
      <a href="#">menu2</a>
      <a href="#">menu3</a>
      <a href="#">menu4</a>
      <div class="dot"></div>
    </nav>
  </body>

【问题讨论】：

您能否澄清一下您的意思是 :active （伪类，例如当用户按下鼠标按钮但尚未点击时，而不是 .active 类放在那里，例如当用户点击时通过 JS ?

标签： javascript html css stack wp-nav-menu-item

【解决方案1】：

.dot 元素面临的挑战是应用 CSS 样式（尤其是 transform 值）以正确处理 hover 和 active 状态。

为了实现这一点，我正在使用这样的 CSS 选择器：

.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {

基本上，这意味着，如果有的话，做动画

元素当前被悬停
或链接处于活动状态（即它之前被点击过），但是限制为父 .navMenu 当前未悬停。

第二条规则保证，hover 在设置.dot 元素的目的地时具有最高优先级（特别是，这会使点远离当前活动的项目）。否则，点将不会移动并粘在.active 菜单项上。

在下面查看我的方法（顺便说一句，这里不需要-webkit 属性）：

const anchors = document.querySelectorAll('nav a')

anchors.forEach(anchor => anchor.addEventListener("click", onClick));

function onClick(e) {
  anchors.forEach(achor => achor.classList.remove('active'))
  e.target.classList.add('active')
}

body {
  font-family: "Sprint Sans Ofc";
}

.navMenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  White-space: nowrap;
  padding-right: 20px;
  padding left: 30px;
}

.navMenu a {
  color: #000000;
  text-decoration: none;
  font-size: 1.3em;
  text-transform: captilalize;
  font-weight: 600;
  display: inline-block;
  padding: 30px;
  transition: all 0.2s ease-in-out;
}

.navMenu a:hover {
  color: #000000;
}

.navMenu a:active {
  color: #000000;
}

.navMenu .dot {
  width: 5px;
  height: 5px;
  background: #D61E39;
  border-radius: 50%;
  opacity: 1;
  margin: -44px;
  transform: translateX(-30px);
  transition: all 0.2s ease-in-out;
}

.navMenu a:nth-child(1):hover~.dot,
.navMenu:not(:hover) a:nth-child(1).active~.dot {
  transform: translateX(145px);
}

.navMenu a:nth-child(2):hover~.dot,
.navMenu:not(:hover) a:nth-child(2).active~.dot {
  transform: translateX(280px);
}

.navMenu a:nth-child(3):hover~.dot,
.navMenu:not(:hover) a:nth-child(3).active~.dot {
  transform: translateX(415px);
}

.navMenu a:nth-child(4):hover~.dot,
.navMenu:not(:hover) a:nth-child(4).active~.dot {
  transform: translateX(550px);
}

<body>
  <nav class="navMenu">
    <a href="#">menu1</a>
    <a href="#">menu2</a>
    <a href="#">menu3</a>
    <a href="#">menu4</a>
    <div class="dot"></div>
  </nav>
</body>

【讨论】：

你能解释一下如何在我的 WordPress 导航菜单中添加这个吗？导航菜单中没有添加 javascript 的选项
为了将其添加到 wordpress 导航菜单，您需要将此代码添加到主题的 header.php 文件中，假设您的主题在 header.php 部分下有导航。跨度>