垂直菜單滑動動畫無法正常工作

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一致，這將包括任何填充和邊界，進入高度計算，否則不會。
   • 用em替換了所有的px尺寸，並對位置進行了有根據的猜測。這可能不準確，但對於這些項目看起來不錯。
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() { 
 
\t $("#sticky li").removeClass("selected"); 
 
\t $(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>