JSFiddle - React, Tailwind, and code Playground

by colorkid

HTML

<nav tabindex="0">
<ul tabindex="0">
<li><a hreff="#">Первый пункт</a></li>
<li><a hreff="#">Второй пункт</a></li>
<li><a hreff="#">Третий пункт</a></li>
<li><a hreff="#">Четвёртый пункт</a></li>
</ul>
</nav>

CSS

nav ul{
display:flex;
}
nav li, nav:before, nav ul:before {
display: inline-block;
padding: 10px 0;
color: #fff;
text-align: center;
cursor: pointer; /* курсор в виде руки, обязателен для Opera Mini */
background: rgb(6,55,82); /* цвет фона кнопки "меню" */
}
nav li {
width: 25%; /* 4 пункта меню, то есть 100%/4 */
background: rgb(46,95,122); /* фон пунктов меню */
text-decoration: none;
}
nav li:hover {
background: rgb(96,145,172); /* фон пунктов при наведении */
}
@media (max-width: 768px) { /* для экранов, меньше 800px, см про адаптивную вёрстку */
nav ul{
flex-wrap:wrap;
}
nav li, ul:before, nav ul:before {
width: 100%; /* пункты меню растягиваются на всю ширину блока */
}
nav:before {
content: "меню";
}
nav:focus:before {
content: none;
}
nav:focus ul:before {
content: "свернуть меню";
}
nav:not(:focus) ul:not(:active) { /* магия кнопки "меню", благодаря чему навигация скрывается/появляется по щелчку */
display: none;
}
}