CSS MaterializeCSS NavBar 和 SideNav
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39909140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MaterializeCSS NavBar and SideNav
提问by wobsoriano
I'm creating a sb admin 2 like page where it has 2 navigations that looks like this:
我正在创建一个类似于 sb admin 2 的页面，其中有 2 个导航，如下所示：
And what I've done so far is this:
到目前为止我所做的是：
As you can see, the side navigation extends at the top bar. My code so far is this:
如您所见，侧面导航延伸到顶部栏。到目前为止我的代码是这样的：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="navbar-fixed">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">User Profile</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">Logout</a></li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo">Point of Sale</a>
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>
What I am trying to achieve is this:
我想要实现的是：
Is this possible?
这可能吗？
回答by Anish
As the Side Nav documentations says:
You have to offset your content by the width of the side menu. so do like this
您必须通过侧边菜单的宽度来抵消您的内容。所以这样做
<style type="text/css">
.wrapper {
padding-left: 300px;
}
</style>
and wrap your code in wrapper div
并将您的代码包装在包装器 div 中
<div class="wrapper">
<div class="">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">User Profile</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">Logout</a></li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo">Point of Sale</a>
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
回答by Michelli Brito
You should try:
你应该试试：
<style type="text/css">
.side-nav{
top: 65px;
width: 250px;
}
</style>
and wrap your code in header and aside:
并将您的代码包装在标题和旁边：
<header>
<div class="navbar-fixed">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li><a href="#!">User Profile</a></li>
<li><a href="#!">Settings</a></li>
<li class="divider"></li>
<li><a href="#!">Logout</a></li>
</ul>
<div class="nav-wrapper">
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo">Point of Sale</a>
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<aside>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
</aside>
回答by MAFiA303
here is my fix to avoid over lap with the top navbar, and to hide on small to med screens
这是我的解决方法，以避免与顶部导航栏重叠，并隐藏在小屏幕到中屏幕上
add:
添加：
<ul class="sidenav sidenav-fixed invesible-top" id="mobile-nav">
also optional to make it show on top again on small screens:
也可以选择让它在小屏幕上再次显示在顶部：
<li class="hide-on-large-only">
style:
风格：
@media only screen and (min-width : 992px) {
.invesible-top {
top: 65px;
}
}
回答by KielSoft
Sometime I ran into some problem when Nav was overflowing beyond the width of its wrapper (in my case, header tag) so I use this instead of what MaterializeCSS recommends:
有时，当 Nav 溢出超出其包装器的宽度（在我的情况下，标题标签）时，我遇到了一些问题，所以我使用它而不是 MaterializeCSS 推荐的：
Note: In sass though.
注意：虽然在 sass 中。
header, main, footer {
margin-left: 300px;
nav {
left: 300px;
right: 0;
width: auto;
}
@media only screen and (max-width : 992px) {
margin-left: 0;
nav {
left: 0;
right: 0;
width: auto;
}
}
}
