Почему мое меню переключения не отображает эффекты: hover при работе с медиа-запросами? - PullRequest
Новая
       2

Почему мое меню переключения не отображает эффекты: hover при работе с медиа-запросами?

0 голосов
/ 12 марта 2019

Я создал Toggle Nav, где вы нажимаете кнопку, и появляется панель навигации, и все отлично работает на рабочем столе. Когда я делаю его отзывчивым, у Toggle Nav нет проблем, за исключением того, что он не отображает стили для класса mobile-menu-itmes: hover. Не совсем уверен, что я делаю неправильно ... Это должно быть что-то с CSS, но я не могу понять это. Любая помощь приветствуется, спасибо.

HTML 

  <div class="menu-btn" id="toggle-btn">
    <i class="fas fa-bars fa-2x"></i>
    <div class="mobile-menu">
      <li><a class="mobile-menu-items" href="#">Home</a></li>
      <li><a class="mobile-menu-items" href="#">About</a></li>
      <li><a class="mobile-menu-items" href="#">Services</a></li>
      <li><a class="mobile-menu-items" href="#">Portfolio</a></li>

    </div>
  </div>

SCSS 

 .menu-btn {
  color: #4f6df5;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  padding: 1rem;
  display: none;


.mobile-menu {
  display: none;
  flex-direction: column;
  list-style: none;
  height: 100vh;
  width: 50%;
  padding: 40px;

  .mobile-menu-items {
    font-size: .9rem;
    text-decoration: none;
    color: #242424;
    line-height: 4;
    display: block;
  }

  .mobile-menu-items:hover {
    background: #4f6df5;
    padding: .5rem;
    color: white;
    display: block;
   }
 }
}

Javascript 

const menuBtn = document.querySelector('#toggle-btn');
const mobileMenu = document.querySelector('.mobile-menu');

menuBtn.addEventListener('click', clickedBtn);

function clickedBtn() {
//mobileMenu.classList.toggle("mobile-menu");

if (mobileMenu.style.display === 'none') {
    mobileMenu.style.display = 'block';
} else {
    mobileMenu.style.display = 'none';
   }
}

Медиа-запросы 

@media screen and (max-width: 768px) {
.menu-btn {
display: flex;



}

Ответы [ 2 ]

1 голос
/ 12 марта 2019

В вашем медиа-запросе отсутствует закрывающая фигурная скобка }, поэтому эти стили не отображаются. Я добавил background-color: red в медиа-запрос, чтобы показать вам, что он работает. 

.menu-btn {
  color: #4f6df5;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  padding: 1rem;
  display: flex;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  height: 100vh;
  width: 50%;
  padding: 40px;
}

.mobile-menu-items {
  font-size: .9rem;
  text-decoration: none;
  color: #242424;
  line-height: 4;
  display: block;
}

.mobile-menu-items:hover {
  background: #4f6df5;
  padding: .5rem;
  color: white;
  display: block;
}

@media screen and (max-width: 768px) {
  .menu-btn {
    display: flex;
    background-color: red;
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous" />

<div class="menu-btn" id="toggle-btn">
  <i class="fas fa-bars fa-2x"></i>
  <div class="mobile-menu">
    <li><a class="mobile-menu-items" href="#">Home</a></li>
    <li><a class="mobile-menu-items" href="#">About</a></li>
    <li><a class="mobile-menu-items" href="#">Services</a></li>
    <li><a class="mobile-menu-items" href="#">Portfolio</a></li>
  </div>
</div>

EDIT : SCSS - это расширенный набор CSS, поэтому вы можете переместить фигурные скобки для .menu-btn и .mobile-menu обратно в конец, где они были у вас изначально, и он будет работать точно так же. К сожалению, фрагменты кода SO не поддерживают SCSS.

0 голосов
/ 12 марта 2019

Вы не закрываете фигурные скобки для 

@media screen and (max-width: 768px) {
  .menu-btn {
  display: flex;
  }
}

, поэтому эффект парения не отображается, проверьте обновление Fiddle

...