Question

我正在使用MaterialiseCSS框架，我在中低屏幕尺寸（＆lt; = 991px）上有一个按钮切换可见。现在我想让sidenav在这些尺寸较小的尺寸上可以切换，同时保持尺寸更大。

参考：http://materializecss.com/side-nav.html

这是我的Side Nav：

<!-- Side Navigations -->
<ul class="side-nav fixed blue darken-1 side-nav-white-text" id="nav-slide-out" style="width: 250px;">
    <li>
        <div class="userView">
            <div class="background blue darken-3"></div>
            <a href="#"><img class="circle" src="img/user_image_default.jpg"></a>
            <a href="#"><span class="white-text name">Joe Bloggs</span></a>
            <a href="#"><span class="white-text email">joe@bloggs.com</span></a>
        </div>
    </li>
    <!-- links omitted -->
</ul>
<header>
    <nav>
        <div class="nav-wrapper white">
            <div class="row left">
                <div class="col s6 hide-on-med-and-up"><a href="#!" class="button-collapse" data-activates="nav-slide-out" id="nav-collapse"><i class="fa fa-fw fa-bars"></i></div>
                <div class="col s6"><a href="#" class="brand-logo">Brand</a></div>
            </div>
            <ul class="right"><!--hide-on-med-and-down">-->
                <li><a href="#"><i class="fa fa-fw fa-envelope-o"></i></a></li>
                <li><a class="dropdown-button" data-beloworigin="true" data-constrainwidth="false" href="#" data-activates="settingsDropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a></li>
                <li><a href="#">Logout <i class="fa fa-fw fa-sign-out"></i></a></li>
            </ul>
        </div>
    </nav>
</header>

这是我正在使用的jQuery：

var navOpen = false;
$('#nav-collapse').on('click', function(e) {
    if(!navOpen) {
        $('.button-collapse').sideNav('show');
        navOpen = true;
    } else if(navOpen) {
        $('.button-collapse').sideNav('hide');
        navOpen = false;
    }
    e.preventDefault();
});

我试过的切换不起作用。 sidenav和materializecss的参考页面在上面。

Answer 1

以下是您要求的代码。我使用了物化的内置函数来折叠侧边栏。

＆＃13;

// Initialize collapse button
  $(".button-collapse").sideNav();
  
  $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 300
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true // Choose whether you can drag to open on touch screens
    }
  );

＆＃13;

header, main, footer {
      padding-left: 300px;
    }

    @media only screen and (max-width : 992px) {
      header, main, footer {
        padding-left: 0;
      }
    }

＆＃13;

<!-- Materialcss file -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"/>


<ul id="slide-out" class="side-nav fixed">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
  <a href="#" data-activates="slide-out" class="button-collapse btn hide-on-large-only"><i class="material-icons">menu</i></a>




<!-- All the js files -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>

＆＃13;

如果您对代码有疑问，请告诉我。以下是此执行的jsfiddle的链接 https://jsfiddle.net/pqubc7y5/3/

如何在大型设备上修复时在小型设备上创建切换以显示侧面导航？ MaterializeCSS

1 个答案: