垂直菜单滑动动画无法正常工作

Question

我正在研究垂直菜单导航，但是当菜单悬停时，垂直线不会在正确的位置滑动。此外，当它被点击时，垂直线不会停留。有人有解决这些错误的方法吗？

function selectNav(get_this){
  $('#sticky li').removeClass('selected');
  get_this.classList.add('selected');
}

.in-page-menu > .in-page-menu li{

  line-height: 2em;
  height: 2em;

}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 40px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}
.in-page-menu li.selected::after{
  transform: translateY(-2.5em);
}
.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0.5em) !important;
}

.in-page-menu li:nth-child(2):hover ~ li:last-child::after {
  transform:translateY(83px) !important;

}
.in-page-menu li:nth-child(2).selected ~  li:last-child::after {
  transform:translateY(83px) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(7.5em) !important;
}
.in-page-menu li:nth-child(3).selected ~  li:last-child::after {
  transform:translateY(7.5em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(10.5em) !important;
}
.in-page-menu li:nth-child(4).selected ~  li:last-child::after {
  transform:translateY(10.5em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(237px) !important;
}
.in-page-menu li:nth-child(5).selected ~  li:last-child::after {
  transform:translateY(237px);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>

DEMO

所以，我希望它看起来像这样：SHOPIFY

我还在 jsfiddle 上做了演示。太感谢了！ 您的帮助将不胜感激:)

Answer 1

您的代码存在多个问题。它们在这里以及它们的解决方案：

1. 您没有将 jQuery 包含到您的 sn-p 中（也许它只是在这个站点上，而不是在您的代码中）。包括在内。
2. 您将em 与px 混合在一起。这绝不是一个好主意。修复：
   • 对于.in-page-menu li 项目，我通过添加box-sizing: border-box 确保它们的高度一致，这将在高度计算中包括任何填充和边框，否则不会。
   • 将所有px 尺寸替换为em，并对位置进行了有根据的猜测。它可能不准确，但对于这些项目来说看起来不错。
3. 您总是移动用于悬停的垂直线。
   • 通过从selected 类选择器中删除~ li:last-child 部分来修复它。这样可以确保所选菜单项始终有一条垂直线。
4. Javascript 有很多问题。修复者：
   • 使用jQuery addClass 函数添加selected 类。
   • 更改了removeClass 行的选择器以查找匹配项

备注

• 添加了一些样式以最初隐藏悬停垂直线。如果您希望在页面加载时有一行，请将选定的类添加到所需的菜单项。
• 如果您打算更改菜单项高度，则还必须更新 translateY 位置。

工作演示

function selectNav(get_this){
  $('li.selected').removeClass('selected');
  $(get_this).addClass('selected');
}

.in-page-menu{
  list-style: none;
  padding-left: 0;
}

.in-page-menu > .in-page-menu li{
  line-height: 2em;
  height: 2em;
  box-sizing: border-box;
}

.in-page-menu > .in-page-menu li > .in-page-menu li a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after, li.selected::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2.5em;
  margin-top: 15px;
  left: 8px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}

.in-page-menu li:last-child::after {
  visibility: hidden;
}

.in-page-menu li:hover ~ li:last-child::after {
  visibility: visible;
}

.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform:translateY(0) !important;
}

.in-page-menu li:nth-child(1).selected::after{
  transform: translateY(0) !important;
}

.in-page-menu li:nth-child(2):hover  ~ li:last-child::after{
  transform:translateY(3em) !important;

}
.in-page-menu li:nth-child(2).selected::after {
  transform:translateY(3em) !important;
}

.in-page-menu li:nth-child(3):hover ~  li:last-child::after {
  transform:translateY(6em) !important;
}
.in-page-menu li:nth-child(3).selected::after {
  transform:translateY(6em);
}
.in-page-menu li:nth-child(4):hover ~  li:last-child::after {
  transform:translateY(9em) !important;
}
.in-page-menu li:nth-child(4).selected::after {
  transform:translateY(9em);
}
.in-page-menu li:nth-child(5):hover ~  li:last-child::after {
  transform:translateY(12em) !important;
}
.in-page-menu li:nth-child(5).selected::after {
  transform:translateY(12em);
}

.in-page-menu--vertical a{
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}
.in-page-menu a{
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a{
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a{
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#inventory">Inventory management</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
                </li>
                <li onclick="selectNav(this)">
                  <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
                </li>
                <li></li>
</ul>

Answer 2

对于您想要实现的目标，您的 CSS 相当复杂。

这与 Shopify 网站并不完全相同，但可能会对您有所帮助。有很多事情发生。如果您有任何问题，或者我误解了您，请告诉我...

jsfiddle

$(document).ready(function() {
  $("#sticky li a").click(function() {
    $('li a').removeClass("selected");
    $(this).addClass("selected");
  });
});

.in-page-menu {
  border-left: 2px solid lightgrey;
  margin-left: 0;
  padding-left: 0;
}

.in-page-menu li {
  list-style-type: none;
}

.sticky-menu-link {
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: #767676;
  font-size: 14px;
  transition: all 150ms;
  padding: 1em;
  display: block;
}

.sticky-menu-link:hover {
  border-left-color: rgba(255, 99, 71, 0.6);
}

.selected {
  border-left-color: rgba(255, 99, 71, 0.6);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
  <li>
    <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#inventory">Inventory management</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
  </li>
  <li></li>
</ul>

Answer 3

正如 beerwin 发布的那样。我也做了一些改变来达到效果

1. 添加了 jQuery
2. 将 px 替换为 em
3. 相对于li的高度进行转换
4. 删除了 li.selected::after 的样式定义

这是更新后的JSFIDDLE

$('#sticky li').on("click", function() {
	$("#sticky li").removeClass("selected");
	$(this).addClass("selected");
});

.in-page-menu > li {
  line-height: 2em;
  height: 2em;
  list-style-type: none;
}

.in-page-menu > li > a {
  display: block;
  padding: 0 2em;
}

.in-page-menu li:last-child::after {
  content: "";
  position: absolute;
  background: rgba(255, 99, 71, 0.6);
  height: 2em;
  margin-top: 15px;
  left: 40px;
  width: .2em;
  top: 0;
  transition: all ease-in-out .2s;
  right: 0;
}

.in-page-menu li:nth-child(1):hover ~ li:last-child::after {
  transform: translateY(0px) !important;
}

.in-page-menu li:nth-child(1).selected ~ li:last-child::after {
  transform: translateY(0px);
}

.in-page-menu li:nth-child(2):hover ~ li:last-child::after {
  transform: translateY(2em) !important;
}

.in-page-menu li:nth-child(2).selected ~ li:last-child::after {
  transform: translateY(2em) !important;
}

.in-page-menu li:nth-child(3):hover ~ li:last-child::after {
  transform: translateY(4em) !important;
}

.in-page-menu li:nth-child(3).selected ~ li:last-child::after {
  transform: translateY(4em);
}

.in-page-menu li:nth-child(4):hover ~ li:last-child::after {
  transform: translateY(6em) !important;
}

.in-page-menu li:nth-child(4).selected ~ li:last-child::after {
  transform: translateY(6em);
}

.in-page-menu li:nth-child(5):hover ~ li:last-child::after {
  transform: translateY(8em) !important;
}

.in-page-menu li:nth-child(5).selected ~ li:last-child::after {
  transform: translateY(8em);
}

.in-page-menu--vertical a {
  margin-left: -1px;
  border-left: 2px solid #eae8e7;
  padding: 0.625em 0 1.625em 1.0625em;
}

.in-page-menu a {
  font-family: 'montserratlight', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #767676;
  font-size: 14px;
  display: block;
  transition: all 150ms;
}

.in-page-menu-vertical a {
  margin-left: -1px;
  border-left: 3px solid transparent;
  padding: 0.625em 0 0.625em 1.0625em;
}

.in-page-menu a {
  -webkit-font-smoothing: antialiased;
  display: block;
  -webkit-transition: all 150ms;
  transition: all 150ms;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="in-page-menu in-page-menu--vertical" id="sticky">
  <li>
    <a class="sticky-menu-link" href="#change-content">Change your content web easily</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-order">Manage your order</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#inventory">Inventory management</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#manage-relationship">Manage your relationship</a>
  </li>
  <li>
    <a class="sticky-menu-link" href="#bcommerce">B2B commerce</a>
  </li>
  <li></li>
</ul>