我的图标没有显示并且我的响应式菜单没有显示答案

【问题标题】：My icon isnt showing and sldo my responsive menu not showing我的图标没有显示并且我的响应式菜单没有显示
【发布时间】：2021-05-16 22:03:14
【问题描述】：

当我减少@media {} 图标显示，但是当我用{} 覆盖时，图标不显示。而且我的响应式菜单也没有显示。

`@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}




nav {
background-color: orange;
height: 80px;
}

nav ul{
float: left;
 margin-left: 10px;
}

nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 15px;
}
nav ul li a {
position: relative;
color:white;
font-size: 18px;
text-transform:uppercase;
padding: 5px 0;
}
nav ul li a:before {
position:absolute;
content: '';
left: 0;
height: 3px;
width: 100%;
bottom: 0;
transform:scaleX(0);
transform-origin: right;
background-color: white;
transition: transform .4s linear;
}
nav ul li a:hover:before{
transform: scaleX(1);
transform-origin: right;
}
label #btn,
label #cancel {
color: white;
font-size: 30px;
float: left;
line-height: 80px;
margin-left: 20px;
cursor:pointer;
display:none;
}
#check {
display:none;
}
@media (max-width: 980px) {
ul {
position:fixed;
height: 100vh;
width: 70%;
background-color: orange;
text-align:left;
top: 80px;
left:-100%;
transition: all .4s;

li {
position:relative;
left: 65px;
}
nav ul li {
display:block;
margin:50px 0;
line-height: 30px;
}
label #btn {
display: block;
}
 nav ul li a {
 font-size: 16px;
 }
}

#check:checked ~ ul {
 left:0;
}
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />


  <nav>
  <input type="checkbox" id="check">
  <label class="check" >
     <i class="fa fa-bars" id="btn" ></i>
     <i class="fa fa-times" id="cancel" ></i>
     </label>
      <ul>
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Forums</a></li>
          <li><a href="#" >Store</a></li>
          <li><a href="#" >Vote</a></li>
          <li><a href="#" >Contact us</a></li>
      </ul>
  </nav>

我希望当点击图标时，菜单会显示，但现在图标字体甚至会显示。而且当在更大的屏幕上时，比如桌面，文本应该显示而图标不应该显示。但现在它也没有显示。

【问题讨论】：

标签： javascript html css media-queries font-awesome

【解决方案1】：

嘿，我注意到的一个错误是您在 ul 之后缺少一个右括号，这就是您的图标未显示的原因。此外，您需要一个 onClick 以将导航栏显示为汉堡菜单。

只要你把结束标签检查一下，它就会再次显示图标。

编辑：

您可以像这样使导航栏响应：

HTML：

<html lang="en">
 
</head>
<body>

  <nav>
  <input type="checkbox" id="check">
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
     <i class="fa fa-bars" id="btn"></i>
     </a>
     <i class="fa fa-times" id="cancel" ></i>
     <div id="myLinks">
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Forums</a></li>
          <li><a href="#" >Store</a></li>
          <li><a href="#" >Vote</a></li>
          <li><a href="#" >Contact us</a></li>
         
      </div>
      
  </nav>
</body>
</html>

CSS：（改变媒体）


@media (max-width: 980px) {
  #myLinks {
    display: none;
  } 

  li {
    position: relative;
    padding: 20px;
    width: 70%;
    background-color: orange;
    text-align: left;
    top: 80px;
    transition: all .4s;
  }

 #btn {
    display: block;
  }

  nav ul li a {
    font-size: 16px;
    color: #ffff;
  }

/* #check:checked + ul {
  left: 0;
} */
}

JS：

function myFunction() {
  var x = document.getElementById("myLinks");
  var cancelBtn= document.getElementById("cancel");
  //console.log(x)
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

您可以根据自己的喜好修复 css

【讨论】：

哦，谢谢它现在可以正常工作，但菜单无法正常工作，就像它没有来一样
那是因为你没有点击图标。因此，即使单击它也没有添加任何功能。
不要 #check:checked ~ up { left: 0; } 可以使用我看到的视频，而且效果很好
而且文字不显示在桌面上它也显示桌面上的图标
你能附上一个jsfiddle或显示完整的代码吗？我无法掌握问题所在..