Я пытаюсь создать панель навигации веб-сайта для любого размера, то есть как для p c, так и для мобильных устройств. Здесь я уже написал свой код и он также работает, но если щелкнуть мой dropdownIcon, чтобы увидеть мой список в размере мобильного экрана, он не отображается в формате, который я описал, но в формате по умолчанию без каких-либо действий, как показано на изображении. [
/************ Default *************************/
nav,
header,
fotter{
display:block;
}
body{
line-height:1;
margin:0;
}
/**************** nav bar *********************/
nav{
width:100%;
margin:0;
}
nav ul{
background-color:#eee;
overflow:hidden;
margin:0;
padding:0;
}
ul.topnav li{
list-style:none;
float:left;
}
ul.topnav li a{
display:block;
text-decoration: none;
color:#666;
padding:14px;
font-size: 20px;
min-height: 16px;
text-transform: uppercase;
}
ul.topnav li a:hover{
background-color: #0080ff;
color:white;
}
ul.topnav li.topnav-right{
float:right;
}
ul.topnav li.dropdownIcon{
float:right;
display:none;
}
/*************** mobile ************************/
@media screen and (max-width:680px){
ul.topnav li:not(:nth-child(1)){
display:none;
}
ul.topnav li.dropdownIcon{
display:block;
}
ul.topnav.responsive li.dropdownIcon{
position: absolute;
top: 0;
right: 0;
}
ul.topnav.responsive{
position:relative;
}
ul.topnav.responsive li{
display: inline;
float: none;
}
ul.topnav.responsive li a{
display:block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My CSS Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="topnav-right"><a href="#signup">Sign up</a></li>
<li class="topnav-right"><a href="#signin">Sign In</a></li>
<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()">☰</a></li>
</ul>
</nav>
<script>
function dropdownMenu(){
var x = document.getElementById("dropdownClick");
if(x.className=="topnav"){
x.className+="responsive";
}else{
x.className="topnav";
}
}
</script>
</body>
</html>
