-3

这是我使用的代码。按下导航栏菜单时，内容应向右移动，延迟 0.7 秒，与侧边栏打开延迟 0.7 秒相同，但它不起作用。请检查代码并提出一些建议。是因为我正在使用的一些媒体查询还是其他原因。？请检查代码并提出一些建议。

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.header{
  width: 100%;
  height: 70px;
  background-color: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}

.header img{
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.header h1 {
  line-height: 70px;
  color: #fff;
}

.Content{
  margin-top: 80px;
  width: 100;
  padding: 20px;
  float: right;
  transition: all 0.7s;
}

.Content img{
  width: 100%;
  max-width: 700px;
  display: block;
  margin: auto;
}

.Content p{
  text-align: justify;
}

.Sidebar{
  width: 20%;
  height: 100%;
  position: fixed;
  top: 70px;
  background-color: #353b48;
  left: -100%;
  transition: .7s;
}

.Sidebar ul{
  list-style: none;
}

.Sidebar ul li {
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}

.Sidebar ul li a{
  display: block;
  text-decoration none;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
  transition: .4s;
}

span{
  margin-left: 15px;
}

.Sidebar ul li a:hover {
  border-left: 10px solid white;
}

.social{
  margin-top: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 15px 25px;
}

i{
  font-size: 30px;
  color: #fff;
  transition: .2s;
}

i:hover{
  transform: scale(1.2);
  color: green;
}

.show-btn, .hide-btn {
  font-size: 35px;
  color: #fff;
  position: fixed;
  top: 15px;
  left: 50px;

}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -10;
}

.hide-btn{
  opacity: 0;
}

#chk:checked ~ .Sidebar{
  left: 0;
}

#chk:checked ~ .show-btn{
  opacity: 0;
}

#chk:checked ~ .hide-btn{
  opacity: 1;
}

#chk:checked ~ .Content{
  width: 80%;
  float: right;
  transition: all 0.7s;
}

@media(max-width: 768px){
  .Sidebar{
    width: 100%;
    text-align: center;
  }

  .Sidebar ul li a:hover {
    border-left: 30px solid white;
  }

  .header h1{
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  </head>
  <body>

      <div class="header">
        <img src="../images/fullstackLogo.png" alt="logo-img">
        <h1>FullStack</h1>
      </div>

      <input type="checkbox" name="" id="chk">
      <label for="chk" class="show-btn">
        <i class="fa fa-bars"></i>
      </label>
      <label for="chk" class="hide-btn">
        <i class="fa fa-times"></i>
      </label>

      <div class="Sidebar">
          <ul>
            <li><a href="#"><i class="fa fa-home"><span>Home</span></i></a></li>
            <li><a href="#"><i class="fa fa-user"><span>About</span></i></a></li>
            <li><a href="#"><i class="fa fa-tasks"><span>Services</span></i></a></li>
            <li><a href="#"><i class="fa fa-rss"><span>Blog</span></i></a></li>
            <li><a href="#"><i class="fa fa-id-card"><span>Contact</span></i></a></li>
          </ul>
          <div class="social">
            <a href="#"><i class="fa fa-facebook-square"></i></a>
            <a href="#"><i class="fa fa-youtube-square"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
          </div>
      </div>

      <div class="Content">
        <img src="../images/laptop1.jpg" alt="body-img">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>

  </body>
</html>

4

1 回答 1

0

我更正了你的代码。

由于您使用侧边栏和内容部分的不同 CSS 属性来显示此转换，因此此 CSS 转换无法正常工作。

目前您正在操作侧边栏的 CSS 属性是left -100% to 0导致此问题的原因。

width:0% to 20%请管理与内容部分在同一时间段内交易的侧边栏的CSS 属性。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.header {
  width: 100%;
  height: 70px;
  background-color: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
.header img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.header h1 {
  line-height: 70px;
  color: #fff;
}
.Content {
  margin-top: 80px;
  width: 100%;
  padding: 20px;
  float: right;
  transition: all 0.7s;
}
.Content img {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: auto;
}
.Content p {
  text-align: justify;
}
.Sidebar {
  width:0%;
  height: 100%;
  position: fixed;
  top: 70px;
  background-color: #353b48;
  left:0;
  transition: all 0.7s;
  overflow: hidden;
}
.Sidebar ul {
  list-style: none;
}
.Sidebar ul li {
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
  display: block;
 text-decoration none;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
 transition: .4s;
}
span {
  margin-left: 15px;
}
.Sidebar ul li a:hover {
  border-left: 10px solid white;
}
.social {
  margin-top: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 15px 25px;
}
i {
  font-size: 30px;
  color: #fff;
 transition: .2s;
}
i:hover {
  transform: scale(1.2);
  color: green;
}
.show-btn, .hide-btn {
  font-size: 35px;
  color: #fff;
  position: fixed;
  top: 15px;
  left: 50px;
}
#chk {
  position: absolute;
  visibility: hidden;
  z-index: -10;
}
.hide-btn {
  opacity: 0;
}
 #chk:checked ~ .Sidebar {
 width: 20%;
}
 #chk:checked ~ .show-btn {
 opacity: 0;
}
 #chk:checked ~ .hide-btn {
 opacity: 1;
}
 #chk:checked ~ .Content {
 width: 80%;
}
 @media(max-width: 768px) {
   .Sidebar {
   width: 100%;
   text-align: center;
  }
   .Sidebar ul li a:hover {
   border-left: 30px solid white;
  }
   .header h1 {
   display: none;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  </head>
  <body>
    <div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
      <h1>FullStack</h1>
    </div>
    <input type="checkbox" name="" id="chk">
    <label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
    <label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
    <div class="Sidebar">
      <ul>
        <li><a href="#"><i class="fa fa-home"><span>Home</span></i></a>
          <About/li>
        <li><a href="#"><i class="fa fa-user"><span>About</span></i></a></li>
        <li><a href="#"><i class="fa fa-tasks"><span>Services</span></i></a></li>
        <li><a href="#"><i class="fa fa-rss"><span>Blog</span></i></a></li>
        <li><a href="#"><i class="fa fa-id-card"><span>Contact</span></i></a></li>
      </ul>
      <div class="social"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-youtube-square"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> </div>
    </div>
    <div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
      <p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
  </body>
</html>

请点击“整页”查看正确的输出

于 2020-09-01T10:56:55.430 回答