Question

我点击图标时导航栏不出现 HTML 我希望当点击图标时导航栏出现在我的屏幕左侧即使我添加 + 代替 ~ 或添加 labal 和 van 或仅 nav 代替 ul 也没有任何反应我没有使用 js 因为我只在这个项目中使用 HTML 和 CSS

@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 screen and (max-width: 960px) {
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;
}
}

<DOCTYPE html>
<html lang="en">
<head>
  <title>Organic Pe|Home</title>
  <link rel="stylesheet" href="index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="index.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
  
  
</head>
<body>

  
  <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>
     <nav>
      <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>
</body>
</html>

Answer 1

您需要稍微更改 HTML 结构。

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 0.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 screen and (max-width: 960px) {
  ul {
    position: fixed;
    height: 100vh;
    width: 70%;
    background-color: orange;
    text-align: left;
    top: 80px;
    left: -100%;
    transition: all 0.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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<nav>
  <label for="check">
    <i class="fa fa-bars" id="btn"></i>
  </label>
  <input type="checkbox" id="check">
  <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>

在 Codepen 上检查它的操作：https://codepen.io/manaskhandelwal1/pen/qBqRoMa

当我点击图标时，我的导航栏不显示

1 个答案: