如何隐藏特定尺寸的汉堡菜单？答案

【问题标题】：How do I hide the burger menu at certain sizes?如何隐藏特定尺寸的汉堡菜单？
【发布时间】：2019-10-30 23:53:57
【问题描述】：

我尝试使用 mdl。网站必须采用响应式设计。所以我想在宽度大于 1024px 时将汉堡菜单展开到标题中。

我试图让它不可见或隐藏。但它要么禁用了菜单，要么随着屏幕变小，我在我的网站上得到了菜单的内容，而不是菜单本身

<style>
  @media only screen and (min-width:1024px) {
    .mdl-layout__drawer {
      visibility: hidden;
    }
  }
</style>
</head>

<body>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><i class="material-icons">
                portrait
                </i>  DerGeileGärtner</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    room
                    </i>   Sensor</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    settings
                    </i>   Einstellung</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    help
                    </i>   Hilfe</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    business
                    </i>   Impressum</a>
    </nav>
  </div>
</body>

如果我使用 mdl.layout__drawer 类，它根本不起作用。如果我给班级一个id，它也不起作用，在这些情况下它不会改变任何东西。如果给 mdl-layout__drawer 类另一个类，它就不起作用了，当它把菜单的内容放到网站上时就是这种情况。

Picture of the header 所以当它变得太小时，左边的两个会消失，这很好。右边的菜单要么不会消失，要么网站变得太大，或者当它变大时它会消失，但当它变小时它不会回来。相反，我从我网站上的菜单中获取内容

【问题讨论】：

标签： html css material-design

【解决方案1】：

我看到 Material Design Lite 已经有这个组件的示例。您只需要为您的菜单设置正确的结构。

您可以在此处查看示例。 MDL Navigation Layout

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header ">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title"><i class="material-icons">
                portrait
                </i>  DerGeileGärtner</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href=""><i class="material-icons">
                    room
                    </i>   Sensor</a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">
                    settings
                    </i>   Einstellung</a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">
                    help
                    </i>   Hilfe</a>
        <a class="mdl-navigation__link" href=""><i class="material-icons">
                    business
                    </i>   Impressum</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><i class="material-icons">
                portrait
                </i>  DerGeileGärtner</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    room
                    </i>   Sensor</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    settings
                    </i>   Einstellung</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    help
                    </i>   Hilfe</a>
      <a class="mdl-navigation__link" href=""><i class="material-icons">
                    business
                    </i>   Impressum</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
</div>

【讨论】：

我用的是固定的。它只有一个叫做大屏幕的类。如果屏幕太小，这会使左侧的链接消失，这很好。我现在想让右边的菜单在屏幕太大时消失。这行得通，但是当屏幕变小时，菜单一直不可见，但内容却被扔到了我的页面上
现在添加了一张图片
你能检查我上面的sn-p吗？放大和缩小视口大小时我认为没有问题。