支持所有設備和瀏覽器上的移動導航：但名稱是什麼？

我在移動設備上使用以下代碼進行導航。（代碼被截斷了。）支持所有設備和瀏覽器上的移動導航：但名稱是什麼？

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

通過點擊「導航」，您可以顯示和隱藏導航。這太棒了。我還用幾種設備和瀏覽器檢查過它，但當然不是全部。

當然，我希望這適用於我的網站的每個用戶，全面的瀏覽器兼容性。我也試圖谷歌的瀏覽器支持，但這並不容易，因爲我甚至不知道這個「功能」的名稱是什麼。

有沒有人對此有所瞭解？這個「功能」的名字？瀏覽器兼容性

來源

2017-01-30 user7128548

-1

我覺得它的手機導航菜單！

來源

2017-01-30 11:32:13 Ranjith

支持所有設備和瀏覽器上的移動導航：但名稱是什麼？

回答

相關問題