Блог

Главная - Вопросы по программированию - Почему отображаются не все элементы в моем ul?

Почему отображаются не все элементы в моем ul?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать адаптивную панель навигации, но отображаются не все элементы из моего ul,

ПРОБЛЕМА:

введите описание изображения здесь

     console.log('works')
    
    document.querySelector('.container__hamburger').addEventListener('click', ()=>{
        document.querySelector('.container__navbar').classList.toggle('showMenu')
    })  
     @import url("https://fonts.googleapis.com/css2?family=Robotoamp;display=swap");
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .container {
      display: flex;
      background-color: #2b2f33;
      width: 100%;
      height: 65px;
    }
    
    .container__navbar {
      display: flex;
      font-family: "Roboto", sans-serif;
      width: 100%;
    }
    
    .container__logo {
      display: inline;
      width: 25%;
      margin-right: 30px;
      margin-left: 10px;
    }
    
    .navbar__list {
      display: flex;
      width: 100%;
      list-style: none;
      align-items: center;
      color: #ffffff;
    }
    
    .list__item{
      margin-right: 30px;
    }
    
    
    .container__hamburger {
      display: none;
      color: #ffffff;
      align-self: center;
    }
    
    @media (max-width: 890px) {
    
      .container {
        position: fixed;
      }
    
      .container__navbar {
        position: fixed;
        height: 100%;
        left: 0;
        top: 65px;
        transition: 0.5s;
        background-color: #2b2f33;
        transform: translateX(-100%);
        width: 250px;
      }
    
      .showMenu {
        transform: translateX(0);
      }
    
      .navbar__list {
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    
      .container__hamburger {
        display: block;
        margin-left: auto;
        margin-right: 30px;
      }
    
      .list__item {
        width: 100%;
        padding: 10px;
      }
    
    }  
     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
        <div class="container">
          <img
            class="container__logo"
            src="assets/images/gamezonia.png"
            alt="logo"
          />
          <nav class="container__navbar">
            <ul class="navbar__list">
              <li class="list__item">Home</li>
              <li class="list__item">Category 1</li>
              <li class="list__item">Category 2</li>
              <li class="list__item">Category 3</li>
              <li class="list__item">Contact</li>
              <li class="list__item">Item</li>
              <li class="list__item">Item2</li>
              <li class="list__item">Item3</li>
              <li class="list__item">Item4</li>
              <li class="list__item">Item5</li>
              <li class="list__item">Item6</li>
            </ul>
          </nav>
    
          <div class="container__hamburger">
            <i class="fas fa-bars"></i>
          </div>
        </div>
    
        <!-- FONT AWESOME -->
        <script
          src="https://kit.fontawesome.com/96fadf0e69.js"
          crossorigin="anonymous"
        ></script>
        <!-- FONT AWESOME -->
    
        <script src="./index.js"></script>
      </body>
    </html>

Комментарии:

1. @EugenSunic Мы не рекомендуем ссылки на сторонние сайты. Исполняемый код может быть встроен прямо здесь, в вопросе.

2. Я вижу все элементы. Не удается воспроизвести.

3. @EugenSunic Что такое «эти вещи» и где iframe они? Как вы можете видеть, я обновил вопрос, чтобы иметь исполняемый код, и он работает просто отлично.

4. @ScottMarcus Да, вы можете видеть все элементы, если панель справа, но если она ниже, вы видите только 4, это зависит от высоты (под панелью я подразумеваю инструмент разработчика)

5. @ScottMarcus, я тоже вижу проблему в Chrome и FF. Я получаю полосу прокрутки, но не могу прокрутить пункт 4. Видно во фрагменте без расширения на весь экран.

Ответ №1:

Вы .container__navbar уменьшили область просмотра на 65 пикселей. Вам нужно убрать это значение со 100% высоты, используя height:calc(100% - 65px); 

 console.log('works')
    
    document.querySelector('.container__hamburger').addEventListener('click', ()=>{
        document.querySelector('.container__navbar').classList.toggle('showMenu')
    })  
 @import url("https://fonts.googleapis.com/css2?family=Robotoamp;display=swap");
    
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .container {
      display: flex;
      background-color: #2b2f33;
      width: 100%;
      height: 65px;
    }
    
    .container__navbar {
      display: flex;
      font-family: "Roboto", sans-serif;
      width: 100%;
    }
    
    .container__logo {
      display: inline;
      width: 25%;
      margin-right: 30px;
      margin-left: 10px;
    }
    
    .navbar__list {
      display: flex;
      width: 100%;
      list-style: none;
      align-items: center;
      color: #ffffff;
    }
    
    .list__item{
      margin-right: 30px;
    }
    
    
    .container__hamburger {
      display: none;
      color: #ffffff;
      align-self: center;
    }
    
    @media (max-width: 890px) {
    
      .container {
        position: fixed;
      }
    
      .container__navbar {
        position: fixed;
        height: calc(100% - 65px);
        left: 0;
        top: 65px;
        transition: 0.5s;
        background-color: #2b2f33;
        transform: translateX(-100%);
        width: 250px;
      }
    
      .showMenu {
        transform: translateX(0);
      }
    
      .navbar__list {
        display: block;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    
      .container__hamburger {
        display: block;
        margin-left: auto;
        margin-right: 30px;
      }
    
      .list__item {
        width: 100%;
        padding: 10px;
      }
    
    }  
 <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
        <div class="container">
          <img
            class="container__logo"
            src="assets/images/gamezonia.png"
            alt="logo"
          />
          <nav class="container__navbar">
            <ul class="navbar__list">
              <li class="list__item">Home</li>
              <li class="list__item">Category 1</li>
              <li class="list__item">Category 2</li>
              <li class="list__item">Category 3</li>
              <li class="list__item">Contact</li>
              <li class="list__item">Item</li>
              <li class="list__item">Item2</li>
              <li class="list__item">Item3</li>
              <li class="list__item">Item4</li>
              <li class="list__item">Item5</li>
              <li class="list__item">Item6</li>
            </ul>
          </nav>
    
          <div class="container__hamburger">
            <i class="fas fa-bars"></i>
          </div>
        </div>
    
        <!-- FONT AWESOME -->
        <script
          src="https://kit.fontawesome.com/96fadf0e69.js"
          crossorigin="anonymous"
        ></script>
        <!-- FONT AWESOME -->
    
        <script src="./index.js"></script>
      </body>
    </html>