Я пытался работать с MDL. Сайт должен быть в адаптивном дизайне. Поэтому я хочу развернуть меню бургера в заголовок, когда ширина больше 1024 пикселей.
Я пытался сделать его невидимым или скрытым. Но это либо отключило меню, либо, когда экран стал меньше, я получил содержание меню на моем сайте вместо самого меню
<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. Это также не работает, если я даю классу идентификатор, в этих случаях это ничего не меняет. и это не сработает, если дать классу mdl-layout__drawer другой класс, это тот случай, когда вместо него удаляется содержимое меню на сайте.
Изображение заголовка
Так что два на левой диапперии, когда она становится слишком маленькой, это хорошо. меню справа либо не исчезает, либо сайт становится слишком большим, либо он перестает работать, когда становится большим, но не возвращается, когда становится меньше. Вместо этого я получаю контент из меню на моем сайте