Как сделать подвижное меню на сайте

Обновлено: 07.07.2024

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно - код состоит всего из нескольких строчек.

Вариант №1

Для начала нужно создать страницу.

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window . В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

Нам потребуется следующий CSS-код.

Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.

Далее в скрипте в зависимости от значения переменной top , блоку с навигацией устанавливается значение CSS-правил top или bottom .

Таким образом достигается поведение блока с меню, описанное выше.

Ну вот, собственно, и всё.

Я создал 2 простые странички для демонстрации работы обоих вариантов фиксированного меню. При желании вы сможете ознакомиться с ними:

Узнайте, как создать адаптивное верхнее навигационное меню с помощью CSS и JavaScript.

Адаптивный верхний навбар

Измените размер окна браузера, чтобы увидеть, как работает адаптивное меню навигации:

Создать адаптивное верхнее меню навигации

Шаг 1) Добавить HTML:

Пример

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

Шаг 2) Добавить CSS:

Пример

/* Скрыть ссылку, которая должна открывать и закрывать topnav на маленьких экранах */
.topnav .icon display: none;
>

Пример

/* Если ширина экрана меньше 600 пикселей, скрыть все ссылки, кроме первой ("Главная"). Показать ссылку, которая содержит, должна открывать и закрывать topnav (.icon) */
@media screen and (max-width: 600px) .topnav a:not(:first-child)
.topnav a.icon float: right;
display: block;
>
>

/* Класс "responsive" добавляется в верхнюю навигацию с помощью JavaScript, когда пользователь кликает значок. Этот класс заставляет topnav хорошо выглядеть на маленьких экранах (отображать ссылки вертикально, а не горизонтально) */
@media screen and (max-width: 600px) .topnav.responsive
.topnav.responsive a.icon position: absolute;
right: 0;
top: 0;
>
.topnav.responsive a float: none;
display: block;
text-align: left;
>
>

Шаг 3) Добавить JavaScript:

Пример

/* Переключайтесь между добавлением и удалением "responsive" класса в topnav, когда пользователь кликает иконку */
function myFunction() var x = document.getElementById("myTopnav");
if (x.className === "topnav") x.className += "responsive";
> else x.className = "topnav";
>
>

Совет: Перейдите к учебнику CSS Навигационные панели, чтобы узнать больше о навигационных панелях на нашем сайте W3Schools на русском.

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

Вертикальное меню

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

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

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

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

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

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

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

Горизонтальное меню

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

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

Выпадающее меню

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

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

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

Чаще всего меню создается на основе не упорядоченных списков ul . В каждый пункт li вкладывается гиперссылка a .

Можно создавать меню и на основе блоков div , таблиц table или списков определений dl .
Но традиционной является конструкция ul .

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

Примечание

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки - только абсолютный. (Если забыли - смотрите Абсобютные и относительные ссылки).

В итоге мы получили очень простое (чтобы не сказать "убогое") навигационное меню . Его необходимо срочно оформить! Прописываем стили css .

- Куда?
- В css-файл!
- В какой?

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

Поэтому предварительно нужно создать файл, например my-menu.css , и подключить его.

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

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

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

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

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

Каким тегам нужно присваивать классы

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

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div , а nav , то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul .

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul , а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu .

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

Внимание!

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

Имеено по-этому я выбрал класс .my_menu , так как на сайте уже есть класс .menu со своими стилями.

Группировка стилей по классам

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

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

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

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

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.

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

Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.

Цветовое оформление

Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:

  • Цвет фона меню
  • Цвет и фон ссылки. При оформлении пунктов меню стилевые правила применяются непосредственно к ссылкам, т.е тегу a
  • Цвет и фон ссылки при наведении курсора
  • Цвет и фон активной ссылки
Примечание

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

  • Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
  • Использование прозрачности при задании цвета фона - background: rgba(0, 0, 0, 0.1) . Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.
Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

Стили привязываем к классу .menu_color , т.к. это элемент оформления, а не разметки.

Конструкция .menu_color>ul>li+li>a используется для присвоения стилей всем пунктам основного меню, кроме первого. Таким образом убирается верхняя рамка первого пункта меню.

Если в этом нет необходимости - заменяем на .menu_color>ul>li>a

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными - черный 15% прозрачности и белый 10% соответственно.

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

Выпадающее меню (многоуровневое)

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные - оформляются отдельным дополнительным меню.

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

За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.

HTML-код 2-х уровневого меню:

Добавлены классы li.parent - родительский тег, содержащий подменю, и ul.sub-menu - вложенный список выпадающего меню.

Разбиваем на несколько этапов:

  • Оформление
  • Скрыть в исходном состоянии
  • Вывод при наведении на родительский пункт

Цветовое оформление

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent . (Именно для этого при сбросе и установке для него было задано position: relative; )

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет).

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам - нужно этот класс добавить к тегу nav.menu_color.sidebar_left .

Подменю выпадающеее влево

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

Аналогично с предыдущим примером привязываем стили к родительскому блоку правой колонки .sidebar_right .

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

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

Простая анимация

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

  • Плавное изменение цвета и фона пунктов при наведении
  • Плавное появление выпадающего меню

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

Для задержки изменения состояния при hover-эффекте (эффект перехода) используется свойство CSS3 - transition .

Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.

Переопределение существующих стилей:

А вот с плавным появленем подменю проблема .

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

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

Раздвижное меню-аккордеон

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover .

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

Аккордеон должен раскрываться по click , а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS.

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu . Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

Стили для выпадающего меню были привязаны к классу .sub-menu , который мы заменили на .sub-accordion-menu . Чтобы не дублировать стилевые правила - группируем классы.

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

Изменения кода - минимальные! Мы просто через запятую дописали новые классы к предыдущему примеру:

После этого добавим стили, для закрытого и раскрытого аккордеона:

Примечание.
Почему было использовано свойство max-height , а не height ? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto - анимация не срабатывает.

Горизонтальное меню

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

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

В итоге наше меню будет выглядеть так:

За основу возьмем код вертикального выпадающего меню и заменим классы:

Разметка

Что было сделано:

  1. Сброс стилей по умолчанию для тега ul
  2. Создание горизонтального меню, путем присвоения тегам li , содержащим пунткы основного меню, свойства float: left
  3. Установка отступов для пунктов меню

Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

Рассмотрим некоторые особенности:

  • Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu . Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
    Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет . Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
  • Для подпункт определено правило white-space: nowrap . Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
    Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li , которым присвоено float: left , выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он "схлопывается" и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

Здесь все достаточно очевидно. Единственное, cursor: default , следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

Для выделения активного пункта меню была применена тень.

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

Дополнительно

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

Фиксированное меню при прокрутке страницы

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

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

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

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

Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)

И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

Читайте также: