Создаем адаптивное навигационное меню. Большой обзор красивых многоуровневых меню с codepen Сделать меню навигации
Canvi навигационная панель (off-canvas) с несколькими параметрами для настройки. Можно использовать сразу несколько панелей на одной странице, устанавливать адаптивную ширину и использовать свои стили для панели.
19.02.2018 5 076
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
21.12.2017 10 109
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
11.09.2016 3 441
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню - "три точки". Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
19.04.2016 6 016
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
24.12.2015 4 385
Mega dropdown меню - jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
25.06.2014 3 702
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
23.01.2014 2 532
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.
03.01.2014 2 814
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
03.07.2013 9 399
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css
27.06.2013 2 784
Плагин адаптивной навигации без зависимостей от каких-либо библиотек и с быстрой поддержкой touch устройств.
Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль смещения влево и формируем внешний вид. Но адаптивный дизайн, который набирает популярность, выдвигает новые требования к меню.
В данном уроке мы создадим простое, но эффективное адаптивное меню, которое очень легко настроить для использования в любом проекте.
Добавляем список
Добавим простой неупорядоченный список с восемью ссылками. Демонстрация урока очень чувствительна к количеству пунктов меню, а именно, все настройки сделаны для восьми пунктов.
- 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; } }
Теперь наше меню будет адаптироваться под размер экрана.
Построение адаптированного дизайна достаточно трудоемкий процесс. Много времни уходит на тщательное тестирование и подбор значений.
Позволяет изменять набор CSS классов у пункта меню.
Использование add_filter("nav_menu_css_class", "filter_function_name_8591", 10, 4); function filter_function_name_8591($classes, $item, $args, $depth){ // filter... return $classes; } $classes(массив)Классы CSS, которые применяются к элементу
Array( => menu-item => menu-item-type-post_type => menu-item-object-page => menu-item-265) $item(WP_Post)
Объект текущего пункта меню. Пример:
WP_Post Object ( => 265 => 1 => 2018-04-07 09:45:46 => 2018-04-07 06:45:46 => => Обратная связь => => publish => closed => closed => => 265 => => => 2018-04-19 00:20:29 => 2018-04-18 21:20:29 => => 0 => http://wp-test.ru/?p=265 => 1 => nav_menu_item => => 0 => raw => 265 => 0 => 214 => page => post_type => Страница => http://wp-test.ru/post-99 => Обратная связь => => => => Array ( => => menu-item => menu-item-type-post_type => menu-item-object-page) => => => =>) $args(stdClass)
Объект с аргументами из функции wp_nav_menu() . Пример:
StdClass Object ( => WP_Term Object ( => 21 => Моё первое меню => moe-pervoe-menu => 0 => 21 => nav_menu => => 0 => 3 => raw) => div => => => primary-menu => => 1 => wp_page_menu => => => => => => preserve => 0 => => primary) $depth(число) Уровень пункта меню. Добавлен в версии 4.1.0. Используется для отступов. Верхние пункты меню имеют $depth = 0, вложенные в них $depth = 1 и так далее.
Примеры #1 Добавим CSS класс только определенному пункту менюПусть нам нужно добавить к пункту меню "Обратная связь" (id=265) дополнительный CSS класс, причем только если этот пункт выводится в меню, прикреплённом к области меню primary , тогда:
Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if($item->ID === 265 && $args->theme_location === "primary"){ $classes = "special-css-class"; } return $classes; }
Получим в вёрстке:
#1 Удалим CSS классы у всех пунктов меню
Удалим все CSS классы у всех пунктов меню сайта.
Add_filter("nav_menu_css_class", "__return_empty_array");
Получим вёрстку:
Также, как и в первом примере, можно использовать условия. Удалим у всех пунктов меню CSS классы, а пунктам меню из области меню primary добавим свой css класс:
Add_filter("nav_menu_css_class", "change_menu_item_css_classes", 10, 4); function change_menu_item_css_classes($classes, $item, $args, $depth) { if ($args->theme_location === "primary") { $classes = [ "my-css" ]; } else { $classes = ; } return $classes; }
Получим вёрстку:
Заметки
- C версии 4.1.0 был добавлен параметр $depth .
| С версии 3.0.0 | Введена. |
| С версии 4.1.0 | The $depth parameter was added. |
Что является одним из основных элементов каждого интернет-сайта? Конечно же, навигационное меню . Каждое меню представляет собой полезную часть веб-сайта, так как именно посредством него пользователь может переходить в другие разделы сайта. Основное взаимодействие посетителя с веб-сайтом осуществляется именно посредством навигационного меню. В наше время на страницах веб-сайтов можно повстречать всё более и более привлекательные и удобные навигационные меню.
Сегодня мы представляем вам 62 привлекательных навигационных меню , основанных на CSS, javascript или технологии Flash.
Навигационное меню на CSS
Игры по типу казино или змейки и лесенки, украшенные красивым красочным меню.
Здесь мы видим отличное мягкое цветовое решение и интересный эффект при раскрытии подменю.
03.
Стивен Уиттенс (Steven Wittens) предлагает нам другую перспективу этого меню.
04.
На сайте UX Booth можно увидеть стильное, но очень простенькое меню.
05.
На сайте MacRabbit, что очевидно, используется меню в стиле MAC OS или Apple.
06.
На сайте Joyent используется простое, деловитое на вид меню, в котором предложены работы компании.
07.
Утонченность и простота данного портфолио точно приглянётся вам.
08.
Большие меню в виде изображений точно привлекут ваше внимание. Как вы видите, не очень традиционный способ разработки меню.
09.
Выпадающее меню, в котором используется 2 цвета, которые символизируют активный пункт меню и неактивный.
10.
Американский рекорд-лейбл Small Stone recordings использовали меню в виде радио, или же в виде Space Echo Roland SE-201.
11.
Нечто вроде карты, с помощью которой вы сможете «разведать» весь веб-сайт.
12.
Круглое меню в стиле Apple, в котором представлены приложения для iPhone.
13.
В Clearleft в качестве меню использовали нечто вроде календарика с запланированными заданиями.
14.
Выделенный пункт меню как будто находится в нажатом состоянии.
15.
Клик по пункту меню раскрывает дополнительное подменю. Меню выглядит вполне простым, хотя и окрашено в черный цвет.
16. .
В этом меню использован простой и приятный отличный эффект при наведении.
17.
Размер букв настолько мил и необычен, и именно это привлекает ваше внимание.
18.
Отличное решение по использованию блочной навигации, в которое реализован отличный эффект при наведении.
19.
Отличный зеленый цвет и вид меню в стиле листочков приглянуться вашему глазу. Также здесь реализован отличный эффект, который поможет вам определить, в каком подразделе вы находитесь в данный момент.
20.
Отличным концептом навигационного меню воспользовались дизайнеры веб-сайта Ronny Pries. Пользователи ориентируются по плану на полу.
21.
Еще одним креативным способом реализации навигационного меню является применение изображения фруктового дерева, посредством которого вы можете попасть в другие подразделы.
22.
Посмотрите, как креативно Мэтт Демпси (Matt Dempsey) использует мазки кисти.
23.
Отличный вариант реализации навигационного меню.
24.
Вертикальные вкладки, которые выглядят как папки, работающие непосредственно на веб-сайте. Очень редко используется данный способ, но отлично работает и выглядит.
25.
Навигационное меню, реализованное в стиле музыки панк-рок. Посмотрите, как Джефф Сармиенто (Jeff Sarmiento) реализовал данную идею.
26.
Нечто вроде иерархии. Еще один креативный способ реализации навигационного меню.
27.
Пиктограммы повышают чувство взаимодействия с меню.
Навигационные меню, разработанные с помощью технологии Flash
В данном меню навигации реализован очень интересный эффект при наведении курсора мыши.
29.
Навигация, которая позволяет вам производить некоторые настройки с помощью специальных ползунков.
30.
Интересное и привлекательное меню в стиле карт «Таро». Если вы кликните по карте, она тот час отправится в огонь.
31.
Жидкое навигационное меню, которое создаст у вас ощущение движения волн на озере.
32.
На сайте Nick Jones используется простое, но динамическое навигационное меню для перехода по портфолио.
33.
На сайте Marc Ecko нам представлена навигация в виде галереи изображений. Она позволяет посетителям пройтись по страницам искусства и философии.
34.
HBO представляет собой нечто вроде архива документов о фильмах. Посредством навигационного меню производится интерактивный выбор фильмов.
35. ?
Интересное навигационное меню с простым эффектом при наведении. Когда вы наводите курсор на пиктограмму, отображается содержимое меню.
36.
Дизайн-агентство по разработке навигационных меню, расположенное в Нью-Йорке и Форт-Лодердейле.
37.
Стильный дизайн навигации в стиле нео-древности с фоном в виде фресков.
38.
На сайте Nick Ad используется гибкое, но простое в использовании навигационное меню. Кликните в любую область на странице и увидите интересный эффект.
39.
Креативный человек использует собственные работы для привлечения посетителей в портфолио.
40. .
На сайте Section Seven реализовано интересное меню в стиле брошюры с подменю.
41.
Навигационное меню, которое открывается и закрывается при выборе определенных пунктов.
42.
На сайте Beside навигационное меню реализовано в стиле радуги.
43.
Концепт портфолио из картона. Очень интересный эффект при наведении.
44.
Маленькие кубики, сложенные вместе, выполняют роль навигационного меню.
45.
Насыщенная цветом карта с «призвуком» текстуры национальных гавайских тапочек, которыми гордится весь народ.
46.
Стол с вещами, символизирующими меню: телефон для контакта с администрацией, журнал для перехода в портфолио, газета для просмотра новостей и другое.
Очень интересно, когда в качестве навигации используются реальные вещи.
47.
Отличный творческий способ реализации навигационного меню. Каждый элемент по своему прекрасен, все они придают живости всему веб-сайту. Очень редко используют такие способы, но он действительно волшебный.
Меню навигации, разработанные при помощи технологии javascript
Простое и приятное для глаз меню навигации в разных цветах.
49.
Выглядит так, как будто меню реализовано при помощи 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. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.
Финал.
В итоге у нас получился эффект навигации, когда нажимаешь на ссылку меню и она становится активной. Но поскольку графическое оформление на всех страницах практически одинаковое, за исключением активной ссылки, то создается иллюзия навигации, хотя на самом деле осуществляется переход на другую страницу.
Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.
