Materialise CSS - Sidenav рядом с основным контентом на больших экранах

Question

Я использую Materialise CSS, и я хотел бы, чтобы мой sidenav располагался рядом с содержимым главной страницы на экранах шириной более 1920 пикселей. Я использовал пример фиксированного sidenav по умолчанию на веб-странице Materialise Css.

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>

I не испытывайте проблем с шириной ниже 1920px, так как на этом страница выглядит хорошо, а также на мобильных устройствах, где sidenav скрыт и доступен через кнопку.

Большое спасибо за помощь.

Answer 1

Хорошо. Вот хак.

Динамически корректируйте значение левой позиции sidenav.

Сначала возьмите один элемент страницы в качестве левого поля, вертикальной линии, к которой вы хочу sidenav придерживаться. Здесь я использовал свой .col и дал ему идентификатор, чтобы я мог нацелиться на него и найти его левую позицию, используя 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 здесь .

И, поскольку я чувствую себя щедрым, здесь ручка с оператором if:)