Question

我有一个带有徽标切换按钮的侧边栏菜单，该按钮可切换类“切换”，并且在大屏幕上也将显示在悬停上。边栏左侧：100％，切换/悬停左侧：0；在所有浏览器（Safari浏览器除外）上都可以正常工作。仅当在野生动物园中显示导航时，徽标按钮才会摆动/震动。

下面是代码的简短概述：

.main-navigation {
//Structure
display: inline-block;
width: 160px;
transition: all 250ms ease-in;
height: 100vh;
z-index: 100;
position: fixed;
left: -100%; 
background-color: $color__primary;

&.toggled {
    left: 0;
}

.menu-toggle {
    margin-left: auto;
    align-self: flex-end;
    display: inline-block;
    position: fixed;
    background: none;
    border: none;
    border-radius: 0;
    left: 20px;
    top: 25px;
    width: auto;
    height: auto;
    padding: 0;
    z-index: 110;

    &:focus, &:active {
        outline: none;
    }
}
}

在大屏幕上，我只需添加悬停：

.main-navigation{
    &:hover {
        left: 0;
    }
}

您可以在https://rocket.creos.agency/下看到它

我希望我只是忽略一些小东西。

感谢您的帮助！

Answer 1

为了解决问题，您需要从nav元素中移出“徽标”。如果它在里面，就像您想要的那样，它会尝试为nav内的所有元素设置动画。

这是使用简单代码的逻辑（徽标位于nav中）：

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  height: 100vh;
  width: 160px;
  left: -160px;
  background-color: tomato;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
nav:hover {
  left: 0;
}
button {
  position: fixed;
  top: 10px;
  left: 10px;
}
.content {
  margin-top: 50px;
}

<nav>
  <button>
    Hover me
  </button>
  <div class='content'>
    <ul>
      <li>
        one
      </li>
      <li>
        two
      </li>
    </ul>
  </div>
</nav>

这是“徽标”在nav之外的情况：

(() => {
	const btn = document.getElementById('animateNav');
  const nav = document.getElementById('navigation');
  const content = document.getElementById('content');
  btn.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
  nav.addEventListener('mouseout', () => {  	
    nav.classList.remove("animate");
  });
  nav.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
  content.addEventListener('mouseover', () => {  	
    nav.classList.add("animate");
  });
})();

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  height: 100vh;
  width: 160px;
  left: -160px;
  background-color: tomato;
  -webkit-transition: all 250ms ease-in-out;
  transition: all 250ms ease-in-out;
}
nav.animate {
  left: 0;
}
button {
  position: fixed;
  top: 10px;
  left: 10px;
}
#content {
  margin-top: 50px;
}

<nav id='navigation'>
  <div id='content'>
    <ul>
      <li>
        one
      </li>
      <li>
        two
      </li>
    </ul>
  </div>
</nav>
<button id='animateNav'>
  Hover me
</button>

所有不同之处在于第二个示例，您需要使用JavaScript来为nav切换类。我没有提供有效的逻辑来切换课程，但我只是想向您介绍有效的解决方案。

P.S。不要在<a>标签内使用<button>标签

仅在Safari中在元素悬停/类切换上摇动元素

1 个答案: