! доступная ручная работа по правилам оптимального интернета
...здесь Ваша реклама...
Здравствуйте !
— отредактировано:  2017-06-23
издатель:   в теме: В теме: Без плагинов  реплики: 6 комментариев
 
Запросто с WordPress - студия занимательная МИХАЛИКА

Как сделать фиксированное меню — скрипт для нашего сайта…

Давайте по-быстренькому сделаем у себя на сайте фиксированное меню: создадим небольшой 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'});
  });
  /* меню, если нужно отключить меню ФИКС - убираем отработку скрипта в футере! */
});

 

 

 

  1. .menu-s-container — селектор div класса css. У вас может быть иной класс меню: замените в скрипте имя.
  2. (top < 132) — отступ от верхнего края браузера, при котором меню фиксируется. Т.е. чтобы избежать скачкообразной прилипчивости меню, нужно регулировать этот параметр.

 

 

 

 

 

связка файла js фиксации меню в футере темы

 

 

 

 

 

Теперь откроем следующий файл:

 

…подвальный — в файл footer.php перед закрывающим тегом </body> вписываем такую строку: (это, как понимаете, привязка созданного js файла)

 

 

<script type='text/javascript' src='/wp-content/themes/имя_темы/js/fixsidy-sidy.js'>

 

 

 

 

 

 

как отключить сценарий работы скрипта фиксированного меню на маленьком расширении экрана

 

 

 

 

 

Замените в подвальном файле показанную выше строку, на эту:

 

 

<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 с миниатюрой — без плагинов.

Это всё для тех, которые стремятся к ускорению блога/сайта…

 

 

Если назрели какие-то вопросы, задавайте в комментариях…

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…


mihalica.ru


подписка feedburner МИГ подписки - ВРЕМЯ знаний!!

 

 


Благодарности)) и вопросы в комментариях - помогу… в чём дюжу
А также Вы можете просто:
Нажатия на кнопочки определяют Ваше высокое гражданское сознание
ещё статьи по теме:

меточная навигация:


Комментарии © 6 к статье: Как сделать фиксированное меню — скрипт для нашего сайта…

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

    Ответить - Дмитрий

    • fixed — это «заморозка меню» и только. Сдвигают его дефолтные значения цсс (left).
      Все прочие положения меню регулируется CSS. Например, после выполнения свойства (или значения, как угодно) fixed — дополнить значения св-в в стилях — center, ну или марджинами, что ли (хотя, центр ловчее).
      Обычно этот сдвиг после фиксации происходит у многих.
      Коли сложная структура шаблона, то — лучше создать отдельный контейнер меню, и положения ячеек (ссылок) уже задавать относительно него (внутри него), и вот этот класс (или id) привязать к фиксации уже относительно элементов сайта как душе угодно.
      …это, если я правильно понял.

      Ответить - Михаил

      • Да вы правильно поняли.

        Например, после выполнения свойства (или значения, как угодно) fixed — дополнить значения св-в в стилях — center

        Свойство fixed прописано в скрипте. Когда скрипт не сработал, т.е. сайт проскроллирован меньше указанного сверху отступа, у меня центрирование меню уже прописано в CSS, меню отображается по центру. Но после срабатывания скрипта, меню съезжает налево. Как прописать стили для меню отображаемого скриптом?

        Ответить - Дмитрий

        • Относительно Вашего конкретного случая мне советовать сложно, ибо нужно видеть сам шаблон… html. css.
          В подобных закавыках универсального решения нет: меню «пишется» авторами шаблонов по разному. А поэтому я и говорил создать произвольный div контейнер для нужного меню, тогда значение center и пр. не «затрутся».
          К тому же сам «сдвиг» контейнера меню может быть разным: или сдвигается не выходя за основную (ширину) контентовую часть сайта… либо же меню уходит до левого окна браузера, напрочь игнорируя #content или header там… (это снова особенности шаблона).
          Вообще центрировать li (а элементы меню в основном в li маркировке, скажем так) — это утопия.
          Меню выстроить произвольно нужно… шаблон же не предназначался для этакого варианта фикса.

          Ответить - Михаил

  2. К тому же сам «сдвиг» контейнера меню может быть разным

    Да вы правы.
    Если меню в шаблоне находится вне основной контентовой страницы и сделано во всю ширину браузера, то и съезжает к левому краю браузера.
    Если меню внутри контентовой страницы, то съезжает к левому краю страницы.

    Если вы найдёте решение по центрированию меню, при срабатывании скрипта, отпишитесь пожалуйста в комментариях…

    Ответить - Дмитрий

    • …попробую на досуге на тест сайте…

      Ответить - Михаил

Поделитесь соображениями: Ваши мысли очень важны! $ правила комментирования ©

Внимание! Обязательные поля помечены *

 для диалога необходимо принять правила кофиденциальности и пользовательского соглашения *
Яндекс.Метрика