1

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

<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';
    }   
}
5
  • 1
    Может добавляется прокрутка?) без кода ничего не понятно
    – meine
    23 апр 2019 в 16:23
  • Приложите код, вариантов множество
    – user298256
    23 апр 2019 в 16:30
  • код скинул, немного не оформил меню при адаптивности но просто черновик по этому пока еще не доработал 23 апр 2019 в 16:42
  • можете в стилях поменять с right на left и увидите разницу 23 апр 2019 в 16:43
  • поймете что я имел ввиду 23 апр 2019 в 16:43

2 ответа 2

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';
    }
  }

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>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.