Фиксированное меню wordpress. Фиксированное верхнее меню и плавающий сайдбар в WordPress. Реализуем частично фиксированное меню при помощи jQuery плагина Afixx из Twitter Bootstrap

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

Проверив скрипт на кроссбраузерность, выявлено, что он идеально работает на всех новых версиях, имеются затруднения у браузера Internet Explorer ранее 9 версии, но ничего удивительно тут нет, это свойственно старым браузерам.

Надеюсь, Вы уже давно пользуетесь новыми.

Первая часть. Подключение стилей и js файлов.

Давайте первым делом подключим по стандарту все необходимые стили и добавим файлы js , которые требуются для данного скрипта. Сначала подключаем файл стилей demo.css .

Затем подключаем библиотеку jquery-latest.min.js и файл menu.js, который будет отвечать за работоспособность отступов и стыков в меню, а также за исходное правильное положение, заданное по высоте.

Вторая часть. Файл index.php .

Тут все просто, выводим меню по стандарту через ul li и делаем оболочку блочным элементом div , который будет иметь идентификатор menu , взаимодействующий, полноценно с стилями и файлом menu.js .

Ru/news/">Новости

Третья часть. Файл demo.css .

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

#menu { background:#ab4040; width:100%; position:fixed; } #menu ul{ margin:0 auto; width:750px; height:40px; }

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

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

#menu ul li { float:left; list-style:none; width:140px; text-align:center; border-right:1px inset #d0d0d0; height:40px; } .menuleft{ border-left:1px inset #d0d0d0; } #menu ul li a { line-height:40px; text-decoration:none; color:#ffffff; } #menu ul li:hover{ box-shadow:0 1px 0 #ab4040; background:#f43e3e; }

Четвертая часть. Файл menu.js .

Теперь у нас самое интересное. Будем фиксировать наше меню, на том уровне, там где оно нам потребуется. Пропишем переменную menu_height , в которой будем хранить высоту шапки нашего сайта. Это позволит при скроллинге страницы, точно фиксировать меню на нужном расстоянии от шапки сайта. В переменной element , мы храним свойства идентификатора menu и задаем свойство top , указывая, что меню будет сверху, и сравнивая с переменной menu_top , вычисляем нужное расстояние от шапки до меню.

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

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

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

Создадим блок див с классом nav , внутри которого три ссылки на разделы сайта – это и есть наше меню.

Главная
Новости
Контакт

Создадим второй блок с каким-то текстом – это контент нашего сайта.

Фиксированное верхнее меню

Какой-то текст какой-то текст какой-то текст..

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

Nav {
width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
}

Nav a {
float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
}

Поменяем цвет при наведении.

Nav a:hover {
color: #000;
background: #f8bbd0;
}

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

Main {
padding: 14px;
margin-top: 35px;
height: 1200px;
}

Нужно буквально поменять два слова. Вместо top , прописываем bottom: 0 , и соответственно вместо margin-top , пишем margin-botom: 35px .

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

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

Либо меню находится под шапкой сайта, а здесь нужен другой подход.

Как зафиксировать меню под шапкой?

Я знаю два простых способа, как это сделать.

1) Поместите шапку и меню в общий div и примените position: fixed и top: 0 к этому блоку. Таким образом, шапка вместе с меню закрепятся наверху страницы.

2) При помощи скрипта и библиотеки jQuery , когда у верхней границы браузера зафиксируется только меню без шапки. Перед закрытием тега head , вставьте ссылку на библиотеку.

Вставьте небольшой скрипт перед закрывающим тегом body .

$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 100) $(".nav").css({top: "0", position: "relative"});
else $(".nav").css({top: "0", position: "fixed"});
});
});

Замените 100 (высота шапки) на ваше значение, а также название класса nav , на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.

Первое что мы сделаем, это вставим наш HTML код в том месте Вашего сайта, где вы хотите видеть меню.

• Главная
• WordPress
• HTML5&CSS3
• PHP

Меню присваивается класс default , благодаря которому наш jquery сможет потом определить что именно этот блок потом нужно закрепить сверху.

В шапке перед закрывающимся head вставляем код. Как я писал выше, он определить блок с классом default и после прокрутки присваивает ему класс fixed . Можете поменять названия классов, если это Вам нужно. Но только внимательно и не пропустите ничего, иначе все попросту перестанет работать. Менять нужно в jQuery, HTML и CSS.

$(document).ready(function(){ var $menu = $("#menu"); $(window).scroll(function(){ if ($(this).scrollTop() > 100 && $menu.hasClass("default")){ $menu.fadeOut("fast",function(){ $(this).removeClass("default") .addClass("fixed transbg") .fadeIn("fast"); }); } else if($(this).scrollTop() $(window).height()){ $("nav").css({"height": $("nav").height(),"width": $("nav").width()}).addClass("fixed"); }else{ $("nav").removeClass("fixed"); } });

То есть при прокрутке страницы мы проверяем «больше ли величина прокрутки страницы, чем высота окна», и если больше - добавляем класс fixed к нашему меню (и указываем высоту и ширину, потому, что при использовании position: fixed теряются размеры блока), в противном случае - удаляем этот класс.

Fixed{ position: fixed; top:0; left: 0; }

То, есть при наличии такого класа объект станет фиксированным.

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

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

В последнее время в моду вошла такая тенденция как фиксированное меню при прокрутке страницы. Обычно это горизонтальное меню на Landing Page сайтах.

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

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

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

Для начала нам подключить jQuery-библиотеку для сайта

< script src= "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" >

можно подключить локально или через google.

Для локального подключения необходимо скачать файл jQuery с официального сайта http://jquery.com/

CSS

JavaScript

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

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