Как сделать навигацию в css. Навигационные панели с помощью CSS

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

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

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

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

Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.

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

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

Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».

Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.

Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует JavaScript, чтобы добиться этого эффекта, в уроке же расписано, как достигнуть желаемого, применяя только чистые стили и функции CSS.

Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.

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

Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль смещения влево и формируем внешний вид. Но адаптивный дизайн, который набирает популярность, выдвигает новые требования к меню.

В данном уроке мы создадим простое, но эффективное адаптивное меню, которое очень легко настроить для использования в любом проекте.

Добавляем список

Добавим простой неупорядоченный список с восемью ссылками. Демонстрация урока очень чувствительна к количеству пунктов меню, а именно, все настройки сделаны для восьми пунктов.

RUSELLER
О нас
Клиенты
Работы
Аудио
Скачать
Блог
Контакт

Добавляем подписи

Чтобы сделать меню более интересным и полезным, добавим строчку текста под основной подписью меню. Существует множество способ решения такой простой задачи. В нашем уроке мы просто вставляем разрыв строки и и добавляем элемент small для второй строчки. Таким образом мы можем стилизовать подпись без использования дополнительных элементов div , классов и идентификаторов.

RUSELLER
Главная
О нас
Наша команда
Клиенты
Наши друзья
Работы
Наш труд
Аудио
Услыште нас
Скачать
Полезное
Блог
Прочитайте о нас
Контакт
Напишите нам

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

Начинаем определять стили

Код CSS начнем с использования универсального селектора для сброса полей и отступов, а также назначим свойство box-sizing: border-box всем элементам страницы. Такой шаг поможет нам просто устанавливать размеры элементов в процентах, даже при использовании рамок.

* { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Прежде, чем приступить к определению стилей элементов, зададим набор свойств для родительского элемента. Для начала установим для него ширину 90%. Теперь наш контейнер будет растягиваться на все доступное пространство, но останется место для формирования свободной зоны в дизайне. Также установим контейнер по центру с помощью автоматического определения размеров полей.

Кроме того, установим стили для неупорядоченного списка, чтобы отказаться от использования меток.

Стили меню

Теперь приступим к определению стилей пунктов меню.

Nav li a { display: block; float: left; width: 12.5%; padding: 10px; background: #444; border-right: 1px solid #fff; color: #fff; font: 700 13px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; text-align: center; text-decoration: none; text-transform: uppercase; } /*МЕЛКИЙ ТЕКСТ*/ nav small { color: #aaa; font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif; text-transform: none; }

Сначала определяем форму для каждого пункта списка. Все ссылки делаем блочными элементами, смещаем их влево, задаем ширину и небольшой отступ. Получаем достаточно большой прямоугольник Ширина 12.5% получается как результат вычислений 100% / 8 (количество пунктов меню).

Затем определяем внешний вид. Устанавливаем фон и рамку.

Завершает все задание стилей для текста меню. Используется шрифт PT Serif, который можно найти на сайте Google Web Fonts .

Для подписей устанавливаем цвет, удаляем трансформацию в верхний регистр и используем шрифт Helvetica.

Изменения при наведении курсора мыши на пункт меню

При наведении курсора мыши на пункт меню, то становится более черным. Для создания дополнительного эффекта используется трансформация.

Nav li a { background: #444; border-right: 1px solid #fff; color: #fff; display: block; float: left; font: 700 13px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; padding: 10px; text-align: center; text-decoration: none; text-transform: uppercase; width: 12.5%; /*ТРАНСФОРМАЦИИ*/ -webkit-transition: background 0.5s ease; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -ms-transition: background 0.5s ease; transition: background 0.5s ease; } /*АКТИВНОЕ СОСТОЯНИЕ*/ nav li a:hover { background: #222; }

Исправляем рамку

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

/*РАМКА ПОСЛЕДНЕГО ПУНКТА*/ nav li:last-child a { border: none; }

На рисунке ниже представлено меню на специальном сером фоне, где видно разницу между вариантами.

Делаем меню адаптивным

Данный проект является хорошим примером между резиновым и адаптивным дизайнами. Наше меню пока имеет резиновый дизайн (ширина определена в процентах), но не адаптивный. Если начать уменьшать ширину экрана, то меню превратиться в ужасную конструкцию:

Для исправления ситуации воспользуемся медиа запросами. Самый лучший способ нахождения точки приложения медиа запроса - провести тестирование.

1220px

Первые проблемы появляются при ширине около значения 1200 px. Длинный текст некоторых пунктов начинает ломаться, так как ему не хватает ширины.

Для исправления ситуации нужно изменить только размер шрифта:

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px){ nav li a { font: 700 10px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } nav small { font: 100 10px/1 Helvetica, Verdana, Arial, sans-serif; } }

930px

Следующая точка, проявляющаяся при уменьшении размеров экрана - 930px. Здесь меню ломается сильнее.

Кроме исправления размера шрифта требуется перестроить меню в две строки.

@media only screen and (max-width: 930px), only screen and (max-device-width: 930px){ nav li a { width: 25%; border-bottom: 1px solid #fff; font: 700 11px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } nav li:last-child a, nav li:nth-child(4) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a { border-bottom: none; } }

580px и 320px

Двухстрочный формат работает отлично до значений ширины экрана меньше 600px, а затем также коверкается.

Здесь мы перестраиваем дизайн меню в две колонки с четырьмя строками. А для размеров экрана меньше 320px нужно также уменьшить размер шрифта.

@media only screen and (max-width: 580px), only screen and (max-device-width: 580px){ nav li a { width: 50%; font: 700 12px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; padding-top: 12px; padding-bottom: 12px; } nav li:nth-child(even) a { border-right: none; } nav li:nth-child(5) a, nav li:nth-child(6) a { border-bottom: 1px solid #fff; } } @media only screen and (max-width: 320px), only screen and (max-device-width: 320px){ nav li a { font: 700 11px/1.4 "PT Serif", Helvetica, Verdana, Arial, sans-serif; } }

Теперь наше меню будет адаптироваться под размер экрана.

Заключение

Построение адаптированного дизайна достаточно трудоемкий процесс. Много времни уходит на тщательное тестирование и подбор значений.

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Разработчики интернет-магазинов, блогов, обучающих сервисов и других ресурсов экспериментируют и создают все более новые и необычные карты. После прочтения статьи вы узнаете, на какие основные группы делятся все виды панелей навигации, сможете опробовать каждую из них, а также научиться писать код меню для сайта html. А теперь перейдем непосредственно к делу!

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги

Как оговаривалось в предыдущих публикациях, парный элемент

— один элемент списка. Для наглядности давайте напишем код простого меню:

Навигация

Навигация сайта

Главная
Новости недели
Технологические достижения
Чат

Однако с появлением платформы язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега < menu> . В использовании этот элемент ничем не отличается от маркированных списков.

Вместо единицы < ul> прописывается < menu> . Однако существенные различия появляются если судить со стороны работы . Так, второй пример ускоряет работу поисковых программ и роботов в . При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

Создадим-ка горизонтальную навигационную модель

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

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

Для трансформации мы используем свойство css под названием transform . Чтобы указать трансформацию, используется встроенная функция skewX , в которой угол наклона указывается в градусах.

К сожалению, каждый браузер работает с данным свойством по-своему, не смотря на прописанные стандарты. Поэтому для обозначения того или были созданы специальные префиксы:

-ms- (Internet Explorer)
-o- (Opera)
-webkit- (Chrome, Safari)
-moz- (Firefox)

А теперь полученные знания применим к написанию примера.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

Горизонтальная панель

Главная

О компании

Продукция

Контакты

Горизонтальная панель li { display: inline-block; margin-right: 6px; background: #FF8C00; transform: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg); -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); } a { display: block; padding: 18px 35px; color: #fff; transform: skewX(40deg); -webkit-transform: skewX(40deg); -o-transform: skewX(40deg); -ms-transform: skewX(40deg); -moz-transform: skewX(40deg); } li:hover { background: #1C1C1C; }

Главная
О компании
Продукция
Контакты

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

Для этого я воспользовался еще одним свойством css border-radius .

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

Вертикальная панель li{ display: block; margin: 13px; padding: 13px; background: #FF8C00; width:20%; text-align:center; font-size:20px; border-radius:10px; } a { color: #fff; } li:hover { background: #1C1C1C; }

Главная
О компании
Продукция
Контакты

Как вы уже заметили, главное изменение в этом коде – это отсутствие объявления display: inline-block , который собственно и отвечал за горизонтальное расположение пунктов навигации.

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

Выпадающий список body { padding-left: 30%; font-size: 18px; } .m-menu { margin: 0; padding: 9px; width:50%; text-align:center; border: 3px solid #000; background: #FF8C00; } .m-menu > li { position: relative; display: inline-block; } .m-menu a { display: block; margin-left: -2px; padding: 13px; color: #fff; border-left: 3px solid #fff; } .m-menu a:hover { background: #1C1C1C; } .m-menu .s-menu { left: 10px; position: absolute; display: none; width: 155px; margin: 0; padding: 0; list-style: none; background: #FF8C00; } .m-menu .s-menu a { border: 1px solid #000; } .m-menu >

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

Сегодня мы представляем вам 62 привлекательных навигационных меню , основанных на CSS, javascript или технологии Flash.

Навигационное меню на CSS

Игры по типу казино или змейки и лесенки, украшенные красивым красочным меню.

Здесь мы видим отличное мягкое цветовое решение и интересный эффект при раскрытии подменю.

Стивен Уиттенс (Steven Wittens) предлагает нам другую перспективу этого меню.

На сайте UX Booth можно увидеть стильное, но очень простенькое меню.

На сайте MacRabbit, что очевидно, используется меню в стиле MAC OS или Apple.

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

Утонченность и простота данного портфолио точно приглянётся вам.

Большие меню в виде изображений точно привлекут ваше внимание. Как вы видите, не очень традиционный способ разработки меню.

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

Американский рекорд-лейбл Small Stone recordings использовали меню в виде радио, или же в виде Space Echo Roland SE-201.

Нечто вроде карты, с помощью которой вы сможете «разведать» весь веб-сайт.

Круглое меню в стиле Apple, в котором представлены приложения для iPhone.

В Clearleft в качестве меню использовали нечто вроде календарика с запланированными заданиями.

Выделенный пункт меню как будто находится в нажатом состоянии.

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

В этом меню использован простой и приятный отличный эффект при наведении.

Размер букв настолько мил и необычен, и именно это привлекает ваше внимание.

Отличное решение по использованию блочной навигации, в которое реализован отличный эффект при наведении.

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

Отличным концептом навигационного меню воспользовались дизайнеры веб-сайта Ronny Pries. Пользователи ориентируются по плану на полу.

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

Посмотрите, как креативно Мэтт Демпси (Matt Dempsey) использует мазки кисти.

Отличный вариант реализации навигационного меню.

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

Навигационное меню, реализованное в стиле музыки панк-рок. Посмотрите, как Джефф Сармиенто (Jeff Sarmiento) реализовал данную идею.

Нечто вроде иерархии. Еще один креативный способ реализации навигационного меню.

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

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

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

Интересное и привлекательное меню в стиле карт «Таро». Если вы кликните по карте, она тот час отправится в огонь.

Жидкое навигационное меню, которое создаст у вас ощущение движения волн на озере.

На сайте Nick Jones используется простое, но динамическое навигационное меню для перехода по портфолио.

На сайте Marc Ecko нам представлена навигация в виде галереи изображений. Она позволяет посетителям пройтись по страницам искусства и философии.

HBO представляет собой нечто вроде архива документов о фильмах. Посредством навигационного меню производится интерактивный выбор фильмов.

Интересное навигационное меню с простым эффектом при наведении. Когда вы наводите курсор на пиктограмму, отображается содержимое меню.

Дизайн-агентство по разработке навигационных меню, расположенное в Нью-Йорке и Форт-Лодердейле.

Стильный дизайн навигации в стиле нео-древности с фоном в виде фресков.

На сайте Nick Ad используется гибкое, но простое в использовании навигационное меню. Кликните в любую область на странице и увидите интересный эффект.

Креативный человек использует собственные работы для привлечения посетителей в портфолио.

На сайте Section Seven реализовано интересное меню в стиле брошюры с подменю.

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

На сайте Beside навигационное меню реализовано в стиле радуги.

Концепт портфолио из картона. Очень интересный эффект при наведении.

Маленькие кубики, сложенные вместе, выполняют роль навигационного меню.

Насыщенная цветом карта с «призвуком» текстуры национальных гавайских тапочек, которыми гордится весь народ.

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

Отличный творческий способ реализации навигационного меню. Каждый элемент по своему прекрасен, все они придают живости всему веб-сайту. Очень редко используют такие способы, но он действительно волшебный.

Простое и приятное для глаз меню навигации в разных цветах.

Выглядит так, как будто меню реализовано при помощи Flask, но это не так. Опрятное, прикольное и стильное навигационное меню с эффектами при наведении курсора мыши.

Многочисленные просьбы моих настойчивых читателей и просто любознательных пользователей возымели свое действие. Я наконец то создала урок, в котором мы будем учиться делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными сайтами интернета, когда посещенная ссылка маркируется особым способом (нажатая кнопка, подчеркивание итд) — мы будем создавать такую же конструкцию Вконтакте, с помощью созданных страниц и графического оформления. Для начала мы сделаем графические заготовки в фотошопе — создадим шапку меню и кнопочки двух видов. Потом создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый прием, который, собственно, и создаст нам иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто уверенно себя чувствует в функционале Вконтакта. Все манипуляции я буду производить на примере своей группы Вконтакте , где этот эффект реализован вживую. Итак, за дело!

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

Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.

Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Теперь нам надо создать активные ссылки, так, как-будто по ним нажали. Я использовала обычное подчеркивание, но можно использовать другой цвет текста или фона для маркировки посещенной ссылки.

Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.

Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.

Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1 , где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида:
http://vk.com/pages?oid=-78320145&p=Меню (с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.

Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):

http://vk.com/pages?oid=-78320145&p=Цены

http://vk.com/pages?oid=-78320145&p=Как_заказать

http://vk.com/pages?oid=-78320145&p=Техзадание

http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню

Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.

Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.

Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню.

Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата page-78320145_49821289 . То есть полный урл картинки https://vk.com/page-78320145_49821289 , до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.

Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы. Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.

Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.

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

Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.

Возможно, будет полезно почитать: