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

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

<!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>

通过点击"导航"，您可以显示和隐藏导航。这太棒了。我还用几种设备和浏览器检查了它，但当然不是全部。

当然，我希望它适用于我网站的每个用户，完全兼容浏览器。我也尝试谷歌浏览器支持，但这并不容易，因为我什至不知道这个"功能"的名称是什么。

你们有人知道这件事吗？此"功能"的名称？浏览器兼容性？

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

相关内容

最新更新

热门标签：