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

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

Сегодня, как я и обещал, мы рассмотрим иной формат меню для группы ВКонтакте. Расскажу я вам о так называемом горизонтальном меню с эффектом активных кнопок. Оно подойдет для групп, которые намерены размещать информацию напрямую на внутренних страницах группы.

В этот раз я поступлю немного иначе и в самом начале покажу, как будет выглядеть конечный результат нашего с Вами меню. Обратите внимание, что при нажатии меняется не только контент, который находится ниже, но и окраска кнопки, которая говорит нам о том, что мы сейчас находимся в данном разделе (См. графическую презентацию ниже).

Работа с макетом

Первое, что нам потребуется, это макет самого меню. В данном примере это упрощённая навигация на 3 кнопки, но ее вполне достаточно для демонстрации урока. Вы же, в свою очередь, можете сделать до 6 кнопок, размещать больше в один ряд не советую.

Привычными нам инструментами раскраиваем меню на 3 блока, важно, чтобы все блоки в ряду были симметричны по ширине и высоте.

Важно: для эффекта активных кнопок нам нужно заранее подготовить соответствующий макет. Он будет идентичный основному, но в нем мы должны выделить все кнопки (желательно разместить все макеты в одном исходнике, тогда с ними будет проще работать).

Переходим к сохранению. В данном случае нам нужно сохранить меню в двух форматах – с выделенными кнопками и без.

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

Итак, настало время самого главного отличия горизонтального меню от вертикального. Необходимо создать то количество внутренних страниц, которое нужно для Вашего меню. В моем случае это 3 страницы. Соответственно, чем больше кнопок, тем больше страниц нужно будет создавать.

В отличие от вертикального меню, мы должны заполнять сразу несколько страниц одновременно. Для начала сформируйте исходный код верстки на одной из страниц. Все изображения должны быть из неактивных кнопок, а на месте ссылок – ссылки на внутренние страницы, которые Вы предварительно создали (См. скрин).

Теперь получившуюся конструкцию скопируйте на все внутренние страницы, которые предназначались для Вашего меню.

На данном этапе меню уже рабочее, но не хватает последнего штриха –активных кнопок. Вспоминаем, что мы сохраняли не только простые кнопки, но и кнопки с эффектом (в моем случае это эффект легкой затемнённости). Теперь необходимо заменить простые кнопки на кнопки с эффектом. Для этого мы поочередно открываем каждый пункт, заливаем фото с активной кнопкой и вставляем ссылку на изображение вместо ссылки с простой кнопкой.

Контент, который необходимо разместить, помещайте под меню в соответствующем разделе.

Итоги

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

Теперь вы знаете, как создавать горизонтальное wiki-меню с эффектом активных кнопок.

Спасибо

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

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