在Materialize CSS中创建Small Navbar和侧面板 [英] Creating Small Navbar and a side panel in Materialize css
问题描述
我正在为我的新项目使用物化CSS.我想到了一个简单的页面模拟.这就是我想要的.上方的导航栏和侧面板不应隐藏.
I am using materialize css for my new project. I have a simple mock up of the page I have in mind. This is what I would like to have. The navbar above and a side panel shouldn't hide.
我尝试更改实现的CSS以获得侧面导航栏,但无济于事.我更改了
I have tried changing the css of materialize to get a side navbar, but to no avail. I changed the
@media only screen and (max-width: 992px) {
.side-nav.fixed {
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
到
@media only screen and (max-width: 2000px) {
.side-nav.fixed {
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
我也尝试更改.js文件,但是它也没有起作用.我已经缩小了普通导航栏的大小,使其超过了导航的line-height
属性.是否可能需要同时导航?如果没有,我怎么能得到一个侧面板.我只需要在侧面板上显示4个图标,这些图标将具有工具提示,并且在单击时会加载一个模态.我尝试使用materializecss的网格机制,但无法获得想要的东西.
I also tried to change the .js file, but it also didnt work. I have decreased the size of normal navbar over-riding the line-height
property of nav. Is it possible to have to navbars together ? If not, how may I be able to get a side panel. I only need the side panel to show 4 icons, which will have tooltip and on clicking would load up a modal. I tried using grid mechanism of materializecss but wasn't able t get what I want.
任何帮助将不胜感激.
谢谢.
推荐答案
您是否尝试过使用顶部导航栏和固定的侧边栏?然后,您可以设置边栏的宽度样式,以获取所需的大小.
Have you tried using a top navbar along with a fixed sidebar? You could then style the width of the sidebar to get the size you want.
<header>
<nav class="top-nav">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down">
<li><a href="#">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</nav>
<ul style="width:120px; margin-top:65px;" class="side-nav fixed">
<li><a href="#">Icon 1</a></li>
<li><a href="#">Icon 2</a></li>
</ul>
</header>
这篇关于在Materialize CSS中创建Small Navbar和侧面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!