1
マイナビゲーションバーが一度消されましたモバイルビューに切り替わります。ブラウザを縮小するとモバイルビューに変わり、矢印ボタンをクリックしてメニューを表示し、もう一度クリックすると表示されなくなります。いったん非表示にしてブラウザのビューに戻ったら、すべてが消えてしまいました。なぜ私は何かを逃したと思います。ここにコードがあります。あなたは、デスクトップビューに切り替えた後、メニューに滞在するモバイルビューでメニューを、隠すときナビゲーションバーが一度消されましたモバイルビューに切り替える
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Search Engine</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body{
padding:0;
margin:0;
}
.divbuttonright{
text-align: right;
display: none;
}
.buttondesign{
background-color: yellow;
border: none;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
outline: none;
}
#ulstyle {
list-style: none;
padding: 0;
margin:0;
}
li{
width: 109px;
height: 40px;
float: left;
background-color: yellow;
text-align: center;
line-height: 40px;
font-family: 'Oswald', sans-serif;
}
li:hover{
background-color: #333333;
color:yellow;
cursor: pointer;
}
a{
color:inherit;
text-decoration: none;
}
@media screen and (max-width: 768px) {
.divbuttonright{
display: block;
}
#ulstyle {
background-color: pink;
list-style: none;
padding: 0;
margin:0;
width: 100%;
display: none;
}
li{
width: 100%;
height: 40px;
}
}
</style>
</head>
<body>
<div class="divbuttonright"><button class="buttondesign" onclick="myFunction()">▼</button></div>
<ul id="ulstyle">
<a href="http://google.com"><li>Google</li></a>
<a href="http://yahoo.com"><li>Yahoo</li></a>
<a href="http://baidu.com"><li>Baidu</li></a>
<a href="http://aol.com"><li>AOL</li></a>
<a href="http://ask.com"><li>Ask.com</li></a>
<a href="http://excite.com"><li>Excite</li></a>
<a href="http://duckduckgo.com"><li>DuckDuckGo</li></a>
</ul>
<script>
function myFunction() {
var x = document.getElementById('ulstyle');
if (x.style.display === 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
</script>
</body>
</html>
暴徒ビューでナビゲーションを隠すものは何もありません。メディアクエリ（ここにはない）とjavascriptをチェックする必要があります。 –