Где располагать в ДОМе фуллскрин меню?

Question

[ilovemaryjane]

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

Так вот, куда "правильно" располагать это вызывающееся фулскрин меню/Drawer? Где его рендерить в ДОМ дереве? Там же в хедере, либо вынести его отдельно из хедера?

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

Answer 1

[Максим]

вообще наверно в самом верху выше шапки
но наверно щас в css3 уже без разницы : demo

Comments

[ilovemaryjane]

А что особенного в css3 и что я должен увидеть в этом примере? Поменяй left на right https://codepen.io/anon/pen/RqJPYB?editors=0100

[ilovemaryjane]

+ хедер естесвенно фиксед и с индексом. Короче, это невозможно, тут побробно - Есть ли способ перебить z-index?

Этот вопрос не об этом вообще

[Максим]

ilovemaryjane, не понял - как не возможно ? https://codepen.io/topicstarter/pen/LXrpBq
я наверно не понял суть - поясните

[ilovemaryjane]

Максим Ленский, я же написал. хедер с фиксед, и инексом как у оверлея. В ссылке я привел дискуссия на 40 ответов, мне ее повторить?))

[Максим]

ilovemaryjane, лан - покажи мне вёрстку - полностью - с меню и с фиксированным header

[Максим]

ilovemaryjane, и желательно с макетом - что должно получится

[ilovemaryjane]

Максим Ленский, https://codepen.io/anon/pen/yQEeLv

one должен быть поверх two. при этом сам хедер внизу, естественно. но это невозможно

[Максим]

ilovemaryjane, https://codepen.io/topicstarter/pen/oQyjrr?editors=1100 так ?

[ilovemaryjane]

Максим Ленский, лол. нет конечно. Все проехали, вчера одному 40 сообщений объяснял, сегодня другой)

[Максим]

ilovemaryjane, это не возможно сделать тогда - пересмотрите вёрстку

[ilovemaryjane]

Максим Ленский, вы вопрос читали заданный? Я про это и спрашиваю.

Answer 2

[Pit]

лучше расположить в header

Comments

[crdrads]

У автора хедер с трансформом, что делает невозможным фуллскрин у ребенка.

[Pit]

crdrads, почему это невозможно? все возможно, спокойно сделать. Надо только код посмотреть а лучше саму страницу с готовым примером

[crdrads]

Pit, ты ошибаешся, это невозможно. Ты хочешь воочию убедится в своей неправоте? Сделай хедер с fixed + transfrom. Потмо попробуй его ребенка сделать на весь экран. Это невозможно.

[crdrads]

Pit, вот тебе пример кода, дерзай))) https://codepen.io/anon/pen/YRJyyx

Если уберешь это то все ок

position: fixed;
transform: translate3d(0,0,0)

А у автора имеенно это, поэтому он и выносит оверлей из хедера.

Answer 3

[Александр Косицын]

По потоку html нужна распологать в самом низу разметки. Потому что это типо модального окна. И логично это искать где то внизу разметки. Если это анимация, то нужно абсолютом выносить из потока. Чтобы не мешать доугие элементам. А на кнопку бургера меняй zindex при нажатии .

Comments

[crdrads]

Интересно, ты каким местом вопрос читаешь? Видимо задним? Автор ясно же написал

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

И приложил пример https://codepen.io/anon/pen/yQEeLv

Поэтому ты либо балабол либо очень плохой специалист

А на кнопку бургера меняй zindex при нажатии

Это никак не поможет, от слова совсем. Это не перебьет индекс РОДИТЕЛЯ. А автору хедер нужно оставить ссзади, достать надо только кнопку гамбургера. Разницу ощущаешь, или не хватает опыта?

[Александр Косицын]

crdrads, спасибо что помог разобраться. теперь мне точно хватает опыта