Materialize CSS - 大屏幕上主要内容旁边的 Sidenav答案

【问题标题】：Materialize CSS - Sidenav next to main content on large screensMaterialize CSS - 大屏幕上主要内容旁边的 Sidenav
【发布时间】：2020-04-17 16:17:15
【问题描述】：

我正在使用 Materialize CSS，我希望我的 sidenav 在屏幕上的主页面内容旁边超过 1920 像素宽度。我在 MaterializeCss 网页上使用了默认的固定 sidenav 示例。

HTML：

<header>
    <!-- NAVBAR -->
    <nav>
        <div class="nav-wrapper teal">
            <div class="row">
                <div class="col s12">
                    <a href="#" data-target="sidenav-1" class="left sidenav-trigger hide-on-large-and-up">
                        <i class="material-icons">menu</i>
                        PAGE NAME
                    </a>
                </div>
            </div>
        </div>
    </nav>
    <!-- SIDENAV -->
    <ul id="sidenav-1" class="sidenav sidenav-fixed">
    <!-- SIDENAV ITEMS -->
    </ul>
</header>

我对 1920 像素以下的宽度没有任何问题，因为页面看起来不错，在移动设备上隐藏并通过按钮访问 sidenav 也是如此。

非常感谢您的帮助。

【问题讨论】：

如果没有超级 hacky 的东西是不可能的，也不是元素的用途。 Sidenav 使用 position:fixed - 这会从文档流中删除元素 - 您希望 sidenav 尊重已被删除的页面元素（即页面容器）的位置。一种解决方案可能是使用另一个（重复的）元素来表示侧导航，但不使用将其从页面流中拉出的相同 UL 结构。或者只是适应宽屏上的定位developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

标签： html css materialize

【解决方案1】：

好的。这是破解。

动态调整sidenav左侧位置的值。

首先，将一个页面元素作为您的左侧边距，即您希望 sidenav 坚持的垂直线。在这里，我使用了我的 .col，并给了它一个 ID，以便我可以定位它并使用 jQuery 找到它的左侧位置：

<div id="content" class="col s12 m8 offset-m2">

还有 jQuery：

 var contentLeft = $('#content').offset().left

接下来，我们取内容的左侧位置，并将sidenav的左侧位置设置为等于减去sidenav的宽度。

var sidenavOffset = contentLeft-300;
$('.sidenav.sidenav-fixed').css('left',sidenavOffset);

我们把所有这些都放在一个函数中，然后在页面加载时运行该函数：

 var contentLeft;
 var sidenavOffset;

 function positionSidenav() {

   contentLeft = $('#content').offset().left
   sidenavOffset = contentLeft-300;
   $('.sidenav.sidenav-fixed').css('left',sidenavOffset);

 }

 positionSidenav();

然后，每次调整窗口大小时，我们都会再次运行该函数，以更新值：

 $( window ).resize(function() {
   positionSidenav();
 });

请注意，对于您的用例，您只想在屏幕宽度超过一定数量时触发此功能。因此，您可以将函数包装在 if 语句中。

Codepen here.

而且，因为我感觉很慷慨，here's 带有 if 语句的笔 :)

【讨论】：