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

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包含在您的代码段中（可能只是在此网站上而不是您的代码）。包括在内。
2. 您已将em与px混合在一起。这绝不是一个好主意。修正：
   • 对于.in-page-menu li项，我通过添加box-sizing: border-box确保其高度一致，这将包括任何填充和边框进入高度计算，否则不会。
   • 用px替换了所有em尺寸，并对位置进行了有根据的猜测。它可能不准确，但对于这些项目来说看起来不错。
3. 您始终移动用于悬停的垂直线。
   • 通过从~ li:last-child类选择器中删除selected部分来修复它。这可以确保所选菜单项始终具有垂直线。
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. 将 Runnable 替换为 px
3. 根据 em
的高度进行翻译
4. 删除了 li
的样式定义

以下是更新的 JSFIDDLE

li.selected::after

$('#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;
}