user1327 user1327 - 5 months ago 8x
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.


You could do this with :after and :before pseudo-elements and i also added some js to toggleClass

$('nav > div').click(function() {
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=""></script>
  <div class="active">Lorem</div>