Содержание

Создаем адаптированное меню на wiki.

Привет всем! В прошлой статье я начинала про вики-разметку для новичков, однако, после выхода статьи, неожиданно вышли обновления ВК и с нового 2018 года всем сообществам было предоставлено использование лонгридов.

Ну и больше я не видела вики-страничек в группах. Однако, есть небольшая моя личная радость. Личная и радость, потому что я люблю вики-код, мне неудобно читать лонги и я обычно их не открываю. Ну, может если заголовок затронет мою душу.

Это лирика, но всё же, пояснить мою любовь к вики нужно было))

А поэтому, я всё же хочу уточнить, что меню, каталоги или оформленные сообщества «по-старинке» всё же требуют использования вики-кода. И сегодня я хочу вам рассказать, как сделать адаптивное под мобильную версию меню.

Итак, основные коды я писала в предыдущей статье, а теперь практика.

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

Из чего состоит меню?

Идея
Дизайн
Воплощение

Дизайн предоставьте дизайнеру

Допустим, у нас есть самый просто дизайн — панель вверху и внизу, в центре нужные кнопки:

Максимальная ширина картинки меню равна предельной ширине всех вики-страниц – 607px.

Тут всё просто — в редакторе, например, Фотошоп, нарезается картинка на равные разделы, каждый сохранен в виде отдельного изображения. В редакторе вики-страниц добавляем картинки.

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

Код вики будет выглядеть так:

[[photo273133598_456239204|607px;noborder;nopadding| ]]

[[photo273133598_456239211|607px;noborder;nopadding| ]]

Смотрим в браузере:

Смотрим в мобильной версии :

Печальная печаль.

Как это исправить? Всё достаточно просто: вики-код меню прописывается в таблице.

Выглядит теперь он так:

{|fixed;nopadding;noborder;

|[[photo273133598_456239204|607px;noborder;nopadding| ]]

|[[photo273133598_456239211|607px;noborder;nopadding| ]]

Правда, еще и зависит от марки телефона. Мой с узким экраном упорно не хотел показывать не только расположение кнопок, а еще и саму вики-страничку. Поборола переходом через браузер, чтобы увидеть хоть что-то.

Такой вариант не на всех телефонах будет всё равно отображать корректно расположение блоков, дизайнер должен очень постараться и правильно создать элементы.

Поэтому, второй вариант возможен под каждое устройство, но с некоторыми ограничениями.

Например:

Количество блоков меню должно быть четным. Тогда где-то отобразится по 2 кнопки, где-то по 3 в двух строках, но зато общее впечатление не испорится.
Лучше всего использовать только белый фон под подвижными элементами, иначе будет совсем неаккуратно выглядить расположение блоков.

Все подвижные элементы прописываются в одну строку таблицы, уменьшается размер изображений так, чтобы хотя бы 2 элемента становились на экране мобильного:

{| fixed;nopadding;noborder

|[[photo273133598_456239204|600px;noborder;nopadding| ]]

|[[photo273133598_456239211|600px;noborder;nopadding| ]]

Итог:

В целом, вики-страницы позволяют, хоть и в ограниченной реализации, но всё же создавать сложные меню, делить сообщества на удобные клиентам рубрики и приносить немалую пользу.

Дерзайте!