将CSS材质化-大屏幕上主要内容旁边的Sidenav

Question

我正在使用Materialize CSS，我希望在宽度超过1920像素的屏幕上，将sidenav置于主页内容旁边。我在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并可以通过按钮访问的移动设备上，页面看起来也不错。

非常感谢您的帮助。

Answer 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。

并且，因为我感觉很慷慨，所以用[if语句：here's笔：）