CSS простое адаптивное меню

Последнее обновление на 19.12.2023

CSS пример простой верстки  адаптивного меню для телефонов, планшетов, компьютера.

.adaptiv-menu {
	display: flex;
	justify-content: flex-start;
    background-color:rgb(98, 163, 138);
}

.adaptiv-menu a {
  color:white; 
  padding:10px 5px; 
  text-decoration:none; 
  text-align:center;

}
.adaptiv-menu a:hover { 
background-color:#1a2f18; 
}
@media all and (max-width: 900px) {
	.adaptiv-menu { 
  justify-content: space-around; 
  }
	.adaptiv-menu a{ 
  flex-grow:1;
  }
}
@media all and (max-width: 300px) {
	.adaptiv-menu { 
  flex-direction: column; 
  }
}

<div class="adaptiv-menu">
	<a href="#">Главная</a>
	<a href="#">Каталог</a>
	<a href="#">Информация</a>
	<a href="#">Контакты</a>
</div>

Пример работы адаптивного меню для телефонов