材料设计精简版 - 导航锁定到位

Material design Lite - Navigation lock in place

本文关键字：锁定 导航 精简版 材料      更新时间：2023-09-26
  <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">SITE NAME</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>

嗨，我正在尝试弄清楚如何让此菜单始终(除非移动设备(锁定在用户视图中，并调整网站网格的大小。 但是一次一步如何锁定它(因此用户无法关闭或打开(

请检查

下面的代码。 固定抽屉的口述应在抽屉上方的div 类中。它取自MDL页面，https://getmdl.io/components/index.html#layout-section/layout并在固定标题下查看，还有一个可用的代码笔。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content">
      <!-- Your content goes here -->
    </div>
  </main>
</div>
相关文章：