Создаем адаптированное меню на wiki.
Привет всем! В прошлой статье я начинала про вики-разметку для новичков, однако, после выхода статьи, неожиданно вышли обновления ВК и с нового 2018 года всем сообществам было предоставлено использование лонгридов.
Ну и больше я не видела вики-страничек в группах. Однако, есть небольшая моя личная радость. Личная и радость, потому что я люблю вики-код, мне неудобно читать лонги и я обычно их не открываю. Ну, может если заголовок затронет мою душу.
Это лирика, но всё же, пояснить мою любовь к вики нужно было))
А поэтому, я всё же хочу уточнить, что меню, каталоги или оформленные сообщества «по-старинке» всё же требуют использования вики-кода. И сегодня я хочу вам рассказать, как сделать адаптивное под мобильную версию меню.
Итак, основные коды я писала в предыдущей статье, а теперь практика.
Нам нужно создать меню, которое одинаково великолепно будет выглядеть как в браузерной версии, так и мобильной.
Из чего состоит меню?
- Идея
- Дизайн
- Воплощение
Дизайн предоставьте дизайнеру
Допустим, у нас есть самый просто дизайн — панель вверху и внизу, в центре нужные кнопки:
Максимальная ширина картинки меню равна предельной ширине всех вики-страниц – 607px.
Тут всё просто — в редакторе, например, Фотошоп, нарезается картинка на равные разделы, каждый сохранен в виде отдельного изображения. В редакторе вики-страниц добавляем картинки.
На картинки позже можно будет добавить ссылку, чтобы открывалась нужная информация (сайт, обсуждения, фотоальбомы).
Код вики будет выглядеть так:
[[photo273133598_456239204|607px;noborder;nopadding| ]]
[[photo273133598_456239205|202px;noborder;nopadding| ]][[photo273133598_456239206|203px;noborder;nopadding| ]][[photo273133598_456239207|202px;noborder;nopadding| ]]
[[photo273133598_456239208|202px;noborder;nopadding| ]][[photo273133598_456239209|203px;noborder;nopadding| ]][[photo273133598_456239210|202px;noborder;nopadding| ]]
[[photo273133598_456239211|607px;noborder;nopadding| ]]
Смотрим в браузере:
Смотрим в мобильной версии :

Печальная печаль.
Как это исправить? Всё достаточно просто: вики-код меню прописывается в таблице.
Выглядит теперь он так:
{|fixed;nopadding;noborder;
|-
|[[photo273133598_456239204|607px;noborder;nopadding| ]]
|-
|[[photo273133598_456239205|202px;noborder;nopadding| ]][[photo273133598_456239206|203px;noborder;nopadding| ]][[photo273133598_456239207|202px;noborder;nopadding| ]]
|-
|[[photo273133598_456239208|202px;noborder;nopadding| ]][[photo273133598_456239209|203px;noborder;nopadding| ]][[photo273133598_456239210|202px;noborder;nopadding| ]]
|-
|[[photo273133598_456239211|607px;noborder;nopadding| ]]
|}

Правда, еще и зависит от марки телефона. Мой с узким экраном упорно не хотел показывать не только расположение кнопок, а еще и саму вики-страничку. Поборола переходом через браузер, чтобы увидеть хоть что-то.
Такой вариант не на всех телефонах будет всё равно отображать корректно расположение блоков, дизайнер должен очень постараться и правильно создать элементы.
Поэтому, второй вариант возможен под каждое устройство, но с некоторыми ограничениями.
Например:
- Количество блоков меню должно быть четным. Тогда где-то отобразится по 2 кнопки, где-то по 3 в двух строках, но зато общее впечатление не испорится.
- Лучше всего использовать только белый фон под подвижными элементами, иначе будет совсем неаккуратно выглядить расположение блоков.
Все подвижные элементы прописываются в одну строку таблицы, уменьшается размер изображений так, чтобы хотя бы 2 элемента становились на экране мобильного:
{| fixed;nopadding;noborder
|-
|[[photo273133598_456239204|600px;noborder;nopadding| ]]
|-
|[[photo273133598_456239205|150px;noborder;nopadding| ]][[photo273133598_456239206|150px;noborder;nopadding| ]][[photo273133598_456239207|150px;noborder;nopadding| ]][[photo273133598_456239208|150px;noborder;nopadding| ]][[photo273133598_456239209|150px;noborder;nopadding| ]][[photo273133598_456239210|150px;noborder;nopadding| ]]
|-
|[[photo273133598_456239211|600px;noborder;nopadding| ]]
|}
Итог:
В целом, вики-страницы позволяют, хоть и в ограниченной реализации, но всё же создавать сложные меню, делить сообщества на удобные клиентам рубрики и приносить немалую пользу.
Дерзайте!
Так же рекомендуем к прочтению: