如何在 Materializecss 中禁用 sidenav 覆盖？

Question

我有以下代码：

    <ul id="slide-out" class="side-nav">
        <li><a class="subheader">Scalls Seleccionados</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 1</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 2</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 3</a></li>
        <li><div class="divider"></div></li>
    </ul>
    <a data-activates="slide-out" class="button-collapse btn-floating btn-large cyan" style="top: 10px; left: 10px;">
        <i class="material-icons">menu</i>
    </a>

当我在 Materializecss 中显示 sidenav 时，你知道如何 disable/remove 覆盖吗？

我花了很多时间尝试删除它。

Answer 1

一种方法是将 .sidenav-overlay{opacity: 0;} 添加到您的 css。

Answer 2

好吧，我也没有找到任何特定的函数调用来这样做。这就是禁用 sidenav 而不将其从 DOM.

中移除的方法

var sideNavElem = $('a[data-activates="slide-out"]');

$(sideNavElem).off('click');
$(sideNavElem).click(function(e){
   e.preventDefault();
});

是否与您要找的相似？

Answer 3

将此添加到您的 css 文件中：

#sidenav-overlay {
    background-color: transparent;
}

Answer 4

如果问题是因为叠加层与导航菜单重叠，请使用此 CSS 修复；

.navbar-fixed {
   z-index: 999; 
}
// the default value is 997 in materialize.min.css, which places the nav behind the overlay... :(

Answer 5

我知道这是一个老问题，但对于任何想要删除覆盖的人来说，以下工作：-

.sidenav-overlay {
    height: 0px;
    width: 0px;
}

或使用 Svelte：-

:global(.sidenav-overlay) {
    height: 0px;
    width: 0px;
}

Answer 6

您可以使用 onOpenStart 事件

轻松地将其从 DOM 中移除

$('.side-nav').sidenav({
    ..., //your sidenav options here
    onOpenStart: function(sidenav) {
        sidenav.M_Sidenav._overlay.remove();
    }
});

如何在 Materializecss 中禁用 sidenav 覆盖？

How to disable sidenav overlay in Materializecss?

html

css

materialize