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

cpalil

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

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

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

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

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

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

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

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

  1. Идея
  2. Дизайн
  3. Воплощение

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

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

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

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

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

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

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

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

[[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| ]]

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

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

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

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

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

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

{|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| ]]

|}

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

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

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

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

Например:

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

Все подвижные элементы прописываются в одну строку таблицы, уменьшается размер изображений так, чтобы хотя бы 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| ]]

|}

Итог:

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

Дерзайте!

Так же рекомендуем к прочтению:

 

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: