user1327 user1327 - 6 months ago 10
HTML Question

How to make vertical menu with a line between markers?

I want to implement this menu design, but can't find a solution.

Answer

You could do this with :after and :before pseudo-elements and i also added some js to 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>