выезжающее меню справа на чистом CSS

269

11 февраля 2020, 18:10

У меня краткий вопрос, почему когда боковое меню слева выезжает по нажатию на гамбургер нормально, но когда, меню справа, то при нажатии на гамбургер меню сдвигает страницу. если надо скину код, но я думаю опытные поймут о чем я. мне буквально в двух словах объяснить почему так происходит, и какое(какие) свойства на это влияет, спасибо.

<body>
<header>
<div class="wrapper">
<div class="logo">
<img src="img/logos.png" alt="">
<span>Waxom</span>
</div>
<input type="checkbox" id="check">
<div class="nav-wrapper">
<a href="#" class="nav-link">Home</a>
<a href="#" class="nav-link">About Us</a>
<a href="#" class="nav-link">Portfolio</a>
<a href="#" class="nav-link">Features</a>
<a href="#" class="nav-link">Blog</a>
<a href="#" class="nav-link">Pricing</a>
<a href="#" class="nav-link">Shortecodes</a>
<a href="#" class="nav-link">Contact</a>
<a href="#" class="nav-link"><img src="img/icon/cart.png" alt="" width="24px" height="24px"></a>
<a href="#" class="nav-link"><img src="img/icon/search.png" alt="" width="24px" height="24px"></a>
</div>
<label class="label" for="check"></label>
</div>
</header>
</body>


<style>
* {
    padding:0;
    margin:0;   
}
header {
    background:url(img/bg.jpg);
    background-size:cover;
    background-position:center center;
    height:1024px;
}
.wrapper {
    margin:0 auto;
    max-width:1240px;
    width:90%;
}
.logo {
    padding-top:40px;
    padding-left:40px;
    width:auto;
    display:inline-block;
    float:left;
}
.logo img {
    height:55px;
    width:auto;
}
.logo span {
    font-family: 'Montserrat', sans-serif;
    font-size:30px;
    vertical-align:top;
    font-weight:700;
    line-height:normal;
    color:#fff;
}
.nav-wrapper {
    display:flex;
    float:right;
    width:auto;
    height:25px;
    padding-top:45px;   
}
.nav-link  {
    padding:0 10px;
    text-decoration:none;
    color:#fff;
    transition:color 0.1s linear;
    font-size:14px;
}
 .nav-link:nth-child(n+9) {
    padding:0 20px;
}
.nav-link:nth-child(n+9):hover {
    opacity:0.7;
}
.nav-link:hover {
    color:#c7b299;
}
#check {
    display:none;
    position:absolute;
}
.label:after {
    content: '\2630';
    text-decoration: none;
    font-size:30px;
    position:absolute;
    left:0;
    top:100px;
    display:none;
}
@media screen and (max-width:1024px) {
    .nav-wrapper {
        flex-direction:column;
        position:absolute;
        z-index:10;
        top:150px;
        right:-150px;
        padding-top:0;
        width:200px;
        height:auto;
        background:lightgrey;
        transition:left 0.2s linear;
    }
    .label:after {
        display:block;
    }
    #check:checked ~ .nav-wrapper {
        right:0;
    }
    #check:checked ~ .label:after {
        content: '\2715';
    }   
}

Answer 1

добавьте к body свойство overflow: hidden,в вашем случае overflow-x: hidden, чтобы вертикальная прокрутка осталась, вообще такое меню делается иными способ. Хотя, если вы только изучаете html + css, вопросов не имею) В дальнейшем научитесь)

Подробнее о свойстве можно почитать тут ТУТ

* { 
    padding:0; 
    margin:0;    
} 
 
body{ 
overflow-x: hidden; 
} 
 
header { 
    background:url(img/bg.jpg); 
    background-size:cover; 
    background-position:center center; 
    height:1024px; 
} 
.wrapper { 
    margin:0 auto; 
    max-width:1240px; 
    width:90%; 
} 
.logo { 
    padding-top:40px; 
    padding-left:40px; 
    width:auto; 
    display:inline-block; 
    float:left; 
} 
.logo img { 
    height:55px; 
    width:auto; 
} 
.logo span { 
    font-family: 'Montserrat', sans-serif; 
    font-size:30px; 
    vertical-align:top; 
    font-weight:700; 
    line-height:normal; 
    color:#fff; 
} 
.nav-wrapper { 
    display:flex; 
    float:right; 
    width:auto; 
    height:25px; 
    padding-top:45px;    
} 
.nav-link  { 
    padding:0 10px; 
    text-decoration:none; 
    color:#fff; 
    transition:color 0.1s linear; 
    font-size:14px; 
} 
 .nav-link:nth-child(n+9) { 
    padding:0 20px; 
} 
.nav-link:nth-child(n+9):hover { 
    opacity:0.7; 
} 
.nav-link:hover { 
    color:#c7b299; 
} 
#check { 
    display:none; 
    position:absolute; 
} 
.label:after { 
    content: '\2630'; 
    text-decoration: none; 
    font-size:30px; 
    position:absolute; 
    left:0; 
    top:100px; 
    display:none; 
} 
@media screen and (max-width:1024px) { 
    .nav-wrapper { 
        flex-direction:column; 
        position:absolute; 
        z-index:10; 
        top:150px; 
        right:-150px; 
        padding-top:0; 
        width:200px; 
        height:auto; 
        background:lightgrey; 
        transition:left 0.2s linear; 
    } 
    .label:after { 
        display:block; 
    } 
    #check:checked ~ .nav-wrapper { 
        right:0; 
 
    } 
    #check:checked ~ .label:after { 
        content: '\2715'; 
    }    
}

<body> 
<header> 
<div class="wrapper"> 
<div class="logo"> 
<img src="img/logos.png" alt=""> 
<span>Waxom</span> 
</div> 
<input type="checkbox" id="check"> 
<div class="nav-wrapper"> 
<a href="#" class="nav-link">Home</a> 
<a href="#" class="nav-link">About Us</a> 
<a href="#" class="nav-link">Portfolio</a> 
<a href="#" class="nav-link">Features</a> 
<a href="#" class="nav-link">Blog</a> 
<a href="#" class="nav-link">Pricing</a> 
<a href="#" class="nav-link">Shortecodes</a> 
<a href="#" class="nav-link">Contact</a> 
<a href="#" class="nav-link"><img src="img/icon/cart.png" alt="" width="24px" height="24px"></a> 
<a href="#" class="nav-link"><img src="img/icon/search.png" alt="" width="24px" height="24px"></a> 
</div> 
<label class="label" for="check"></label> 
</div> 
</header> 
</body>

Answer 2

Лучше делать через свойство transform: translate.
К body - overflow-X: hidden и добавляем к .nav-wrapper и #check:checked вышесказанные свойства.

Больше про transform на MDN

<body> 
  <header> 
    <div class="wrapper"> 
      <div class="logo"> 
        <img src="img/logos.png" alt=""> 
        <span>Waxom</span> 
      </div> 
      <input type="checkbox" id="check"> 
      <div class="nav-wrapper"> 
        <a href="#" class="nav-link">Home</a> 
        <a href="#" class="nav-link">About Us</a> 
        <a href="#" class="nav-link">Portfolio</a> 
        <a href="#" class="nav-link">Features</a> 
        <a href="#" class="nav-link">Blog</a> 
        <a href="#" class="nav-link">Pricing</a> 
        <a href="#" class="nav-link">Shortecodes</a> 
        <a href="#" class="nav-link">Contact</a> 
        <a href="#" class="nav-link"><img src="img/icon/cart.png" alt="" width="24px" height="24px"></a> 
        <a href="#" class="nav-link"><img src="img/icon/search.png" alt="" width="24px" height="24px"></a> 
      </div> 
      <label class="label" for="check"></label> 
    </div> 
  </header> 
</body> 
 
 
 
 
<style> 
  * { 
    padding: 0; 
    margin: 0; 
  } 
   
  body { 
    overflow-X: hidden; 
  } 
   
  header { 
    background: url(img/bg.jpg); 
    background-size: cover; 
    background-position: center center; 
    height: 1024px; 
  } 
   
  .wrapper { 
    margin: 0 auto; 
    max-width: 1240px; 
    width: 90%; 
  } 
   
  .logo { 
    padding-top: 40px; 
    padding-left: 40px; 
    width: auto; 
    display: inline-block; 
    float: left; 
  } 
   
  .logo img { 
    height: 55px; 
    width: auto; 
  } 
   
  .logo span { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 30px; 
    vertical-align: top; 
    font-weight: 700; 
    line-height: normal; 
    color: #fff; 
  } 
   
  .nav-wrapper { 
    display: flex; 
    width: 0; 
    height: 25px; 
    padding-top: 45px; 
  } 
   
  .nav-link { 
    padding: 0 10px; 
    text-decoration: none; 
    color: #fff; 
    transition: color 0.1s linear; 
    font-size: 14px; 
  } 
   
  .nav-link:nth-child(n+9) { 
    padding: 0 20px; 
  } 
   
  .nav-link:nth-child(n+9):hover { 
    opacity: 0.7; 
  } 
   
  .nav-link:hover { 
    color: #c7b299; 
  } 
   
  #check { 
    display: none; 
    position: absolute; 
    transition: 0.2s linear; 
  } 
   
  .label:after { 
    content: '\2630'; 
    text-decoration: none; 
    font-size: 30px; 
    position: absolute; 
    left: 0; 
    top: 100px; 
    display: none; 
  } 
   
  @media screen and (max-width:1024px) { 
    .nav-wrapper { 
      flex-direction: column; 
      position: absolute; 
      z-index: 10; 
      top: 150px; 
      right: 0px; 
      transform: translateX(100%); 
      padding-top: 0; 
      width: 200px; 
      height: auto; 
      background: lightgrey; 
      transition: 0.2s linear; 
    } 
    .label:after { 
      display: block; 
    } 
    #check:checked~.nav-wrapper { 
      transform: translateX(0); 
    } 
    #check:checked~.label:after { 
      content: '\2715'; 
    } 
  }