Как сделать плавающее меню на сайте

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

Самый простой способ сделать любое меню плавающим по экрану или прикреплённым к верхней части экрана:

С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:

Само меню нужно обернуть в контейнер с id "menu-top-conteiner" и задать его высоту, сделано это для того чтобы при начале перемещения меню, оставшаяся часть конвента не прыгала вверх, хотя это почти и не заметно.

Скрипт jQuery очень прост, - мы меняем CSS класс для меню, тем самым прикрепляем его к верхней части окна. CSS класс называется "top-menu-fixed":

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

Исходный вариант, когда ничего не плавает

Изначальные данные: блок уже спозиционирован. У меня как-то так с большим футером, у вас — иначе.

Как сделать блок (div, aside и т.п), шапку, рекламу, меню фиксированными. Только CSS

Реализуется благодаря свойству position в значении fixed . Задать положение элемента на экране можно с помощью свойств top , bottom , left , right .

Но, поскольку они ведут отсчёт от краёв окна браузера, а мониторы имеют разное разрешение экрана, то лучше сразу правильно разместить блок, опираясь на свойства margin , transform: translate; , text-align .

Плавающий блок, замирающий над футером или другим элементом. Чистый JavaScript без jQuery

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

Элемент прилипает только во время прохождения скроллом другого элемента

Чтобы элемент отцеплялся и останавливался, когда заканчивается поле article . То есть нижние границы article и aside должны быть на одной линии.

Как сделать, чтоб прилипали два (необязательно) блока в обоих сайдбарах

Фиксируется два и более блока друг за другом

При листании вниз прилипает первый блок, когда родитель заканчивается — отлипает; прилипает второй, когда родитель заканчивается — отлипает; прилипает третий и т.д.

То же самое, только с общим родителем.

Плавающая длинная боковая колонка без пустого пространства

При скроллинге вниз боковая колонка прилипает, когда её нижний край касается нижнего края окна браузера. При скроллинге вверх боковая колонка прилипает, когда её верхний край касается верхнего края окна браузера. Есть нижний предел, до которого доходит колонка.

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

Плавающее меню

Вставка кода на сайт

Начнем со вставки кода, которые вы можете скачать по приведенной ссылке. Вам нужно распаковать архив, в нем вы найдете два демо-файла. Можете посмотреть, как все работает, нажав на каждый демо-файл.

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

Открываем главный файл вашего сайта, например, «index.html«, если это сайт на каком-то движке, то вставлять советую перед закрывающим тегом body.

Выводим стили в отдельный файл

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

Тут все просто: пропишите путь к вашему файлу стилей и все. Проверьте, как отображается плавающее меню на сайте.

Добавляем новые пункты меню

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

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

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

Новый класс нам нужен, чтоб мы смогли задать уникальную иконку.

Подведем итоги

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

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

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

Навигация по статье:

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

Выглядеть эта кнопка будет как то так:

Как создать плавающую кнопку?

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

Далее нам нужно прописать определённые CSS свойства для этого блока, чтобы он был похож на плавающую кнопку.
Для этого открываем файл стилей сайта. В случае с WordPress это будет файл style.css, который находится по адресу:

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

margin-right : -50px ; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/

За поворот блока на 90 градусов отвечает вот этот набор свойств:

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

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

Если вы хотите чтобы по нажатию на плавающую кнопку осуществлялся переход на другую страницу, то в коде

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

Как создать всплывающее окно?

О том, как создать всплывающую форму обратной связи на сайте WordPress я писала в этой статье. Аналогично создаётся всплывающее окно для любого другого контента.

Если в двух словах, то вот что нужно сделать:

Теперь нам нужно немного доработать наш код, а именно: добавить ссылке класс inline-content, затем добавить скрытый блок со всплывающим контентом и поставить ссылку на этот блок.
На практике это будет выглядеть так:

Вот как это будет выглядеть на сайте:

Я там добавила ещё внутренний отступ в 20 пикселей и серую рамку для блока всплывающей формы с >

В итоге весь добавленный CSS код выглядит так:

margin - right : - 50px ; /*отрицательный отступ справа (чем длиннее название кнопки тем больше должно быть значение данного отступа )*/

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

На этом у меня всё! Спасибо что дочитали до конца! Если статья была для вас полезной то не забудьте поделиться ею в соцсетях, также подписывайтесь на обновления блога и на канал YouTube.

С уважением Юлия Гусарь

Подписаться на рассылку

31 комментарий

Алексей! И Вам большое спасибо за комментарий! Надеюсь у Вас всё получится!

Доброго времени суток.
Меня интересует один пункт из вашей статьи, а именно:

Статью перечитал уже раз 5. Подскажите пожалуйста что не так я делаю?

Здравствуйте! А Вы весь этот код вставляли в шаблон, в запись или в виджет? Если в шаблон, то он не будет работать в том виде в котором Вы его вставили. Его нужно через специальную php функцию выводить. Вот ссылка на статью, где написано как это сделать Вставка шорткода в шаблон WordPress или почему не работает шорткод в файлах темы?

Здравствуйте, Надежда!
Вместо ничего не нужно ставить! Это просто комментарий в HTML коде чтобы было понятно что это за блок и зачем он нужен. Чтобы не сбивать людей с толку я удалила эту строку из кода :)

Большое спасибо Юленька! Очень помогла ваша статья!

Александр! И Вам спасибо за комментарий! :)

Юлия, доброй ночи!

Допустим, трубку телефона.

Юлия, добрый день!

— добавить кнопке прозрачности

— сделать эффект появления кнопки при прокрутке страницы

Если вопросы обширные, подскажите в каком направлении вообще копать эти вопросы?

Заранее спасибо! У Вас потрясающий сайт.

Если вместо надписи будет картинка, то нужно написать так:
.call_back a img opacity:0.5;
>

Значение прозрачности задаётся от 0 до 1, где 1 это непрозрачное изображение.

3. Плавное появление — это отдельная тема. Если хотите я напишу в ближайшее время статью по ней и скину Вам ссылку. Хорошо?

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