在所有设备和浏览器上都支持移动导航：但是它的名字是什么？

Question

我在移动设备上使用以下代码进行导航。 （代码被截断了。）

<!DOCTYPE html>
<html>
<head>
<style>
html    {
    background-color:rgba(190, 234, 16, 0.30);
}
input[type=checkbox] {
    position:absolute;
    top:-9999px;
    left:-9999px;
}
nav {
    text-align:center;
    background-color:white;
    border-radius:30px;
    padding-top:5px;
    padding-bottom:5px;
    margin-top:5px;
    margin-bottom:5px;
}
input[type=checkbox]:not(:checked) ~ .navigation {
    display:none;
}
#checkbox_label {
    display:block;
    text-align:center;
    font-size:30px;
    background-color:white;
    border-radius:30px;
}
</style>
</head>
<body>

<label id="checkbox_label" for="checkbox">Navigation</label><input type="checkbox" id="checkbox">

<nav class="navigation">
<p><a href="">Test1</a></p>
<p><a href="">Test2</a></p>
<p><a href="">Test3</a></p>
<p><a href="">Test4</a></p>
</nav>

</body>
</html>

通过点击“导航”，您可以显示和隐藏导航。 效果很棒。 我还用几种设备和浏览器进行了检查，但是当然不是全部。

自然，我希望这对我的网站的每个用户都有效，并且与浏览器完全兼容。 我也尝试过谷歌浏览器的支持，但这并不容易，因为我什至不知道这个“功能”的名字是什么。

你们中有人知道吗？ 这个“功能”的名称？ 浏览器兼容性？

Answer 1

我认为它的移动导航菜单！