Codly

html

<div class="navsubsu-posevice"> 
  <input type="checkbox"> 
  <span></span> 
  <span></span> 
  <span></span> 
  <div class="navigatsiya"> 
  <li><a href="#">Главная</a></li> 
  <li><a href="#">CSS</a></li> 
  <li><a href="#">Скрипты</a></li> 
  <li><a href="#">SEO</a></li> 
  <li><a href="#">Контакты</a></li> 
  </div> 
</div>

css

body, .navsubsu-posevice, .navigatsiya { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.navsubsu-posevice { 
  position: relative; 
  background-color: #f5eded; 
  padding: 20px; 
  transition: 0.5s; 
  border-radius: 50px; 
  overflow: hidden; 
  box-shadow: 0 8px 15px rgba(23, 22, 22, 0.2); 
  border: 2px solid #d0c6c6; 
} 
.navigatsiya { 
  margin: 0; 
  padding: 0; 
  width: 0; 
  overflow: hidden; 
  transition: 0.5s; 
} 
.navsubsu-posevice input:checked ~ .navigatsiya { 
  width: 500px; 
} 
.navigatsiya li { 
  list-style: none; 
  margin: 0 8px; 
} 
.navigatsiya li a { 
  text-decoration: none; 
  color: #666; 
  text-transform: uppercase; 
  font-weight: 600; 
  transition: 0.5s; 
} 
.navigatsiya li a:hover { 
  color: #141515; 
} 
.navsubsu-posevice input { 
  width: 38px; 
  height: 38px; 
  cursor: pointer; 
  opacity: 0; 
} 
.navsubsu-posevice span { 
  position: absolute; 
  left: 29px; 
  width: 27px; 
  height: 4px; 
  border-radius: 100px; 
  background-color: #655f5f; 
  pointer-events: none; 
  transition: 0.5s; 
} 
.navsubsu-posevice input:checked ~ span { 
  background-color: #FF4D50; 
} 
.navsubsu-posevice span:nth-child(2) { 
  transform: translateY(-8px); 
} 
.navsubsu-posevice input:checked ~ span:nth-child(2) { 
  transform: translateY(0) rotate(-45deg); 
} 
.navsubsu-posevice span:nth-child(3) { 
  transform: translateY(8px); 
} 
.navsubsu-posevice input:checked ~ span:nth-child(3) { 
  transform: translateY(0) rotate(45deg); 
} 
.navsubsu-posevice input:checked ~ span:nth-child(4) { 
  display: none; 
}