Как сделать фиксированное (плавающее) меню 60


Здравствуйте, уважаемые друзья. Сегодня я расскажу, как сделать фиксированное меню для сайта. Также это меню называют плавающим.

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

Создать подобное меню довольно легко. Весь секрет заключается в трёх строчках CSS кода.

Как создать фиксированное меню с помощью CSS стилей

Для начала нужно объяснить, как должна быть организована структура страницы (html – каркас). Тут важно понимать, что фиксированное меню на основе CSS стилей можно реализовать при условии, что меню расположено вверху страницы. В таком случае при прокрутке оно будет неизменно оставаться на своём месте. Если же меню хоть на несколько пикселей смещено вниз или размещено под шапкой, то способ с css-стилями уже не подойдёт.

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

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

html структура под фиксированное меню на css

html структура под фиксированное меню на css

Схема, конечно, упрощённая. Здесь, всё внимание нужно обратить на расположение меню. В первом варианте, меню расположено в самом верху. Во втором варианте, меню расположено внутри шапки.

Безусловно, многое зависит от общего дизайна сайта, но и в первом, и во втором варианте можно организовать фиксацию меню с помощью css-стилей. Только вот во втором варианте, фиксацию придётся сделать для всей шапки. Это зависит от дизайна.

Следующий важный момент, который вы должны знать и понимать, — все элементы веб-дизайна заключены в отдельные блоки. Это называется — блочная вёрстка. Так вот, меню тоже будет располагаться в отдельном блоке. Для того чтобы каждый блок приобрёл нужный вид (дизайн) им присваивают идентификаторы (id) и классы (class). И через эти id и class задают css-стили.

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

<div id="fixmenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Об авторе</a></li>
<li><a href="#">О проекте</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

В системах управления контентом, в том числе и WordPress меню будет создано через php. И выглядеть будет примерно так:

<div id="fixmenu">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

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

Обратите внимание, блок ДИВ с идентификатором fixmenu присутствует и в одном и в другом варианте.

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

Как узнать идентификатор или класс меню

Это делается очень просто. Подводите курсор мышки к меню, нажимаете правую кнопку и в контекстно-зависимом меню выбираете пункт «Исследовать код элемента» или «Исследовать элемент».

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

Определение идентификатора меню

Определение идентификатора меню

Присвоение css-стилей

Для этого открываете таблицу стилей (style.css). В WP нужно открыть административную панель – «Внешний вид»«Редактор»«Таблица стилей».

В таблицу стилей нужно вставить вот эти стили:

#fixmenu{
position: fixed; /*фиксированное положение*/
z-index: 100; /*ориентация выше всех*/
}

Примечание: вы меняете название идентификатора на своё. Запомните, в css идентификатор обозначается знаком решётки #, а класс, — точкой.

# имя идентификатора

. имя класса

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

Как создать фиксированное меню с помощью jQuery

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

html каркас обычного шаблона

html каркас обычного шаблона

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

Проверка и подключение библиотеки jQuery

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

Для этого откройте исходный код сайта. Сделать это можно комбинацией клавиш CTRL+U. И поищите в нём, между тегами <head>…</head>, строчки кода в которых упоминается jquery.min.js или jquery.js.

Если таких строк вы не нашли, то перед закрытием тега ХЕД </head> вставьте вот этот код:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
Подключение jquery

Подключение jquery

Подключение скрипта – обработчика (меню без изменений прилипает к верхнему краю)

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

Я предпочитаю использовать второй вариант.

Подключать скрипт нужно либо в файле заголовка (header.php), между тегами <head>…</head>, либо в файле подвала (footer.php), пред закрытием тега БОДИ </body>.

Если, решите вставлять код скрипта целиком, используйте вот такую структуру:

<script type="text/javascript">
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 150) $("#fixmenu").css({top: '0', position: 'relative'});
else $("#fixmenu").css({top: '0', position: 'fixed'});
});
});
</script>
Вставка скрипта в исходный код

Вставка скрипта в исходный код

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

top < 150 – высота шапки + расстояние до верхней границы окна.

#fixmenu – идентификатор меню.

Также к параметрам top: '0', position: 'fixed', может потребоваться добавить z-index: '100', если меню при прокрутке будет уходить под другие элементы дизайна.

Если, решите подключать скрипт чрез файл, используйте вот эту структуру:

<script src="ПУТЬ К ФАЙЛУ/fixmenu.js" type="text/javascript"></script>

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

Кстати, в WordPress, вы можете использовать и вот такой код для вставки:

<script src="<?php echo get_template_directory_uri(); ?>/js/fixmenu.js" type="text/javascript"></script>

В этом примере, код сам определит путь к файлу, если он находится в папке темы/папке JS.

Подключение файла скрипта

Подключение файла скрипта

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

Подключение скрипта – обработчика (меню фиксируется по верхнему краю и расширяется на всю ширину)

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

И для решения этой задачи тоже подойдёт данный скрипт, только с небольшими добавлениями в css – стили.

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

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

$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 150) $("#fixmenu").css({top: '0', position: 'relative'});
else $("#fixmenu").css({top: '0', left: '0', position: 'fixed', width:'100%', background: 'none repeat scroll 0% 0% rgba(9, 125, 240, 0.7)'});
});
});

Обязательные стили:

left: ‘0’ – отступ слева;

width:’100%’ – выравнивание по ширине;

Дополнительные стили:

background: ‘none repeat scroll 0% 0% rgba(9, 125, 240, 0.7)’ – цвет и прозрачность фона.

Дополнительный стиль вы можете не подключать, это по желанию.

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

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

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

На сегодня у меня всё, жду ваших комментариев. И конечно же, до встречи в новых видеоуроках и статьях.

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

60 коммент. к статье “Как сделать фиксированное (плавающее) меню

  • Сергей Саранчин

    Привет, Максим!
    Я вот думаю и себе тоже такое же меню плавающее на блоге реализовать
    Применю твою инфу на практике

    • Максим Зайцев От автора

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

      • Саша

        Вроде как заработало, но меню убегает под другие элементы сайта z-index: ‘100’ не помогает, а оключает скрипт полностью.

        • Максим Зайцев От автора

          Здравствуйте, Саша. Параметр z-index вы можете задать через стили css для идентификатора #fixmenu. Вам вовсе нет необходимости править скрипт.
          Также обратите внимание на z-index тех блоков, под которые уходит меню. Возможно, придётся увеличить значение индекса меню. Если, не понятно, задавайте вопросы, желаю удачи!

  • жорик

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

    • Максим Зайцев От автора

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

  • Людмила

    Максим, спасибо за несколько вариантов. Первый, простой у меня не получается, так как нужный контейнер содержит и класс и id , пробовала что то одно прописывать — не подходит. Попробую разобраться с другими способами.

    • Максим Зайцев От автора

      Людмила, у вас идеальное меню для реализации его через css. Вы можете в этом убедится, запустите панель разработчика в браузере и присвойте идентификатору #wrappermenu вот эти классы position: fixed; width: 100%; z-index: 100; Внешний отступу изменить так margin: -40px auto; Также изменить стиль margin: 40px auto 0px; для идентификатора #wrapperheader
      И всё будет ОК 🙂
      В таблице стилей у вас это 64 и 65 строка, где описаны эти стили.

      • Людмила

        Изменила данные в файле css (на тестовом сайте), но ничего так и не изменилось 🙁

        • Максим Зайцев От автора

          Людмила, где-то допустили ошибку. Возможно в тестовом сайте у вас немного другие стили. Пришлите мне файл style.css, от вашего сайта. Я его подправлю, сделаю в нужных строчках комментарии. Потом просто, скопируете его на хостинг и всё будет работать.

      • Людмила

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

        • Максим Зайцев От автора

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

          • Людмила

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

          • Максим Зайцев От автора

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

    • Максим Зайцев От автора

      Согласен, всем не угодить. Хотя, всё делается для удобства посетителей 😉

        • Максим Зайцев От автора

          Получится, возможно, где-то допустили ошибку. Ещё раз перепроверьте.

          • Сергей

            Привет!
            Хочу Вас спросить, а как Вы думаете, на моем сайте если использовать Вашу статью — можно добиться , что бы вертикальное меню стало фиксировано и было как например здесь: http://pesni.fm/search/%D0%94%D0%B6%D0%B5%D0%B9%D0%BC%D1%81+%D0%9B%D0%B0%D1%81%D1%82/%D0%9E%D0%B4%D0%B8%D0%BD%D0%BE%D0%BA%D0%B8%D0%B9+%D0%BF%D0%B0%D1%81%D1%82%D1%83%D1%85 — на этом сайте меню не просто фиксировано, оно еще самоцентруется при прокрутке страницы.
            Как сделать так для моего сайта (www.часы24часа.рф)?
            Оплачу бартером — часами которые делаю по заказам, если поможете мне. (шутка, но если нужны мои часы — договоримся).

          • Максим Зайцев От автора

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

  • Сергей

    Код блокируется — что бы мне показать простой пример (который так и не отобразился), НО, вот ссылка на этот пример: http://awesome-design.com/stati/javascript/fiksirovannoe-vertikalnoe-menyu.html
    Вопрос. Чем этот простой код (который работает) хуже того что даете в уроке Вы?

    • Максим Зайцев От автора

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

      • Сергей

        Вы пишите нелепо. Что это значит?
        Так же — второй вариант решит Вашу проблему. А чем первый Вариант не подходит?
        Вот временная страница: http://www.xn--80a2agbdc.xn--p1ai/index-vert-meny.html — по первому варианту.
        — Советуете второй? Чем же он лучше? (не могу понять) Обьясните пожалуйста.

        • Максим Зайцев От автора

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

          • Максим Зайцев От автора

            Сергей, не за что, вы всё сделали сами. Желаю вам успехов!

    • Максим Зайцев От автора

      Здравствуйте, Александр. Рад, что смог помочь. Заходите в гости, буду рад. 🙂

      • виктор

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

        • Максим Зайцев От автора

          Здравствуйте, Виктор. Я просматриваю ваш сайт и меню работает, только заходит под форму подписки и под видео. Это можно исправить. Для этого нужно к классу menu-menju-navigacii-container добавить стиль z-index: 1; сделайте всё будет отлично. Желаю удачи!

      • виктор

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

        • Максим Зайцев От автора

          Виктор, добавьте в таблицу стилей для класса menu-menju-navigacii-container стиль z-index: 1; и меню выше видео и формы подписки. Вся заморочка только в стилях.

    • Максим Зайцев От автора

      Здравствуйте, Mirzozod. Не совсем понял вопрос. Вам нужно разместить видео на сайте и чтобы окно с видео было в поле видимости при прокрутке? Поясните пожалуйста.

      • Mirzozod

        У меня видео с ютуба — хочу чтоб когда прокручивал статью видео в статье прокручивалась вместе с браузером

        • Максим Зайцев От автора

          Самый простой способ, поместить видео в блок ДИВ, присвоить этому блоку класс и в стилях для этого класса добавить стиль position:fixed; через z-index выбрать нужно положение, то есть по верх текста. А стилем top выставить отступ сверху. Но, при таком способе всегда нужно будет размещать видео в одно и том же месте, в начале статьи.
          Другой вариант, это использовать классы из статьи и применить метод со скриптом.

          • Mirzozod

            Спасибо Максим, первый вариант помог ))))

          • Максим Зайцев От автора

            Очень этому рад. Удачи!

  • виталий

    дайте полный код страницы в формате html, css, js. как написанно всё делаю, и ничего.
    на готовой странице как то понятней будет.

    • Максим Зайцев От автора

      Здравствуйте, Виталий. Образец вы можете посмотреть в видеоуроке. Скрипты приведены в статья, а готовые файлы можно скачать в конце статьи. Выполняйте всё по инструкции и у вас всё получится. Желаю удачи!

  • Max

    Если в скрипте прописать условие:

    if ($(window).width() < 800) {
    return;
    }

    Скрипт отключается, если р-ние экрана меньше 800 px. (например, если не хотим показывать мобильным узерам).

    Мож. кому пригодится, вот готовый код:

    $(function(){
    $(window).scroll(function() {
    var top = $(document).scrollTop();
    if ($(window).width() < 800) {
    return;
    }
    if (top < 200) $("#mainmenu_2").css({top: '0', position: 'relative'});
    else $("#mainmenu_2").css({top: '0', left: '0', position: 'fixed', width:'100%', background: 'none repeat scroll 0% 0% rgba(9, 125, 240, 0.7)'});
    });
    });

    • Максим Зайцев От автора

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

    • Максим Зайцев От автора

      Здравствуйте, Евгений. С какой ошибкой? Следуйте инструкциям в статье и всё будет без ошибок. Удачи!

  • Владлен

    Максим, добрый вечер. У меня второй вариант, меню под шапкой, у меня ничего не получилось, я не понимаю что такое #fixmenu – идентификатор меню. Подскажите пожалуйста, вот код меню в header.pxp. Сайт http://infocar.pro/. Очень жду Вашего скорейшего ответа!

    • Максим Зайцев От автора

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

      • Владлен

        Да Максим) решил вопрос) вы знаете только вот на мобильном не хорошо(( а я не знаю какой стиль прописать в css, что бы прокрутило допустим 150px и прилипло сверху, вот код попытаюсь выложить тот что я начал писать
        /* Custom, iPhone Retina */
        @media only screen and (max-width : 320px) {

        .main-navigation ul li:hover > ul,
        .main-navigation ul li.focus > ul {
        position: relative;
        top: inherit;
        left: 15%;
        z-index: 99999;
        }

        #masthead {
        z-index: 1;
        background: #0b0a0a;

        }

        }
        касается #masthead

        • Максим Зайцев От автора

          В таком случае фон background: #0b0a0a; с #masthead нужно убрать. Он перекрывает изображение и форму. А добавить его для класса .main-navigation. Так вы избавитесь от перекрытия изображения фоном.