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

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>

演示

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

我也在JSFIDDLE上进行了演示。太感谢了！您的帮助将不胜感激:)

Answer 1

您的代码有多个问题。它们是他们的解决方案：

1. 您没有将jQuery包含在片段中（也许只是在此站点上，而不是与您的代码一起使用）。包括。
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>