2013-09-25 2 views
2

Мы недавно изменили наш интерфейс и начали использовать отзывчивую тему Metronic.Как сохранить отзывчивое меню открыть/закрыть значение?

У меня есть меню слева, как:

enter image description here

Теперь, так как это реагировать, если нажать в левом верхнем углу меню она изменяет совершенно так:

enter image description here

Проблема даже если вы изменили его размер (например: маленький), когда вы нажимаете ссылку (или когда страница обновляется), независимо от размера автоматически отображает большое меню.

if (resize) { use -> page-header-fixed page-sidebar-closed } 
else { use ->page-header-fixed } 

Я знаю, что это должно быть что-то вроде этого, но как реализовать это в php?

EDIT: У меня есть класс тела внутри index.php нравится:

</head> 
    <body class="page-header-fixed"> 
    <?include "left.php"?> 

left.php страница, которая имеет меню слева. класс кузова - класс css, который мне нужно проверить

+2

Никто не может решить вашу проблему с количеством кода, который вы вставили. Да, изображения очень описательные, но поскольку вы отметили JS, php, HTML, CSS, где все это код? – MarsOne

+0

Я удалил код выше – FreshPro

+0

, если ваш скрипт php всегда добавляет тот же код в ваш вывод html, вам, вероятно, нужно будет углубиться в ваши файлы js/css или отправить еще один код – Syd

ответ

2

Этот параметр должен быть сохранен в вашей базе данных? Если нет, почему бы не использовать localStorage и управлять им - и только - JavaScript?

Я не знаю код меню, но если вы можете смотреть его открывать и закрывать мероприятие, вы можете просто использовать:

window.localStorage.setItem("menu", 1); // 1: open - 2: closed 

Затем на странице загрузки читать:

window.localStorage.getItem("menu"); 

Не нужно устанавливать ajax-запросы на сервер, а также файлы cookie и такой вид дерьма.

+0

Блестящая идея! ура – FreshPro

3

В любом случае вам нужна переменная для сохранения состояния вашего меню, то есть большого или малого.

Если вы хотите сделать это с помощью PHP, вы можете использовать переменные сеанса и использовать ajax для обновления этого значения при изменении размера меню.

ИЛИ вы можете установить cookie с Javascript для этой же цели. Я бы выбрал этот вариант.

В любом случае вам нужно будет проверить значение cookie/session var и изменить класс вашего меню в зависимости от него.

--- EDIT ---

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

+0

Согласитесь с этим, сеанс или файлы cookie более быстрый вариант здесь. Я не вижу необходимости обновлять ваш PHP, чтобы справиться с этим. –

3

Возможно, вы должны добавить еще одно условие js для проверки минимальной ширины offsetWidth перед выбором классов css.

В противном случае, интересно ли вы добавили отзывчивый CSS @media min-width на оба класса, page-header-fixed page-sidebar-closed.

Если ваш JS не переоценивает эти классы, CSS должен выполнить задание, чтобы ваше меню выглядело как «маленький размер».

Смежные вопросы