Адаптивное меню на CSS | FlexBox

Создадим HTML разметку:

<div class="nav">

<a href="#">Главная</a>

<a href="#">О нас</a>

<a href="#">Продукты</a>

<a href="#">Контакты</a>

</div>

Пропишем к данной разметке CSS стили:

<style>

body{ font-family:arial; }

.nav {

display: flex;

justify-content: flex-end; /* разместим справа */

background: #008aff;

}

.nav a {

color:#fff;

padding:15px 10px;

text-decoration:none;

text-align:center;

}

.nav a:hover { background:#5c8db7; }

/* меньше 800px */

@media all and (max-width: 800px) {

.nav { justify-content: space-around; }

.nav a{ flex-grow:1; /* растягиваться на всю ширину */ }

}

/* меньше 500px */

@media all and (max-width: 500px) {

.nav { flex-direction: column; }

}

</style>