[英]How to make a sliding side navigation bar that is only in middle of display and not the whole height of the screen? (bootstrap 3, materialize)
I am using the following sticky footer template from bootstrap: http://getbootstrap.com/examples/sticky-footer-navbar/ 我正在从引导程序使用以下粘性页脚模板: http : //getbootstrap.com/examples/sticky-footer-navbar/
I want to have a side-nav bar (like this one: http://materializecss.com/side-nav.html , the kind you can click a button and it slides out from the side), but I do not want it to take up the whole page, I only want it to cover up the "middle" section of the page above the footer and below the header. 我想要一个侧边导航栏(像这样的一个: http : //materializecss.com/side-nav.html ,您可以单击一个按钮并将其从侧面滑出),但是我不想要它要占用整个页面,我只希望它覆盖页脚上方和页眉下方的页面“中间”部分。
Does bootstrap or materialize support this sliding side-navigation bar in the middle of the page and not take up the whole thing? 引导程序或实例化是否支持页面中间的此滑动侧导航栏,而不占用全部内容?
You just have to customize css. 您只需要自定义CSS。
For example, with a 80px header & a 80px footer : 例如,标题为80px,页脚为80px:
.side-nav {
top: 80px;
height: calc(100% - 160px);
}
http://codepen.io/migli/pen/JNPaep http://codepen.io/migli/pen/JNPaep
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.