Раскрывающееся меню скрывается за содержимым страницы

Question

Я работаю над созданием страницы Squarespace с настраиваемой CSS, чтобы она была адаптивной для мобильных устройств. На экране мобильного устройства на моей странице есть раскрывающееся меню с различными ссылками на страницу. Моя проблема в том, что на некоторых страницах (например, Musi c или Watch) при нажатии на кнопку меню раскрывающееся меню скрывается за содержимым страницы. Я знаю, что это связано с использованием position: absolute, но я не нашел способа размещения кнопки меню и выпадающего списка, как я хочу, используя position: relative. Это мое CSS для меню:

#mobileNav {
  background: none;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}

#mobileNav .wrapper {
  border-bottom-style: none;
  border-bottom-color: none;
}

Вы можете просмотреть страницу на richiequake.com, используя пароль Help123. Есть ли другой способ разместить кнопку меню и раскрывающийся список и получить список «pu sh» содержимого страницы вниз, чтобы список ссылок был виден?

Answer 1

По сути, вы пропустили это свойство z-index. Который поместит контейнер #mobileNav на более высокий уровень.

Сделав это изменение (добавив свойство z-index к вашему селектору CSS):

#mobileNav {
   background: none;
   position: absolute;
   top: 20%;
   left: 0;
   right: 0;

  z-index: 1;
}

Теперь я вижу ссылки на меню на всех страницах. Вы можете прочитать больше о z-index spe c здесь .

UPDATE - Чтобы также потратить sh содержимое при использовании абсолютного позиционирования:

Поскольку вы уже используете пользовательский класс для переключения ссылок меню, вы также можете использовать его для переключения раздела содержимого.

Добавьте правило селектора в таблицу стилей следующим образом:

.menu-open~section#page {
     transform: translateY(355px);
}

Что это будет делать, когда в документе находится класс open , то раздел с именем id страницы будет сдвинут на 355px.

Вы также можете добавить некоторую анимацию, если вы хотите более плавный эффект при нажатии на контент, например:

#page {
  margin-top: 100px;
  margin-bottom: 100px;
  opacity: 1;
  position: relative;

  transition: transform .3s linear;
}

Я только что добавил transition , где .3s - это время, которое потребуется для перехода.

Answer 2

Одной из проблем использования абсолютного позиционирования, даже если вы используете преобразования для его компенсации, является то, что на некоторых устройствах и браузерах ширины lo go будет перекрывать навигацию. Обратите внимание на то, что отображает текущее решение:

Другая проблема заключается в задержке между тем, когда навигация падает, и когда текст больше не виден:

Поскольку это Squarespace и у вас нет доступа для редактирования базового DOM, я бы использовал flexbox для решения этой проблемы. Чтобы сделать это, сначала избавьтесь от этого :

#mobileNav {
  background: none;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  z-index: 1;
}

И добавьте следующее:

@media only screen and (max-width: 640px) {
  #canvas {
    display: flex;
    flex-direction: column;
  }
  #mobileMenuLink {
    order: 1;
  }
  #mobileNav {
    order: 2;
  }
  #header {
    order: 3;
  }
  #header ~ * {
    order: 4;
  }
}

Обратите внимание, что вышеприведенное не имеет префикса поставщика, поэтому если если вы хотите поддерживать более старые браузеры, вы, соответственно, хотите добавить префикс поставщика.