Wiki-меню (навигация) для групп ВКонтакте (часть 2)

Представляю Вашему вниманию продолжение серии статей, посвященных wiki-меню (навигации) ВКонтакте. Если Вы пропустили первую часть, рекомендую ознакомиться с ней по ссылке – wiki-меню (часть 1). В ней описано достаточно много ключевых моментов, которые мы не будем повторно раскрывать в этой статье.

Сегодня мы поговорим про то же вертикальное меню, но на этот раз усложним задачу. Макет меню будет состоять из 5-ти кнопок, 4 из которых будут расположены в 2 столбца, + 2 зоны для сторонней информации. (Пример макета меню см. ниже)

Раскройка графического полотна

Есть некоторые тонкости в раскройке более сложных полотен. Я опишу лишь один вариант, чтобы Вас не запутать. Самая главная особенность, что все полотно нужно раскроить на ровные столбцы. В нашем случае 2 столбца, потому что мы имеем два вертикальных ряда кнопок в центральной части меню. Все элементы, которым достаточно одного столбца, а именно зона «логотип», зона «красная кнопка» и зона «все права защищены», в связи с этим, также придется раскроить надвое. Пример раскройки (см. Скрин)

На этом все, переходим к сохранению: «Файл – Сохранить для веб» или, если у Вас более новая версия программы, «Файл - Экспортировать - Сохранить для веб». Должен получиться следующий набор:

Установка wiki-меню в группу ВК

Хронология действий та же, что и в первой части. Первым делом заливаем все изображения, связанные с Вашим меню. Нам потребуется только та часть кода, отвечающая за ссылку на фотографию (см. Скрин). Верстка по-прежнему будет табличная.

Wiki-код для меню из нашего примера на 5 кнопок, +2 декоративных элемента (зона «логотип»/зона «все права защищены») (см. Скрин)

Где:

• noborder — убирает рамку вокруг фотографии;
• nopadding — убирает отступы вокруг фотографии;
• fixed – фиксирование ширины таблицы, чтобы при просмотре с мобильных устройств таблица держала форму и не разъезжалась;
• nolink – делает элемент (фото) некликабельным;
• photo171447909_456241224 – ссылка на графический элемент (нужно вставить ссылки на изображения, которые Вы загрузили ранее, для формирования правильной картинки меню нужно вставлять по порядку);
• 300px - размерность элементов меню (Важно! Ставьте только одну цифру, так автоматически сохраняются пропорции элементов);
• |- - новая строка;
• | - новый столбец;
• {| и |} - начало и конец таблицы;
• https://vk.com/maxstudiofree - место для Вашей ссылки (ссылка может вести на обсуждения, другие wiki-страницы, альбомы, внешние ресурсы и пр.

Итоги

Получаем вот такой результат:

Теперь Вы можете создавать более сложные по структуре конструкции wiki-меню. Главное помните, что ширина столбцов должна быть одинаковой сверху донизу.

Спасибо

Спасибо всем, кто принял участие в сборе 200+ лайков к предыдущему посту. В этот раз статья оказалась чуть проще, так как многое было «разжевано» в первой части, но от этого она не стала менее интересной. Спасибо, что осилили ее до конца, и уже по традиции выкладываю psd-шаблон меню из данного примера, который полностью готов к работе и раскроен, осталось только заменить текст/цвет/фото и сохранить. +wiki-код из примера в текстовом формате, чтобы Вы не тратили время на его переписывание.

P.S. Продолжение серии статей— Wiki-меню для группы ВКонтакте (часть 3)