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

Я работаю над созданием страницы Squarespace с пользовательским CSS, чтобы она была адаптивной для мобильных устройств. На экране мобильного устройства на моей странице есть раскрывающееся меню с различными ссылками на страницу. Моя проблема заключается в том, что на некоторых страницах (например, Музыка или Часы) при нажатии кнопки меню раскрывающееся меню скрывается за содержимым страницы. Я знаю, что это связано с использованием 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. Есть ли другой способ, которым я мог бы разместить кнопку меню и раскрывающийся список, и чтобы этот список «выдвигал» содержимое страницы вниз, чтобы список ссылок был виден?

Всего 2 ответа


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

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

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

  z-index: 1;
}

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

ОБНОВЛЕНИЕ - Чтобы также подтолкнуть содержимое вниз при использовании абсолютного позиционирования:

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

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

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

Что это будет делать, когда в документе будет открыт класс меню , то раздел с идентификатором страницы будет сдвинут на 355 пикселей вниз.

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

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

  transition: transform .3s linear;
}

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


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

логотип перекрываются

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

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

Поскольку это 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;
  }
}

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


Есть идеи?

10000