マーカー間の線で垂直メニューを作成する方法は？

Question

このメニューデザインを実装したいが、解決策が見つからない。

Answer 1

あなたは:afterと:before擬似要素でこれを行うことができと私はまた、これを実現するために、あなたがしようとした、少なくとも何を、いくつかのコードを表示してくださいtoggleClass

$('nav > div').click(function() { 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 
})

nav { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 20px; 
 
    background: #377BB7; 
 
} 
 
nav > div { 
 
    position: relative; 
 
    margin: 20px; 
 
    cursor: pointer; 
 
} 
 
.active:before { 
 
    background: white; 
 
    transition: all 0.3s ease-in; 
 
} 
 
div:before { 
 
    content: ''; 
 
    width: 7px; 
 
    height: 7px; 
 
    border-radius: 50%; 
 
    border: 1px solid white; 
 
    position: absolute; 
 
    left: -20px; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 
div:not(:last-child):after { 
 
    content: ''; 
 
    width: 1px; 
 
    height: 33px; 
 
    background: white; 
 
    left: -16px; 
 
    position: absolute; 
 
    top: calc(50% + 4px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <div class="active">Lorem</div> 
 
    <div>Lorem</div> 
 
    <div>Lorem</div> 
 
    <div>Lorem</div> 
 
</nav>