如何使用标记之间的线条制作垂直菜单？

Question

我想实现此菜单设计，但无法找到解决方案。

Answer 1

您可以使用:after和:before 伪元素执行此操作，并且我还将一些j添加到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>