Как скрыть меню иконок на больших экранах?

Я новичок в этом и дайте мне знать, как скрыть значок меню, и он добавляется автоматически без запроса, я хочу отображать только на маленьких экранах. Извините за плохой английский.

Благодарю вас.


material-design-lite
person Juan Henriquez    schedule 12.07.2015    source источник
comment
не нужно беспокоиться об английском языке. Вы можете определить большой экран? Во всяком случае, вы можете определенно определить размер экрана. Например, используя jquery,$(window).height(); $(документ).высота(); $(окно).ширина(); $(документ).ширина();   -  person dshun    schedule 12.07.2015
comment
извините, небольшой код, который я добавил в комментарии, выглядит уродливо. но в любом случае обратитесь к этому stackoverflow.com/questions/3437786/, чтобы увидеть, как вы можете получить размер экрана, а затем соответственно показать/скрыть свое меню   -  person dshun    schedule 12.07.2015
comment
@dshun Если вопрос не помечен тегом jQuery или не задается непосредственно jQuery, лучше не предоставлять решение jQuery. Решение доступно непосредственно из MDL без каких-либо дополнительных действий.   -  person Garbee    schedule 13.07.2015

Ответы (6)


arrow_upward
5
arrow_downward

Мне пришлось прибегнуть к Media Query, чтобы решить мою проблему.

@media only screen and (min-width:851px){ .mdl-layout__drawer-button { display: none; } }

Это лучшее решение, которое я нашел, спасибо @dshun и @garbee за помощь.

person Juan Henriquez    schedule 14.07.2015
comment
он скрывает кнопку, но оставляет неиспользуемое пространство - person AndroLife; 17.02.2016

arrow_upward
3
arrow_downward

Another way of achieving this, is to add the various screen size classes, such as 

mdl-layout--small-screen-only
. Here is an example:

<div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Drawer Title</span>

    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link 1</a>
        <a class="mdl-navigation__link" href="">Link 2</a>
        <a class="mdl-navigation__link" href="">Link 3</a>
    </nav>
</div>

Приношу свои извинения, если этот фрагмент вам не подходит. Я только что заметил аналогичный вопрос здесь, в StackOverflow, решение может быть более правильным: Как я могу скрыть ящик на больших экранах и показать только на маленьких?

person Derjyn    schedule 26.07.2015
comment
Не могли бы вы ответить на сообщение с вопросом по этой ссылке - mdl" title="различный ящик макета mdl для большого экрана и маленького экрана в mdl"> stackoverflow.com/questions/45754638/ - person San Jaisy; 21.08.2017

arrow_upward
3
arrow_downward 

mdl-layout--no-desktop-drawer-button

Не отображает кнопку ящика в режиме рабочего стола, продолжает mdl-layout element

Вот пример того же:

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">

person serdigo    schedule 02.09.2017

arrow_upward
1
arrow_downward

Вы можете использовать mdl-layout--fixed-drawer для того же элемента, который вы используете mdl-js-layout, чтобы получить фиксированный ящик на рабочем столе, который должен удалить кнопку для его просмотра и оставить его открытым все время для доступа.

person Garbee    schedule 13.07.2015

arrow_upward
0
arrow_downward

Эффективное решение, которое я нашел и которое, наконец, работает:

<style>
       @media screen and (min-width: 992px) {
        .mdl-layout__drawer-button {
            /* Hide the Hamburger button but will leave an unused space */
            display: none;
        }
        .mdl-layout__header-row {
            /* so important to make sure the Hamburger button didn't leave an unused space */
            padding-left: 24px !important; 
        }
    }
</style>
person AndroLife    schedule 17.02.2016

arrow_upward
0
arrow_downward

Чтобы скрыть div на большом экране, добавьте этот класс

hide-on-large-only
person VISHNU Radhakrishnan    schedule 13.09.2016