Как загружать блок div при определенном условии?

Question

[Сергей Ерин]

Доброго времени суток! Нужно чтобы блок с адаптивным меню загружался в шапке только при width < 1200, подскажите как это лучше реализовать?

<div class="responsive-menu-items">
    <ul>
        <?php foreach ($categories as $category) { ?>
        <?php if (preg_match("#" . $category['href'] . "#", $base . $_SERVER['REQUEST_URI'])) { ?>
            <li><a href="<?php echo $category['href']; ?>" title="<?php echo $category['name']; ?>" class="active"><img src="<?php echo $category['image']; ?>" style="margin-right: 15px;" /><?php echo $category['name']; ?></a></li>
        <?php } elseif($category['children']) { ?>
            <li><a href="javascript:void(0);" title="<?php echo $category['name']; ?>"><img src="<?php echo $category['image']; ?>" style="margin-right: 15px;" /><?php echo $category['name']; ?></a>
                <ul class="subcategories">
                    <?php foreach ($category['children'] as $children) { ?>
                        <li><a href="<?php echo $children['href']; ?>" title="<?php echo $children['name']; ?>"><?php echo $children['name']; ?></a></li>
                    <?php } ?>
                </ul>
            </li>
        <?php } else { ?>
            <li><a href="<?php echo $category['href']; ?>" title="<?php echo $category['name']; ?>"><img src="<?php echo $category['image']; ?>" style="margin-right: 15px;" /><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
    </ul>
    <div class="responsive-menu-separate">Меню сайта</div>
    <ul>
        <li><a href="<?php echo $base; ?>about/" title="О компании" <?= $active_menu == 'about/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_kompania; ?>" style="margin-right: 15px;" />О компании</a></li>
        <li><a href="<?php echo $base; ?>reviews/" title="Отзывы клиентов" <?= $active_menu == 'reviews/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_otziv; ?>" style="margin-right: 15px;" />Отзывы клиентов</a></li>
        <li><a href="<?php echo $base; ?>projects/" title="Наши работы" <?= $active_menu == 'projects/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_raboti; ?>" style="margin-right: 15px;" />Наши работы</a></li>
        <li><a href="<?php echo $base; ?>shipping/" title="Доставка и сборка" <?= $active_menu == 'shipping/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_dostavka; ?>" style="margin-right: 15px;" />Доставка и сборка</a></li>
        <li><a href="<?php echo $base; ?>guarantee/" title="Гарантии" <?= $active_menu == 'guarantee/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_garantii; ?>" style="margin-right: 15px;" />Гарантии</a></li>
        <li><a href="<?php echo $base; ?>requisites/" title="Реквизиты" <?= $active_menu == 'requisites/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_rekvizit; ?>" style="margin-right: 15px;" />Реквизиты</a></li>
        <li><a href="<?php echo $base; ?>contacts/" title="Контакты" <?= $active_menu == 'contacts/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_contact; ?>" style="margin-right: 15px;" />Контакты</a></li>
        <li><a href="<?php echo $base; ?>privacy/" title="Политика конфиденциальности" <?= $active_menu == 'privacy/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_konfidecial; ?>" style="margin-right: 15px;" />Политика конфиденциальности</a></li>
        <li><a href="<?php echo $base; ?>agreement/" title="Соглашение о данных" <?= $active_menu == 'agreement/' ? 'class="active"' : ''; ?>><img src="<?php echo $menu_soglasie; ?>" style="margin-right: 15px;" />Соглашение о данных</a></li>
    </ul>
</div>

Comments

[Антон]

чем вам media не угодили?

[twobomb]

Это делается только на клиентской части. Так как разрешение может меняться динамично, например при перевороте телефона.

Answer 1

[Владимир Мальцев]

jQuery:

function myresize(){
    
    $('.myblock').css('display',($(window).width()<1200)?'block':'none');
    
}
$(document).ready(function(){
            $(window).resize(function(){
                myresize();
            })
            myresize();
        });

или CSS

.myblock{
    display: none;
}
@media (max-width: 1200px) {
  .myblock{
    display:block;
  }
}

Answer 2

[srjk94]

На php такое условие сделать не получится.
На jquery можно написать что то вроде такого

$(document).ready(function(){
if(window.innerWidth > 1200){
  $('.responsive-menu-items').remove();
}
});

Answer 3

[historydev]

let div = document.querySelector(".responsive-menu-items")

div.style.display = "none"

if(window.innerWidth < 1200) div.style.display = "block"

Answer 4

[strelok011]

Два момента :
1. Постановка вопроса - правильная? Вам данные в зависимости от ширины устройства надо подтягивать с сервера?
2. Если вопрос только в отображении - сейчас все браузеры поддерживают media-query, можно регулировать внешний вид страницы опираясь только на них. Выше дали ответ как именно. И использовать js, не говоря уже о jquery - это моветон и признак незнания css.