Как сделать скользящую боковую панель навигации, которая находится только в середине дисплея, а не на всей высоте экрана? (начальная загрузка 3, материализоваться)

Я использую следующий шаблон липкого нижнего колонтитула из начальной загрузки: http://getbootstrap.com/examples/sticky-footer-navbar/

Я хочу иметь боковую панель навигации (например, эту: http://materializecss.com/side-nav.html, который можно нажать на кнопку, и он выскользнет сбоку), но я не хочу, чтобы он занимал всю страницу, я только хочу, чтобы он закрывал «средний» раздел страницы над нижним колонтитулом и под заголовком.

Поддерживает ли bootstrap или materialize эту скользящую боковую панель навигации в середине страницы и не занимает все это?


angular html twitter-bootstrap materialize
person Rolando    schedule 11.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам просто нужно настроить css.

Например, с заголовком 80px и нижним колонтитулом 80px:

.side-nav {
    top: 80px;
    height: calc(100% - 160px);
}

http://codepen.io/migli/pen/JNPaep

person migli    schedule 11.04.2017
comment
Это выглядит именно так, как я хочу, но модальное окно затемняет весь дисплей, можно ли что-то сделать с этим, чтобы затемнить только среднюю часть? - person Rolando; 14.04.2017
comment
Я только что обновил перо, чтобы расположить наложение так же, как в средней части. - person migli; 14.04.2017