Адаптивное меню только с CSS не отображается - PullRequest
Новая
       3

Адаптивное меню только с CSS не отображается

0 голосов
/ 28 октября 2018

Я работаю над отзывчивым меню css + jquery, у меня есть флажок с текстом (символ «+», который превращается в «x» после нажатия), который показывает меню, однако по какой-то причине флажок исчезает после Я щелкаю, чтобы закрыть меню, и я хочу это исправить.

Вот HTML: 

<header>
  <nav>
    <div class="toggle">
      <input type="checkbox" id="hacky-input">
      <label for="hacky-input">
                        <div class="crossRotate">+</div>
                    </label>
    </div>
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PROJECTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

и css: 

a {
  text-decoration: none;
  color: gray;
  padding: 0 50px;
}

header {
  height: 12vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  flex-grow: 1;
}

li {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  font-size: 18px;
}

@media (max-width:768px) {
  .logo {
    display: none;
  }
  ul {
    display: none;
  }
  .menu {
    float: right;
    font-size: 60px;
    padding-right: 20px;
    cursor: pointer;
  }
  #hacky-input {
    display: none;
  }
  .crossRotate {
    float: right;
    padding-right: 50px;
    font-size: 60px;
    width: 5px;
    color: rgb(0, 166, 231);
    cursor: pointer;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  #hacky-input:checked+label .crossRotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .toggle {
    display: block;
    width: 100%;
  }
  ul li {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .active {
    display: block;
  }
  ul {
    display: none;
  }
}

и JS: 

$(document).ready(function() {
  $('.crossRotate').click(function() {
    $('ul').toggleClass('active');
  })
})

Вот jsfiddle

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Метка поворота не исчезла.Он был перемещен в верхнюю часть вашей страницы.
Проблема здесь:

Ваш <header> элемент имеет ограниченную высоту 12vh.
Когда ваш список ul равен active, высота nav больше, чем у вашего элемента <header>.
В то же время вы просите элементы в теге nav выровнять в направлении столбца и space-around, что делает превышенную частьпереполнить на верхнюю сторону, так что вы не можете видеть это.

Обходной путь - просто удалить justify-content в вашем nav CSS. 

nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex-grow: 1;
}

Это должно сработать, попробуйте.

0 голосов
/ 28 октября 2018

Кажется, проблема в том, что крест выталкивается за пределы элемента ul.Если бы вы добавили position:absolute к нему, крестик остался бы на том же месте, когда откроется меню.Другим способом было бы изменить высоту вашего заголовка, чтобы все элементы могли в нем поместиться.Я сделал изменение высоты (height: auto;) в приведенном ниже коде, чтобы вы могли увидеть результат. 

$(document).ready(function() {
  $('.crossRotate').click(function() {
    $('ul').toggleClass('active');
  })
})
a {
  text-decoration: none;
  color: gray;
  padding: 0 50px;
}

header {
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  flex-grow: 1;
}

li {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  font-size: 18px;
}

@media (max-width:768px) {
  .logo {
    display: none;
  }
  ul {
    display: none;
  }
  .menu {
    float: right;
    font-size: 60px;
    padding-right: 20px;
    cursor: pointer;
  }
  #hacky-input {
    display: none;
  }
  .crossRotate {
    float: right;
    padding-right: 50px;
    font-size: 60px;
    width: 5px;
    color: rgb(0, 166, 231);
    cursor: pointer;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
  }
  #hacky-input:checked+label .crossRotate {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .toggle {
    display: inline-block;
    width: 100%;
  }
  ul li {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .active {
    display: inline-block;
    width:100%;
  }
  ul {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <div class="toggle">
      <input type="checkbox" id="hacky-input">
      <label for="hacky-input">
                        <div class="crossRotate">+</div>
                    </label>
    </div>
    <ul>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PROJECTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>
...