В общем задача примерно такая: есть шапка сайта, она же и меню, и в нёй модуль регистрации, а ещё и поиск.
Естественно при маленьком экране эта шапка выглядит уё... чудовищно.
Выход - сделать сворачиваемое меню. Но, поскольку это шапка, там есть ещё логотип сайта, и то, что я описал выше. Сделать сворачиваемым только меню - не выход, так как оставленные логотип, поиск, вход/регистрация (при входе это аватар пользователя) всё равно занимают много места.
Сделал таким образом, чтобы сворачиваемое меню содержало не только собственно меню, но и поиск и аватар пользователя. А поскольку очерёдность расположения этих модулей изначально на большом экране меня вполне устраивает, а вот в мобильном меню - совсем нет.
Для того, чтобы поменять очерёдность расположения в свёрнутом меню (выезжает при нажатии на кнопку), добавил в файл шаблона на нужные мне места те же модульные позиции что и в десктопном варианте. Естественно с добавлением собственных классов для этих позиций.
Когда ширина экрана достигает определённого размера, те позиции, которые до этого работали, скрываю через display:none, а включаю вместо них другие (те же модульные позиции в других местах, которые до этого были отключены) через display:block.
В общем-то работает нормально, но сомнения у меня вот в чём. получается что модуль загружается два раза (как бы дублируется) из-за того, что одна позиция в двух местах. Но, пока одна позиция видна, вторая скрыта и наоборот.
Правильно ли так делать? или необходимо использовать другие методы?
Простите, если я не совсем понятно описал ситуацию. Если что надо уточнить - говорите.
Спасибо!