- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在使用 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>
关于javascript - 如何在右侧而不是左侧打开 Materialise SideNav?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37207668/
我在我的应用程序中使用 MaterializeCSS 的 sideNav。我不想在点击外部时关闭 sideNav。它可以在这样的模态中实现: { dismissible: false } 如何在 si
我对 sidenav 叠加层的高度有这个问题,我知道它与粘性导航栏的 javascript 混淆,但我不知道如何使 sidenav 的高度达到 100%。任何帮助将不胜感激! 代码如下:
当 sidenav 关闭时,我找不到任何方法来绑定(bind)火的东西 ( http://materializecss.com/side-nav.html ) 我什至找不到相关的文档。 其实我正在做一
早上好! 我在我的 Angular 应用中使用 Material Design 侧边导航来为用户提供页面选择。侧面导航首先包含 Logo ,然后是用户可以选择的所有页面 - 如果他已登录。 问题:如果
我正在尝试使用 mat-toolbar 但出现错误: mat-menu.component.html: Responsive Navigation Menu I
我正在使用 Angular、Angular-Material 和 Leaflet 创建一个具有 sidenav 和 map 的网络。
我有以下代码: Settings
我问了类似的问题,但没有得到答案,所以我会再试一次。我有一个网页。在此页面中,我试图用点制作侧面导航。网页被分成几个部分。我需要做到这一点,以便每次滚动到另一个部分时,该点都会改变颜色。例如:第一部分
我刚刚下载了 mdbootstrap。按照在网页上实现侧面导航的说明进行操作后,当我尝试初始化它时,出现以下错误: Uncaught TypeError: $(...).sideNav is not
我正在处理一个在屏幕右侧有五个图标的网站。在一个完美的世界中,点击每个图标都会打开其各自的 sidenav。 例如: MyBtn onclick 打开 sidenav 并关闭所有其他 sideav。
我有一个简单的 javascript 可以为我打开一个侧边栏,但我希望它在右侧而不是左侧。请参阅下面的 gif 和代码。任何人都知道我需要做什么来解决这个问题?非常感谢您添加的任何解释,以便我更好地理
我的 sidenav 中的内容不在其容器内。它在 jsfiddle 中看起来不错,但在我的浏览器中却不行。 (Firefox 17.1 Ubuntu Quantal) jsfiddle
我创建了一个母版页 - wrap.master,其中附有许多内容页。现在我想创建一个新的内容页面并附加到它上面。母版页有一个标题和侧面导航。但是在我的新内容页面中,我不想要标题和侧面导航。通常,我希望
由于某些原因,我正在我的网站按钮上的登录页面上工作,当 sidenav 退出时提交按钮不可点击(我正在使用物化框架)。 我对我的 sidenav 做了一些修改,这样当覆盖层出来时它就会被移除,并且在它
大家好,我正在尝试让固定在右上角的导航来自屏幕的右侧(从右到左的动画)。现在使用来自 w3school 的示例,我能够想出以下代码:HTML: × About Services Cli
我试图在点击按钮时打开react sideNav栏。我指的是这些文章来做到这一点: https://github.com/gauravchl/react-simple-sidenav https://
对于基于 Angular Material 的项目,我正在尝试使用 sidenav具有不同 View 可能性的组件,具体取决于用户的设备(台式机或手机)。到目前为止它有效,但有一些问题。也就是说,内容
每当用户点击不在侧边栏中的某个地方时,我都会尝试关闭侧边栏。我已经尝试过双向数据绑定(bind),现在正在尝试 rxjs' Subject 应用模板 应用组件 openedSubject = new
我想问 我有一个显示隐藏菜单(openNav,closeNav) 这是我的 javascript : function openNav() { document.getElementById(
像下面这样在 mat-tab 中加载 sidenav 是否有效? Sidenav Main Content
我是一名优秀的程序员,十分优秀!