如何在右侧而不是左侧打开 Materialise SideNav?
How do I open a Materialize SideNav on the right, instead of the left?
我正在使用 Materialise 设计框架,但我想从右侧打开 SideNav。我对 Materialise 了解不多。现在我的SideNav是从左边打开的,但是我想从右边打开SideNav。
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
$('.collapsible').collapsible();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<nav>
<ul class="hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
尝试在 '.button-collapse'.sideNav(...)
上使用 edge: 'right'
,如下所示:
$('.button-collapse').sideNav({
menuWidth: 300,
closeOnClick: true,
edge: 'right', // <--- CHECK THIS OUT
}
);
$('.collapsible').collapsible();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<nav>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
如果您将 Angular 与 materialize 一起使用,请确保您拥有:
$('.button-collapse').sideNav({
menuWidth: 300,
closeOnClick: true,
edge: 'right', // <--- CHECK THIS OUT
}
);
$('.collapsible').collapsible();
从控制器中的函数调用。我的看起来像这样:
home.parallax = function() {
$('.parallax').parallax()
}
home.sideNav = function() {
$('.button-collapse').sideNav({
menuWidth : 300,
edge : 'right',
closeOnClick : true,
draggable : true
});
}
我认为现在不得不这么说很愚蠢,但我试图从 init.js 文件中修改诸如 edge 和 menuWidth 之类的东西,我认为文档告诉我我需要 sideNav工作。
希望这对像我一样将边缘设置为 'right' 的人有所帮助,但经过几次良好的硬重置后,却一次又一次地在左侧看到它。
我正在使用 Materialise 设计框架,但我想从右侧打开 SideNav。我对 Materialise 了解不多。现在我的SideNav是从左边打开的,但是我想从右边打开SideNav。
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
$('.collapsible').collapsible();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<nav>
<ul class="hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
尝试在 '.button-collapse'.sideNav(...)
上使用 edge: 'right'
,如下所示:
$('.button-collapse').sideNav({
menuWidth: 300,
closeOnClick: true,
edge: 'right', // <--- CHECK THIS OUT
}
);
$('.collapsible').collapsible();
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<nav>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
如果您将 Angular 与 materialize 一起使用,请确保您拥有:
$('.button-collapse').sideNav({
menuWidth: 300,
closeOnClick: true,
edge: 'right', // <--- CHECK THIS OUT
}
);
$('.collapsible').collapsible();
从控制器中的函数调用。我的看起来像这样:
home.parallax = function() {
$('.parallax').parallax()
}
home.sideNav = function() {
$('.button-collapse').sideNav({
menuWidth : 300,
edge : 'right',
closeOnClick : true,
draggable : true
});
}
我认为现在不得不这么说很愚蠢,但我试图从 init.js 文件中修改诸如 edge 和 menuWidth 之类的东西,我认为文档告诉我我需要 sideNav工作。
希望这对像我一样将边缘设置为 'right' 的人有所帮助,但经过几次良好的硬重置后,却一次又一次地在左侧看到它。