Как скрыть значок времени при навигации по закрытым боковым слайдам?

#javascript #html #css #shopify

#javascript #HTML #css #Shopify

Вопрос:

Я настраиваю шаблон Shopify и создал средство выбора цвета с нуля. Теперь я создал кнопку X, которая закрывает боковую навигацию по слайдам, и я хотел разместить кнопку X за пределами боковой навигации, но когда боковая навигация закрыта, кнопка все еще там. Я попытался добавить к нему более низкий z-индекс и добавить более высокий z-индекс к заголовку, и это не сработало. Я буду очень благодарен за помощь.

Открытая боковая навигация:

Навигация по закрытым боковым слайдам:

Как вы можете видеть, кнопка X остается после закрытия sidenav.

Мой HTML:

 <div class="sidetimes">

<i class="fas fa-times" style="font-size: 30px;"></i>

</div>

Мой CSS:

 .sidetimes {
padding: 11px 30px 11px 10px;
background: #07c;
display: inline-block;
width: 27px;
border-radius: 0 5px 5px 0;
color: #fff;
cursor: pointer;
box-shadow: -10px 5px 14px 0px #444;
-webkit-box-shadow: 3px 5px 14px 0px #444;
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
-webkit-animation: sliding-panel-close-button-in .4s forwards;
animation: sliding-panel-close-button-in .4s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
position: fixed;
z-index: 9999;
top: 36px;
margin-left: 39.5px;
}

1. Я не могу найти эту боковую панель по ссылке на скриншоте страницы продукта, где я нахожу рабочий пример вашей боковой панели? Спасибо

2. Эта тема находится на предварительном просмотре, потому что она вам ее не показывает. Я работаю над новой темой, и это всего лишь предварительный просмотр. Если вы заинтересованы, я могу предоставить вам учетные данные, чтобы вы могли войти в систему и посмотреть код. Спасибо

Ответ №1:

Я предполагаю, что вы используете Javascript для управления этой анимацией? Если это так, решение состоит в том, чтобы переключать класс на body , когда меню «открыто»

Смотрите пример

 $(".open-icon, .close-icon").click(function(e){
  $("body").toggleClass("menu-open");
});

 nav {
  position: fixed;
  top: 0;
  left: -100%;
  transition: 0.5s;
  height: 100%;
}

.nav-wrap {
  position: relative;
  width: 200px;
  background-color: #efefef;
  padding: 10px;
  height: 100%;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  padding: 5px;
}

body.menu-open nav {
  left: 0;
}

body.menu-open .open-icon {
  display: none;
}

body.menu-open .close-icon {
  display: block;
}

.close-icon {
  position: absolute;
  top: 0;
  right: -30px;
  margin: 0;
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  line-height: 100%;
  display: none;
}

.open-icon {
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 10px;
  cursor: pointer;
  line-height: 100%;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="open-icon">MENU</span>
<nav>
  <div class="nav-wrap">
    <p class="close-icon">amp;times;</p>
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      <li><a href="#">Menu item 7</a></li>
      <li><a href="#">Menu item 8</a></li>
    </ul>
  </div>
</nav>