Давайте по-быстренькому “загнём)” вопрос о том, как сделать на сайте фиксированное меню:
создадим небольшой JS скрипт сценария, привяжем этот скрипт в футере активной темы и … всё это дело настроим.
Функционал фиксированного меню замечательно настраивается: лучше не скажешь – как душе угодно настраивается! можно, например, обыграть как-то дополнительное меню фиксацией…
И да – непременно докладываю, что этот мой пост пишется в продолжение инструкции о том, как реализовать или зафиксировать не меню, но виджет в сайдбаре (ссылка на статью, ниже по тесту)
Что ж… занавес открывается… отфиксировывается, что ли))
Приступим и реализуем
как сделать на сайте фиксированное меню
В папке темы, которая зовётся коротко js
создадим новый файл, скажем с именем:
fixsidy-sidy.js
В этот файл запишем скрипт (или код, кому как угодно) – вот эти строки:
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 132) $(".menu-s-container").css({top: '0', position: 'relative'});
else $(".menu-s-container").css({top: '0', position: 'fixed'});
});
/* меню, если нужно отключить меню ФИКС - убираем отработку скрипта в футере! */
});
- .menu-s-container – селектор div класса css. У вас может быть иной класс меню: замените в скрипте имя.
- (top < 132) – отступ от верхнего края браузера, при котором меню фиксируется. Т.е. чтобы избежать скачкообразной прилипчивости меню, нужно регулировать этот параметр.
связка файла js фиксации меню в футере темы
Чтоб решить вопрос раз и навсегда: как сделать на сайте фиксированное меню – откроем для редактирования следующий файл:
…подвальный – в файл footer.php
перед закрывающим тегом </body>
вписываем такую строку: (это, как понимаете, привязка созданного js
файла)
<script type='text/javascript' src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'>
рекомендую ознакомиться с этой статьёй, в которой описывается правильный вариант подключения скриптов js в футер – событие wp_footer !!
и это верный вариант подключения jQuery библиотеки от CDN Google !!
как отключить сценарий работы скрипта фиксированного меню на маленьком расширении экрана
Чтобы фиксированное меню переставало работать на, скажем так, маленьком (расширении) экране телефона – замените в подвальном файле показанную выше строку, на эту:
<script> if (document.body.clientWidth>1025) {document.write("<script type='text/javascript' src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'><\/script>");}</script>
(document.body.clientWidth>1025) – ширина отключения прилипчивости скрипта фиксации меню.
Эту инструкцию просто необходимо почитать: фиксированный виджет, ибо в ней есть некоторые полезные бирюльки, которые применимы и к фиксированному подменю или меню.
А вот эта статья, рассказывает как вывести в сайдбаре ссылки на самые комментируемые статьи: регулятор вывода количества комментариев… можно выводить title с миниатюрой – без плагинов.
Это всё для тех, которые стремятся к ускорению блога/сайта…
Если назрели какие-то вопросы, задавайте в комментариях…
На этом занавес представления опускается…
…на рампы пыль печальная ложится…
Online консультация по настройкам и созданию сайтов на WordPress
mihalica.ru !
Огромное спасибо, очень полезный скрипт. Вопрос такой. Если меню сайта не по левому краю, а центрировано, как сделать чтобы с классом fixed оно тоже было по центру, а не съезжало на лево?
fixed
– это “заморозка меню” и только. Сдвигают его дефолтные значения цсс (left
).Все прочие положения меню регулируется CSS. Например, после выполнения свойства (или значения, как угодно) fixed – дополнить значения св-в в стилях –
center
, ну или марджинами, что ли (хотя, центр ловчее).Обычно этот сдвиг после фиксации происходит у многих.
Коли сложная структура шаблона, то – лучше создать отдельный контейнер меню, и положения ячеек (ссылок) уже задавать относительно него (внутри него), и вот этот класс (или id) привязать к фиксации уже относительно элементов сайта как душе угодно.
…это, если я правильно понял.
Да вы правильно поняли.
Свойство fixed прописано в скрипте. Когда скрипт не сработал, т.е. сайт проскроллирован меньше указанного сверху отступа, у меня центрирование меню уже прописано в CSS, меню отображается по центру. Но после срабатывания скрипта, меню съезжает налево. Как прописать стили для меню отображаемого скриптом?
Относительно Вашего конкретного случая мне советовать сложно, ибо нужно видеть сам шаблон… html. css.
В подобных закавыках универсального решения нет: меню “пишется” авторами шаблонов по разному. А поэтому я и говорил создать произвольный div контейнер для нужного меню, тогда значение center и пр. не “затрутся”.
К тому же сам “сдвиг” контейнера меню может быть разным: или сдвигается не выходя за основную (ширину) контентовую часть сайта… либо же меню уходит до левого окна браузера, напрочь игнорируя #content или header там… (это снова особенности шаблона).
Вообще центрировать
li
(а элементы меню в основном в li маркировке, скажем так) – это утопия.Меню выстроить произвольно нужно… шаблон же не предназначался для этакого варианта фикса.
…
Да вы правы.
Если меню в шаблоне находится вне основной контентовой страницы и сделано во всю ширину браузера, то и съезжает к левому краю браузера.
Если меню внутри контентовой страницы, то съезжает к левому краю страницы.
Если вы найдёте решение по центрированию меню, при срабатывании скрипта, отпишитесь пожалуйста в комментариях…
…попробую на досуге на тест сайте…