Adaptive menu?

Lord, and do not tell me how to make adaptive menus with submenus, like in the computer version of the opening will be on hover, but on smartphones and tablets there like hover and no. Thank you.
March 12th 20 at 08:42
2 answers
March 12th 20 at 08:44
thanks, but looking for the version without js - sedrick_Legros86 commented on March 12th 20 at 08:47
March 12th 20 at 08:46
There is enough to understand how the@media and be able to transform display elements. Nothing complicated is not here.

jsfiddle.net/Annamarie_Sawa/jan8L05t

<nav>
<button>==</button>
the <ul>
 the <li><a href="#">menu item 1</a></li>
 the <li><a href="#">menu item 2</a></li>
 the <li><a href="#">menu item 3</a></li>
 the <li><a href="#">menu item 4</a></li>
</ul>
</nav>

nav {
 display: flex;
 background: #f5f5f5;
 border-bottom: 1px solid #e2e2e2;

 button {
 padding: 10px;
 border: 0;
}

 ul {
 list-style: none;
 margin-left: auto;
 display: flex;

 li a {
 padding: 10px;
 display: inline-block;

 &:hover {
 background: #e2e2e2;
}
}
}
}

@media screen and (min-width: 768px) {
 nav {
 button {
 display: none;
}
}
}

@media screen and (max-width: 767.98 px) {
 nav {
 position: relative;

 button:not(:hover) {
 ~ ul {
 display: none;
}
}

 ul {
 position: absolute;
 top: 100%;
 left: 0;
 flex-direction: column;
 background: #f5f5f5;
 border: 1px solid #e2e2e2;
}
}

}
Thanks, but how would display: none; now all non-kosher use, the reader will be stupid to ignore these blocks. Well, the main question is how would the fact that mobile is no :hover is done using :focus

That was such menus without js.

5bc0789360ffd595497168.png - sedrick_Legros86 commented on March 12th 20 at 08:49
@sedrick_Legros86,
how would display: none; now all non-kosher use, the reader will be stupid to ignore these blocks.

Nonsense!

Well, the main question is how would the fact that mobile is no :hover is done using :focus

Pieces :hover is activated when the Tapu. With :focus you can't lay on a menu item, as in NAPA, the focus instantly teraesa button.

And anyway, such things are better to do on js. - Annamarie_Sawa commented on March 12th 20 at 08:52

Find more questions by tags CSS