Как добавлять и удалять отдельный пункт меню в зависимости от разрешения экрана динамически?

Question

[Илья]

Добрый вечер!
Есть полноценное меню и ссылка на страницу этого же сайта, отделенная от этого меню логотипом, находящиеся на одном уровне. При уменьшении размера окна браузера это меню падает под логотип, и нужно добиться того, чтобы та отдельная ссылка была частью меню, и отображалась корректно, а при увеличении размера окна - соответственно, отделялась, от меню, как в изначальном положении. Это как-то реализуется?

Answer 1

[Орхан Гасанлы]

Не совсем понял, что вы имеете ввиду, но возможно, что медиа запросы (CSS3) помогут Вам в этом.

Comments

[Илья]

А что вы конкретно не поняли, я же вроде доходчиво изъяснился =) Мне не нужен CSS, мне нужно это как-то реализовать на php)

[sim3x]

Илья, А откуда пхп знает про размер екрана пользователя и зачем пхп такое знать вообще?

[Орхан Гасанлы]

sim3x, Вы правы рнр не знает о размере экрана.

Разве что. что-то типа такого может помочь:

<?php
    if ( stristr($ua, "Mobile" )) {
        $DEVICE_TYPE="MOBILE";
    }

    if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
        echo 'bla-bla';
    }
?>

[Илья]

sim3x, Не понял, к чему это вы написали, или вы хотите сказать, что это нереализуемая задача?)

[Илья]

azerphoenix, Мне небязательно, чтоб это был телефон, допустим, есть ширина окна 1000px, вот от этого и плясать. Самое интересное это добавление пункта)

[Орхан Гасанлы]

Интересный вопрос) Почитайте вот эти темы... вдруг, найдете что-нибудь полезное.
Как должен выглядеть код PHP для запроса разрешение браузера клиента?
www.cyberforum.ru/php-beginners/thread490684.html

[Илья]

azerphoenix, понимаете, я думаю, что здесь лучше сначала понять, как добавить этот пункт в меню кодом, а потом уже разбираться с шириной окна

[sim3x]

Илья,

вы хотите сказать, что это нереализуемая задача?

я хочу сказать, что пхп таким заниматься не должно

[sim3x]

azerphoenix, Если уж заниматься таким непортребством, то лучше отправляться из жс на бек размер вьюпорта и плотность пикселей, а пхп их занесет в сессию

[Орхан Гасанлы]

sim3x, да, в таком случае уж лучше js. И при помощи js можно загрузить ссылку в нужном части меню

[sim3x]

azerphoenix, да
Но так не будет использован пхп
И так также не стоит делать

[Орхан Гасанлы]

sim3x, по сути получается костыль)

Answer 2

[Игорь Воротнёв]

В принципе, у WordPress есть полезная функция wp_is_mobile(), которая возвращает булевое true/false. Она разделяет десктопы и мобильные устройства (планшеты, смартфоны). И это происходит на стороне PHP, то есть – на сервере. Впрочем, в вашем случае лучше решать с помощью CSS и media queries.

Comments

[Илья]

Игорь, может она и полезная, но мне это нужно реализовать и на десктопе. То есть подгонять вручную и симулировать целостность меню? Или может лучше через JS его кидать к тому меню?

[Игорь Воротнёв]

Илья, так она как раз вам и позволяет это сделать:

if ( wp_is_mobile() ) { // true -> мобильное устройство

} else { // false -> десктоп

}

Но, как я написал в ответе, лучше делать через CSS. Выводите нужный пункт меню на фронтенд всегда. Через редактор меню назначьте нужному пункту произвольный CSS-класс, чтобы легко его таргетировать, и с помощью media query показывайте или прячьте когда надо. Делать это на серверной стороне - не совсем правильно.

[Илья]

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

[Игорь Воротнёв]

Илья, сделайте 2 меню, одно только с этим одним пунктом, второе - обычное ваше меню (но тоже с этим пунктом). И включайте-выключайте этот ваш пункт в одном из меню когда надо, с помощью CSS.