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


Как сделать прилипающее при скролле меню при подобном макете? — Хабр Q&A


День добрый. Хотелось бы узнатоков уточнить про макет на картинке выше. В подобном макете я хотел первую картинку на фон боди вешать + еще указать цвет бэкграунда (как подстраховку), после хедера далее уже идут section's у которых начиная со второго (первый, который попадает в картинку - прозрачный), по сути, указаны в бэкграундах изображения. Своё решение объясню - если делать делать начиная с первой секции картинки в бэкграундах, тогда придется все секции сдвигать вверх и получится дыра между последним и футером (ибо если не сдвигать, то выше линии навигации будет бэкграунд колор темный, который у боди указан по умолчанию). Я что-то упускаю (кстати, у хедера position: sticky) и лучше сделать по другому? Меня смущает некоторая "костыльность" и, как бы это сказать, "несемантичность", что первая картинка, как бы, вне секции, хотя принадлежать "по идее" должна первому блоку, но другого пути не вижу (если только не переделывать хедер с навигацией, чтобы он был в абсолютном позиционировании, а свойство sticky "эмулировать" с помощью JS, опять же, подскажите как, ибо в гуглах я видел примеры когда выше меню обязательно что-то было, а не такой пример как у меня - когда, по сути, меню, сверху первой секции и в процессе прокрутки должно прилипать к верхней границе страницы). Заранее благодарен.

jquery - Как сделать липкое меню?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
.

В липком меню быстрее перемещаться - Smashing Magazine

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

Большинство дизайнеров согласятся, что навигация является одним из наиболее важных компонентов веб-сайта.Несмотря на это, не всегда легко использовать или получить доступ. Обычно пользователи должны прокручивать назад к началу веб-сайта, чтобы получить доступ к меню навигации. Недавно я задался вопросом, делают ли липкие меню более быстрой навигацией по веб-сайтам, и провел исследование удобства использования, чтобы найти ответ. Давайте посмотрим на результаты исследования, несколько методов реализации и некоторые связанные с этим проблемы.

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

Другими словами, он доступен из любого места на веб-сайте без необходимости прокрутки. Хотя липкую навигацию можно применить к любому меню, например к нижнему колонтитулу или кнопкам социальных сетей, мы сосредоточимся на основной (или основной) навигации веб-сайта. На изображении ниже показана разница между стандартной и липкой навигацией на мобильном устройстве.

Дополнительная литература по SmashingMag:

Исследование юзабилити

Условия исследования

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

Данные исследования показали, что участники смогли быстрее находить то, что искали, когда им не нужно было прокручивать назад к началу страницы. 22% может показаться небольшой цифрой, но она может иметь большое влияние на посетителей. Согласно этим данным, липкая навигация может сократить пятиминутное посещение веб-сайта на 36 секунд. Конечно, продление срока пребывания посетителей на странице является преимуществом только в том случае, если вы улучшаете взаимодействие с пользователем вместе с этим.Принуждение людей копаться на веб-сайтах в поисках чего-либо не считается таковым.

В конце каждого сеанса пользователей спрашивали, заметили ли они разницу между двумя пользовательскими интерфейсами. Никто не смог его идентифицировать. Изменения были незначительными, и никто из пользователей не заметил их, потому что они были сосредоточены на выполнении своих задач. Затем участников спросили, было ли легче пользоваться одним из веб-сайтов. Шесть из 40 участников не имели предпочтений, но из 34, которые имели предпочтение, 100% указали, что веб-сайт с липкой навигацией был проще или быстрее в использовании.Было сделано много комментариев в этом направлении, например: «Я не знаю, чем были разные веб-сайты, но мне казалось, что я трачу гораздо меньше времени, нажимая на первый из них». Такие комментарии указали на подавляющее преимущество липкой навигации.

Представьте, что вы печатаете документ в Microsoft Word и вам нужно прокручивать вверх до верхней части первой страницы каждый раз, когда вы хотите выделить слово жирным шрифтом или расширить поля. Сама мысль об этом расстраивает. Большинство настольных программ обеспечивает доступ ко всему меню навигации независимо от того, что вы делаете в приложении.Веб-браузер ничем не отличается; нам было бы смешно прокручивать страницу вверх, чтобы получить доступ к адресной строке браузера.

Некоторые хорошие примеры

Facebook и Google+ недавно внедрили липкую навигацию, но их меньшинство. Из 25 наиболее посещаемых веб-сайтов в США только 16% в настоящее время имеют липкую навигацию. Ниже приведены несколько примеров других веб-сайтов, которые отлично справляются с этой задачей.

Программное обеспечение Fizzy Это прекрасный пример горизонтальной залипающей навигации в самом верху.Во время использования сайта все кажется комфортным.

Веб-приложения Навигация здесь вертикальная и находится слева, что немного напоминает навигацию в Google +. Единственным недостатком здесь является то, что если высота экрана меньше 560 пикселей, нижняя часть меню может стать недоступной, что было в случае, когда я тестировал веб-сайт на нетбуке.

MakeBetterApps Вот еще один отличный пример. Сделать навигацию слегка прозрачной и дать намек на содержимое под ней - это приятный штрих.

Родольф Селестин Эта липкая навигация распространяется по всему верху, но когда вы прокручиваете страницу вниз, дизайн меню немного меняется. Подобное упрощение дизайна может быть хорошей техникой, если она не кажется противоречивой. Кроме того, дизайнер использовал все более популярный подход, сделав весь веб-сайт всего одной страницей; ссылки меню - это якоря, которые перемещают вас вниз по странице. Некоторые приятные переходы и эффекты наведения делают этот сайт приятным в использовании.

Райан Шерф Навигация на этом сайте вертикальная и состоит только из иконок. Творчество здесь впечатляет.

Web Designer Wall На этом сайте хорошо работает липкая вертикальная навигация, потому что в меню всего четыре пункта. Это работает достаточно хорошо для блогов, и мне интересно, почему другие не применяют такой подход.

Хотя липкие меню не являются самой популярной формой навигации, все время появляется все больше и больше примеров.

Начало работы

Избегайте iFrames

Может показаться, что это простой способ реализовать липкую навигацию, но избегайте этого метода. iFrames вызывают больше проблем, чем решают, особенно с кроссбраузерностью, безопасностью и поисковой оптимизацией. У iFrames есть свое место, но они не должны быть основной частью вашего HTML-макета.

CSS

CSS - отличный способ реализовать липкую навигацию. Кроме того, он кажется самым простым, легким и быстрым в кодировании.Три вещи, на которые следует обратить внимание: позиция , верхняя граница и z-index . Установка позиции меню с по фиксированная отключает прокрутку элемента вместе с остальной частью страницы. Это, скорее всего, приведет к ухудшению ваших полей, если ваша навигация будет горизонтальной, поэтому вам нужно будет отрегулировать это. Наконец, используйте z-index с горизонтальным меню, чтобы убедиться, что навигация находится поверх всего; это заставит другое содержимое скользить под навигацией по мере прокрутки.Вот общая идея:

  #navigation { положение: фиксированное; z-индекс: 10; } #header { маржа сверху: 50 пикселей; }  

Вам придется поэкспериментировать с CSS, чтобы эта техника работала правильно на вашем веб-сайте. Дополнительную информацию можно найти на веб-сайте W3C.

jQuery и JavaScript


Простая интеллектуальная закрепленная панель навигации - одна из многих хороших реализаций JavaScript.

Если вы предпочитаете решение jQuery или JavaScript решению CSS, тогда вы можете попробовать один из следующих вариантов:

Существует множество других решений и сценариев.Пожалуйста, включите ваши фавориты в комментарии ниже.

Какие плохие новости?

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

Ограничения дизайна

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

Отвлекает и навязчиво

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

Мобильная совместимость

CSS с фиксированной позицией и некоторые реализации JavaScript не поддерживают некоторые мобильные браузеры, что вызывает беспокойство у некоторых разработчиков.В статье Люка Вроблевски «Организация мобильных» содержится несколько важных принципов, которые следует учитывать при создании навигации для мобильных устройств. Методы адаптивного дизайна также предлагают некоторые решения для настройки навигации в зависимости от размера экрана.

Помните об уровне поддержки, предлагаемой каждым устройством. Если вы заранее узнаете о проблемах совместимости, то в конечном итоге вы сэкономите время. Когда я могу использовать? есть интересная информация о поддержке позиции : исправлено . Брэд Фрост также провел некоторые собственные испытания и анализ, предоставив некоторые интересные идеи в сопроводительном видео.

Почему мы, веб-дизайнеры и разработчики, постоянно заставляем наших пользователей прокручивать страницу вверх и вниз в поисках навигации? Это не проблема в программном обеспечении для настольных ПК, и теперь у нас есть статистика, показывающая преимущества липких меню. Навигация на 84% из 25 самых посещаемых веб-сайтов США может быть ускорена за счет использования липкой навигации.

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

(др.).

Как создать липкое плавающее меню навигации в WordPress

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

Метод 1: Добавить закрепленное плавающее меню навигации с помощью подключаемого модуля

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

Первое, что вам нужно сделать, это установить и активировать Sticky Menu (или что угодно!) В плагине Scroll. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо перейти на страницу Настройки »Прикрепленное меню (или что угодно!) , чтобы настроить параметры плагина.

Сначала вам нужно ввести CSS ID меню навигации, которое вы хотите сделать закрепленным.

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

Просто зайдите на свой веб-сайт и наведите указатель мыши на меню навигации. После этого вам нужно щелкнуть правой кнопкой мыши и выбрать в меню браузера пункт «Проверить».

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

 

В этом примере CSS ID нашего навигационного меню - site-navigation .

Идите вперед и введите идентификатор CSS навигации в настройках плагина, например # site-navigation .

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

После этого вам нужно установить флажок рядом с опцией: «Проверить панель администратора». Это позволяет плагину добавить место для панели администратора WordPress, которая добавляется только для авторизованных пользователей.

Следующая опция на странице настроек позволяет вам открепить меню навигации, если пользователь посещает ваш веб-сайт, используя меньший экран, например мобильное устройство.

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

Не забудьте нажать кнопку сохранения настроек, чтобы сохранить изменения.

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

Метод 2: вручную добавить закрепленное плавающее меню навигации

Этот метод требует, чтобы вы добавили в вашу тему собственный код CSS.Если вы не делали этого раньше, ознакомьтесь с нашим руководством о том, как легко добавить пользовательский CSS на свой сайт WordPress.

Сначала вам нужно посетить Внешний вид »Настроить , чтобы запустить настройщик тем.

Щелкните «Дополнительный CSS» на левой панели и затем добавьте этот код CSS.

 # site-navigation { фон: #fff; высота: 60 ​​пикселей; z-индекс: 170; маржа: 0 авто; нижняя граница: сплошной 1px #dadada; ширина: 100%; положение: фиксированное; верх: 0; слева: 0; справа: 0; выравнивание текста: центр; } 

Замените # site-navigation идентификатором CSS вашего меню навигации и нажмите кнопку «Сохранить и опубликовать».

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

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

Это можно легко изменить, добавив поля в область заголовка с помощью некоторого CSS, например:

 .site-branding { маржа сверху: 60 пикселей; } 

Замените site-branding на класс CSS области заголовка.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

.

Sticky Menu, Sticky Header (или что угодно!) На Scroll - плагин для WordPress

Я выбрал класс / идентификатор на экране настроек, но элемент не прилипает, когда я прокручиваю вниз. Почему нет?

Во-первых, убедитесь, что если вы выбираете элемент по имени класса, ему предшествует точка (например, «.main-menu»), а если вы выбираете его по идентификатору, то перед ним стоит фунт / хэш / числовой знак (например, «# главное меню»). Также убедитесь, что на странице есть только ОДИН элемент с тем селектором, который вы используете.Если их нет или более одного элемента соответствует вашему селектору, ничего не произойдет.

Как только элемент становится липким, он вообще не позиционируется / не имеет правильного размера.

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

  • отрицательные поля
  • абсолютное позиционирование
  • свойства сверху / слева / снизу / справа
  • «дисплей: встроенный»
  • «! Important» применимо к любому из его свойств

По возможности старайтесь избегать всего этого, но если у вас не получается, иногда помогает использование плагина в устаревшем режиме (см. Ниже).
Другая ситуация, которая может вызвать проблемы, - это когда к любому родительскому элементу прикрепленного элемента применено свойство CSS «преобразовать».

Когда элемент становится липким, он не реагирует и не меняет размер, когда я меняю размер в браузере.

Это известная (и досадная) ошибка в плагине, которую я пока не смог исправить. Для некоторых сайтов (когда элемент обычно не поддерживает интерактивность JavaScript) иногда помогает использовать плагин в устаревшем режиме (см. Ниже).

Можно ли добавить к элементу несколько стилей, но только когда он закреплен?

Чтобы добавить стили к липкому элементу, когда он не липкий, используйте имя класса «.element-is-not-sticky».
Чтобы добавлять стили к закрепленному элементу, только когда он является липким, используйте имя класса «.element-is-sticky»

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

.элемент-нелипкий {
фон: красный;
}

.элемент липкий {
фон: синий;
}

Как только элемент становится липким, есть короткий момент, когда вы видите его дважды.

Если вы используете плагин в устаревшем режиме (см. Ниже), это происходит, когда к закрепленному элементу (или любому его содержимому) применен переход CSS. Поскольку исходный элемент становится невидимым (а его клонированная копия становится видимой), изменение статуса с видимого на невидимый произойдет с переходом (т.е.не мгновенно). Либо удалите любой из переходов, имеющихся у элемента, либо попробуйте отключить устаревший режим.

Мое меню залипает, но не открывается в адаптивной теме, когда оно залипает.

Это была ошибка в версиях до 2.0 и несовместимость с темой. Это было исправлено в версии 2.0, но в устаревшем режиме эта ошибка все еще присутствует. Если вам по какой-то причине необходимо включить режим Legacy Mode, лучше отключить закрепление для мобильного меню (установите для параметра «Не вставлять элемент, когда экран меньше:» значение 651 пиксель).

У меня есть еще один плагин, называемый Easy Smooth Scroll Links, но как только мое меню становится липким, он больше не работает.

Это была ошибка в версиях до 2.0 и несовместимость с плагином. Это было исправлено в версии 2.0, но в устаревшем режиме эта ошибка все еще присутствует. Если по какой-то причине вам нужен режим Legacy Mode, для этой ошибки нет исправления, однако есть альтернативный обходной путь. Согласно сообщениям пользователей, у которых возникла эта проблема, плагин под названием Page Scroll To ID является достойной альтернативой Easy Smooth Scroll Links и работает с плагином Sticky Anything в устаревшем режиме.

По-прежнему не работает. Что могло быть не так?

Установите флажок «Debug Mode» в настройках плагина. Перезагрузите страницу, и вы можете увидеть ошибки в окне консоли браузера. Если вы использовали селектор, которого не существует, ИЛИ на странице их больше, вы получите уведомление об этом в консоли.

Можно ли иметь несколько липких элементов?

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

Что такое устаревший режим? Стоит ли мне его использовать?

В версии 2.0 плагина был представлен новый / улучшенный метод закрепления элементов. До этого липкий элемент был бы клонированной копией исходного элемента. Теперь сам элемент становится липким и больше не использует копирование и клонирование, что решает множество проблем.

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

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

ПРИМЕЧАНИЕ: при новой установке плагина по умолчанию будет отключен устаревший режим.Только ОБНОВЛЕНИЯ с 1.4 (или ранее) должны включать его по умолчанию.

Что такое динамический режим?

Этот режим доступен только в Legacy Mode, и чтобы правильно объяснить это, нам нужно немного углубиться в функциональность плагина. Так несите меня…

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

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

В исходной версии плагина клон создавался в момент загрузки страницы (но не был виден сразу). Затем, когда вы прокрутите вниз, он станет видимым (и останется наверху), а исходный элемент исчезнет из поля зрения.

Однако некоторые темы используют JavaScript для динамического создания элементов (в основном меню) для мобильных сайтов. При использовании этого метода меню не существует в исходном HTML-коде при загрузке страницы, но создается через некоторое время после полной загрузки страницы - во многих случаях эти меню будут создаваться ТОЛЬКО, когда экран больше ( или меньше), чем определенная ширина. В исходной версии плагина проблема заключалась бы в том, что исходный элемент (который вы хотите сделать закрепленным) мог не быть полностью создан при загрузке страницы, поэтому клон также не будет полностью функциональным.

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

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

(Все это может показаться ужасно запутанным. И это так! Было проделано много работы, чтобы исправить эту ерунду: начиная с версии 2.0 плагина используется совершенно другой метод для закрепления элементов, а динамический режим даже не проблема больше.)

Уф!

Мне нужна дополнительная помощь, пожалуйста!

Перейдите на форум поддержки плагина в WordPress.org и опубликовать сообщение (если возможно, укажите ссылку на свой сайт).

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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