Question

我尝试使用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 因此，当它变得太小时，左侧的两个消失了，这很好。右边的菜单不会消失，网站变得太大，或者当网站变大时它消失，但是当网站变小时，它就不会回来。相反，我从网站菜单上获取内容

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

如何隐藏某些尺寸的汉堡菜单？

1 个答案: