Плавающее меню. Java Script


Содержание

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

В последнее время некоторые сайты, такие как This is Brigade или All You , начали использовать динамическое анимированное меню, которое меняет размер при прокрутке страницы вниз. Уменьшение размера панели навигации оставляет больше места для контента. В этом уроке я покажу, как сделать такое плавающее меню, используя HTML5, CSS3 и немного jQuery.

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

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

Теперь добавим код для меню, а также некоторые другие детали в head нашего HTML-файла.

Создание базовой HTML-структуры

Мы начнем с написания основного HTML-кода, который нам понадобится. Отправной точкой будет очень простая структура HTML5.

В мы добавили мета-тег author, чтобы указать создателя файла; далее мы подключили знаменитый reset.css Эрика Мейера для того, чтобы сбросить дефолтные стили элементов в HTML-файле, получив для работы более чистый и простой документ. И, так как мы будем использовать JQuery позже, в последней строке элемента head мы подключаем его через JQuery CDN.

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

В мы использовали стандартный элемент HTML5 . Наш будет растягиваться на всю ширину и подстраиваться под большую и маленькую версию меню. Элементу header мы добавили класс «large», с помощью которого сможем изменять некоторые свойства CSS при переключении меню на уменьшенную версию. Элемент

Плавающее боковое меню — заплыв с jQuery

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

Реализация плавающего вертикального меню

Для реализации плавания меню я буду использовать JavaScript и его высшее воплощение — jQuery. Исторически так сложилось, что для данного сайта я использую jQuery версии 1.2.6, потому можно использовать мой пример на фреймворке моей версии и выше. Подключаем jQuery:

Примерно так выглядит HTML-код самого меню (за исключением технических моментов, не касающихся данной темы):

Ключевым моментом здесь является присвоение слою меню идентификатора «lmenu» — можно поименовать любым другим уникальным именем и далее обращаться к элементу по этому имени. Немного о стилях. Чтобы иметь возможность изменять положение по вертикали слою меню, ему надо задать абсолютное позиционирование. При этом надо учеть, что абсолютно позиционированные элементы не участвуют в разметке страницы (элементы могут накладываться друг на друга, если не задать дополнительные отступы). Вот мои стили для меню и контентной части (которая располагается справа от меню):

Значение «top: 357px;» было определено заранее. При помощи JavaScript. Для этого в страницу был вставлен следующий JS-код:

Этот скрипт отобразил в модальном окне свойство «top» моего меню — то значение, которое было принято при разметке страницы браузером изначально, без явного указания. Это число нам ещё пригодится. Теперь всё готово к тому, чтобы написать основной код, обеспечивающий эффект плавания меню.

Ключевую роль здесь играет функция $(‘#lmenu’).animate () — она анимировано изменяет свойство «top» нашего меню. — это время выполнения эффекта в миллисекундах. Задержку можно указать просто числом, но тогда меню при скроллинге дёргается.

Далее решено было добавить к меню кнопку «вверх» — так, чтобы эта кнопка появлялась тогда, когда меню начинает плыть вниз, и пропадала, когда меню доплывает до верхней части границы. К меню добавляем ещё один пункт:

При помощи стилей делаем этот пункт изначально невидимым:

Описываем функцию, которая будет выполняться при нажатии кнопки «Вверх»:

Здесь используется ещё не упомянутая переменная «scroll_top» — её значение будем получать во время скроллинга по странице:

При нажатии на кнопку «Вверх» запускается цикл, в котором значение проскролленности страницы уменьшается от текущего значения до нуля при помощи функции self.scroll (1,i). Для того, чтобы показать и скрыть кнопку «Вверх» в нужный момент используются следующие инструкции соответственно:

Собираем всё вышеописанное в кучу. Теперь без комментариев, чтобы не загружать код:

Сайт, для которого всё это делалось, сгорел в атмосфере, потому рабочий пример сейчас я вам даже не покажу. ��

Запись опубликована 12 декабря 2009 года. Пост окончен, но в рубрике «Web-кодинг» есть не менее интересные посты:

Tweet: ретвит этого поста (как это?) увеличивает долю добра на квадратный байт Интернета! Кнопки других социальных сервисов плавают слева, чтобы вы могли парой кликов поделиться прочитанным с друзьями !

RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.

На «Плавающее боковое меню — заплыв с jQuery» получено 16 отзывов

Просто чудеса программирования! Это очень удобно для пользователя — когда меню всегда перед глазами и есть возможность оказаться в начале страницы, нажав кнопку «вверх»! Молодец, круто зажёг)))

Спасибо, афтар, как всегда, жжот ��

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

Конкретный пример, на который есть ссылка в посте, проверял на Опере 10.00 alpha — меню плавает плавно. Пишите, пожалуйста, в каком браузере, в какой конкретно версии есть проблемы отображения. И ссылку на ваш пример, если есть

Столкнулся с проблемой,что происходит наложение слоей. меню накладывается на контент. присвоил в ксс шапке сайта блоку header значение relative. Далее у меня постоянно держался отступ от окна браузера.

Вот пару строк,которые спасли ситуацию.может пригодится кому =)

var menuBoundary = document.getElementById (‘menu’).offsetTop;

var floatTop = Math.max ($(document).scrollTop () — menuBoundary, 0);

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

Ключом здесь является функция Math.max,

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

П.С. ОБъедените если не трудно,забылся просто)

Вроде и так понятно ��

Ну если потом под пивко надумаю внести какие-либо коррективы.

В любом случае, спасибо

Спасибо, интересное решение,

а главное простое!

Наздоровье, Antonio. Вижу, у вас так же реализовано плаванье рекламы от Гугла

Почему когда изменяеш разрешение монитора меню «уезжает» в другое место

Как это можно исправить?

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

Я наверно немного неправильно выразился


На Опере 10 61 при прокручивании меню плывет вниз, но обратно возвращается не на то место с которого «стартовало», а нежу

На ИЕ8 положение меню выше чем должно быть

Аха, вижу. Скорее всего причина в том, что для #lmenu в стилях указано: top:18% — значение в процентах. Попробуйте задать значение в пикселях или других абсолютных величинах

Ваше SEO-мнение

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

плавающее меню

16.10.2015, 12:05

Плавающее меню на JavaScript
Ребята, мне необходимо сделать плавающее меню для сайта (курсача), пробовал сделать через CSS. Но.

При нажатии на якорь верхнее плавающее меню перекрывает часть контента
Здравствуйте! Помогите =) На одностраничном сайте есть верхнее плавающее меню, на странице есть.

Илон Маск рекомендует:  AnsiEndsStr - Функция Delphi

«Плавающее» значение option в select
Здравствуйте. Подскажите, пожалуйста, как средствами javascript (jquery) реализовать колебание.

Раскрывающееся меню — при открытии/закрытии вложенного меню закрывается все меню
Проблема во вложенном меню. При открытии/закрытии вложенного меню закрывается все меню. Надо, чтобы.

Фиксируем меню при прокрутке страницы

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

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно — код состоит всего из нескольких строчек.

Вариант №1

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

Для начала нужно создать страницу.

Примерная схема блоков страницы (вариант №1)

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

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

Вариант №2 (Добавлено 18.02.2015)

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

При прокрутке страницы к началу, меню также «движется» вместе с содержимым, а когда достигает низа, оно фиксируется.

Примерная схема блоков страницы (вариант №2)

Нам потребуется следующий CSS-код.

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

В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.

Далее в скрипте в зависимости от значения переменной top , блоку с навигацией устанавливается значение CSS-правил top или bottom .

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

Ну вот, собственно, и всё.

Я создал 2 простые странички для демонстрации работы обоих вариантов фиксированного меню. При желании вы сможете ознакомиться с ними:

Создаем фиксированное меню на CSS, jQuery (+ проблема с якорями)

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

В посте рассмотрю два вопроса:

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

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

Фиксированное меню на CSS + HTML

В общем случае при создании простого горизонтального фиксированного меню для сайта вам нужно использовать CSS свойства position:fixed и top:0. Также основному блоку контента придется задать верхний отступ margin-top.

Итак, возьмем простую структуру HTML страницы:

Какой-то текст для примера.

В файл стилей CSS добавляете:

В результате получится такая картинка:

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

Основные детали кода выше, как я уже говорил, это position:fixed, top:0 и margin-top: 60px. Верхний отступ может быть другим, если высота меню у вас меньше/больше.

Кстати, если требуется зафиксировать меню внизу страницы, заменяете код на:

Все то же самое, только вместо top указывается bottom:0. Единственное, нужно будет погуглить как правильно сделать отступ контенту снизу чтобы он тот скрывался за плашкой меню. Решение с margin-bottom:30px; почему-то не сработало.

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

Второй пример чуть более сложный — с применением библиотеки jQuery. Она встречается на многих сайтах, плюс в большинстве шаблонов WordPress и других CMS подключена изначально. Из Javascript функций здесь используется всего 2, поэтому данное решение можно считать достаточно легким по сравнению с некоторыми другими из интернета. Англоязычный исходник найдете здесь, а вот что в итоге должно получиться:

Алгоритм внедрения данного фиксированного меню с jQuery состоит из трех шагов. Первым делом добавляем HTML код:

Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.


В стилях размещаете следующие строки:

Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.

Логика работы функций следующая — когда пользователь находится или прокручивает страницу ниже 136 пикселей сверху, то для меню добавляется класс f-nav, а в нем прописаны знакомые нам position:fixed и top:0.

Значение в 136 пикселей можно менять в зависимости от вашего дизайна. Кроме того, если вы интегрируете данный пример в свое готовое горизонтальное фиксированное меню на сайте, то указывайте соответствующие значения классов в JS и CSS. Если у вас возникли какие-то нюансы с реализацией кода, загляните в комментарии к оригинальной статье — там есть парочка подсказок.

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

Прокрутка до якоря с фиксированным меню

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

Данная ситуация чаще всего возникает в лендингах. На скриншоте проблема заметна более наглядно:

На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.

Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor:

Some text

Далее для него в стилях прописываете:

Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.

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

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

Если есть вопросы или что добавить по теме, пишем в комментариях.

Утащил себе второй вариант с jQuery и CSS, пока все работает норм. Спасибо.

Ни фига он не работает. Перенес один к одному на чистую страницу. Все ему «фиолетово».
Как уезжало меню, так и уезжает.
Полная хренатень. Речь о втором скрипте.

Олег, во-первых, можете попробовать скрипт с исходника (там есть ссылка на оригинальную статью). Вторая мысль — возможно, с 2012 кое-что все же поменялось и работа кода нарушилась, хотя я лично тестировал все около года назад и проблем не было. В крайнем случае придется воспользоваться другими сниппетами — третий (там где пример в CodePen) точно рабочий, как видите.

Tod’s Blog создан для тех, кто хочет научиться зарабатывать в сети и активно интересуется темой монетизации сайтов.

Основные категории блога: партнерки, контекст, биржи ссылок, CPA, веб-разработка и создание сайтов, фриланс, SEO и SMO продвижение, блоггинг и т.п. Информация пригодятся как полным новичкам, так и тем, кто неплохо разбирается в теме онлайн заработка.

Плавающее меню на сайте с помощью css

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

Проще всего сделать такое меню с помощью обычного css.

Рассмотрим на живом примере. Допустим у нас такая структура меню (горизонтальное, сверху экрана).

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

position:fixed; — позволяет прокручивать меню сверху страницы
top:0px; — указывает, что меню начинается с самого верха страницы.
left:0px; — сдвигает меню в левую часть экрана

Таким не хитрым методом мы можем зафиксировать любое меню сверху экрана.

Полный код примера со стилями:

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

Илон Маск рекомендует:  Что такое код getx

На заметку.

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

jQuery-плагины плавающих меню: держите свое время всегда под рукой!

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

Как вы думаете, было бы удобно, если бы меню сайта «прилипло» к верху окна, например, чтобы посетитель всегда мог воспользоваться им, где бы он ни находился на странице? Если вам нравится такое решение, и вы уже сейчас хотите сделать «плавающее» меню на своем сайте, то у нас для вас есть новость. Ниже мы подготовили для вас коллекцию бесплатных jQuery-плагинов для создания таких меню. Скачивайте их прямо сейчас, и позвольте вашим посетителям насладиться удобством использования вашего сайта.

Плагин Floating Menu создает виджет прилепленного плавающего меню при помощи jQuery из любого пользовательского меню в WordPress. Вы можете создавать даже несколько разных плавающих меню для каждой страницы – расположение каждой вкладки можно указать в панели управления виджетами. Меню также может быть активировано при наведении курсора мыши или при нажатии.

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

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

С помощью этого простого jQuery-плагина вы можете реализовать скользящую «плавающую» функциональную панель. Все что от вас требуется, это добавить простой CSS код и одну строку кода js! Плагин отлично работает как с плавающими элементами, так и с позиционированными, во всех современных браузерах.

Предлагаем вам простое навигационное меню, которое следует за прокруткой страницы и раскрывается при наведении курсора мыши. Оно разработано при помощи CSS и jQuery.

06. Absolute Floating Menu: jQuery-плагин плавающего меню

Скрипт Absolute Floating Menu так же является jQuery-плагином, который можно применить посредством следующих этапов:

— скачать, загрузить на сервер и указать jQuery-библиотеку в HTML HEAD.
— скачать версию 1.2, загрузить на сервер отдельным файлом, и указать его в шапке страницы после библиотеки jQuery.
— ссылка: http://www.jtricks.com/javascript/navigation/floating.html

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

Отличный пример того, как можно создавать плавающие меню при помощи jQuery, в котором описывается весь процесс.

Здесь вы найдете отличное руководство о том, как реализовать на своем сайте jQuery-плавающее меню с прокруткой.

10. Разрабатываем плавающее меню при помощи jQuery и CSS — больше не работает

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

Этот удобный плагин позволяет вам реализовать меню, которое будет следовать за областью просмотра по мере прокрутки страницы блога на Wordress. Этот плагин совместим с WordPress версии 3.4, и использует jQuery для анимаций и скроллинга, а также миниатюрный css-файл для оформления.

Это плавающее меню на jQuery всегда появляется в поле видимости на странице. Его очень просто установить при помощи отрывка кода.

Это кросс-браузерное меню всегда будет оставаться на виду, в левом углу браузера. Давайте рассмотрим наиболее примечательные свойства этого скрипта:


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

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

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Плавающее меню действий для отмеченных элементов списка

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

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

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

Данный урок был сделан под впечатлением подобной функции в мобильной версии Gmail. Если открыть Gmail в браузере Safari на iPhone или iPod Touch, то можно заметить маленькое и удобное меню.

Разметка

Для разметки создадим таблицу с ID и несколькими чекбоксами в ячейках:

Для меню действий нужно сделать следующую разметку:

div с классом submenu появляется, когда происходит нажатие кнопки мыши на ID toggleBoxMenu.

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

Изначально мы хотим скрыть все меню. Таким образом div actionsBox будет иметь следующий стиль:

Основное меню с кнопками будет иметь стиль:

Здесь активно используется CSS 3: градиент, скругленные углы, тени текста и прямоугольника создают прекрасный эффект, который не нуждается в изображениях.
Кнопки будут иметь следующий стиль:

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

Тег span в меню предназначен для вывода количества выбранных элементов списка:

Подменю изначально скрыты. Мы задаем им окантовку со скругленными углами внизу:

Последний пункт также будет иметь скругленные углы внизу:

Первый пункт не будет иметь границы сверху:

Пункт открыть/закрыть бедет иметь следующий стиль:

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

JavaScript

Сначала включим скрипты jQuery и jQuery UI, так как мы собираемся сделать наше маленькое меню перемещаемым.

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

Также мы будем изменять класс строки таблицы на “selected”, когда чекбокс становиться отмеченным.

Добавим следующую функцию:

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

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

P.S.: Для того, чтобы получить полное представление о работе меню, выберите несколько элементов, перетащите меню в другое место и прокрутите страницу.Вы увидите как меню следует за прокруткой страницы и вновь становится на свое место.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2010/05/31/sliding-checkbox-actions-menu-with-jquery/
Перевел: Сергей Фастунов
Урок создан: 14 Июля 2010
Просмотров: 36803
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

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

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

6 jQuery плагинов для создания фиксированного меню

Сегодня поговорим об очень распостраненных, на сегодняшний день, jQuery плагинах фиксированных меню, которые встречаются все чаще и чаще на страницах блогов и прочих ресурсов. Использование таких панелей навигации вполне оправдано. Одной из основных причин активного использования этих jQuery плагинов является то, что меню всегда под рукой посетителя, даже если он находится внизу страницы. К тому же фиксированное меню занимает немного места и не отвлекает внимания от основного контента. Если говорить в целом — фиксированное меню улучшает юзабилити сайта.
Я собрал коллекцию из лучших, на мой взгляд, бесплатных jQuery плагинов для реализации фиксированного меню. Старался, чтоб каждый из плагинов был чем-то уникален, чтобы любой плагин из подборки можно было применить именно в вашем проекте. В коллекции можно найти как простые, так и более сложные плагины с анимацией и т. д.
Если же вам нужно совсем простое фиксированное меню, что-то вроде того, как у нас реализована липкая панель с социальными кнопками, можно обойтись и без jQuery плагинов, ведь нагружать страницу скриптами — это не очень хорошо, но об этом мы поговорим в следующих статьях. Подписывайтесь на наш RSS канал или на страницы в социальных сетях, чтобы не пропустить интересные материалы.
Итак. К вашему вниманию 6 jQuery плагинов для создания фиксированного меню.

Илон Маск рекомендует:  Iis система безопасности

Bootstrap Auto-Hiding Navbar

Адаптивное, выпадающее фиксированное меню для сайтов на css-фреймворке Bootstrap. Это новый взгляд на саму концепцию фиксированных панелей. «Фишкой» является то, что при скроллинге страницы вниз, панель не видно, но как только мы начинаем крутить ролик вверх, оно появляется. Если вы пользуетесь браузером «Chrome» на своем смартфоне, то знакомы с таким эффектом. Там по такому же принципу работает адресная строка.
Bootstrap Auto-Hiding Navbar — отличное решение для адаптивных сайтов, ведь при просмотре сайта фиксированная полоска не перекрывает контент.

Auto-Hide Sticky Header

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

On Scroll Header Effects

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

On-Scroll Animated Header


Хороший плагин для реализации липкой панели навигации. Он работает следующим образом: находясь на самом начале страницы, мы видим высокую шапку, в которой находится логотип и меню. При прокрутке область шапки со всеми элементами, включая лого и навигацию, с помощью свойств CSS3 плавно уменьшается и становится узкой полоской, прилипшей к верху экрана.

Headhesive.js

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

StickUp

jQuery плагин липкого меню работает точно также, как и панель с социальными кнопками, которую вы сейчас можете наблюдать на этой странице вверху экрана. Также он очень похож на плагин нашей разработки для фиксации блока при прокрутке страницы, который мы на днях выложили в свободный доступ. Но в данном случае — это меню для навигации по экранам. Этот Jquery плагин отлично подойдет для установки на сайт одностраничника или Landing Page.

Плавающее боковое меню — заплыв с jQuery

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

Реализация плавающего вертикального меню

Для реализации плавания меню я буду использовать JavaScript и его высшее воплощение — jQuery. Исторически так сложилось, что для данного сайта я использую jQuery версии 1.2.6, потому можно использовать мой пример на фреймворке моей версии и выше. Подключаем jQuery:

Примерно так выглядит HTML-код самого меню (за исключением технических моментов, не касающихся данной темы):

Ключевым моментом здесь является присвоение слою меню идентификатора «lmenu» — можно поименовать любым другим уникальным именем и далее обращаться к элементу по этому имени. Немного о стилях. Чтобы иметь возможность изменять положение по вертикали слою меню, ему надо задать абсолютное позиционирование. При этом надо учеть, что абсолютно позиционированные элементы не участвуют в разметке страницы (элементы могут накладываться друг на друга, если не задать дополнительные отступы). Вот мои стили для меню и контентной части (которая располагается справа от меню):

Значение «top: 357px;» было определено заранее. При помощи JavaScript. Для этого в страницу был вставлен следующий JS-код:

Этот скрипт отобразил в модальном окне свойство «top» моего меню — то значение, которое было принято при разметке страницы браузером изначально, без явного указания. Это число нам ещё пригодится. Теперь всё готово к тому, чтобы написать основной код, обеспечивающий эффект плавания меню.

Ключевую роль здесь играет функция $(‘#lmenu’).animate () — она анимировано изменяет свойство «top» нашего меню. — это время выполнения эффекта в миллисекундах. Задержку можно указать просто числом, но тогда меню при скроллинге дёргается.

Далее решено было добавить к меню кнопку «вверх» — так, чтобы эта кнопка появлялась тогда, когда меню начинает плыть вниз, и пропадала, когда меню доплывает до верхней части границы. К меню добавляем ещё один пункт:

При помощи стилей делаем этот пункт изначально невидимым:

Описываем функцию, которая будет выполняться при нажатии кнопки «Вверх»:

Здесь используется ещё не упомянутая переменная «scroll_top» — её значение будем получать во время скроллинга по странице:

При нажатии на кнопку «Вверх» запускается цикл, в котором значение проскролленности страницы уменьшается от текущего значения до нуля при помощи функции self.scroll (1,i). Для того, чтобы показать и скрыть кнопку «Вверх» в нужный момент используются следующие инструкции соответственно:

Собираем всё вышеописанное в кучу. Теперь без комментариев, чтобы не загружать код:

Сайт, для которого всё это делалось, сгорел в атмосфере, потому рабочий пример сейчас я вам даже не покажу. ��

Запись опубликована 12 декабря 2009 года. Пост окончен, но в рубрике «Web-кодинг» есть не менее интересные посты:

Tweet: ретвит этого поста (как это?) увеличивает долю добра на квадратный байт Интернета! Кнопки других социальных сервисов плавают слева, чтобы вы могли парой кликов поделиться прочитанным с друзьями !

RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.

На «Плавающее боковое меню — заплыв с jQuery» получено 16 отзывов

Просто чудеса программирования! Это очень удобно для пользователя — когда меню всегда перед глазами и есть возможность оказаться в начале страницы, нажав кнопку «вверх»! Молодец, круто зажёг)))

Спасибо, афтар, как всегда, жжот ��

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

Конкретный пример, на который есть ссылка в посте, проверял на Опере 10.00 alpha — меню плавает плавно. Пишите, пожалуйста, в каком браузере, в какой конкретно версии есть проблемы отображения. И ссылку на ваш пример, если есть

Столкнулся с проблемой,что происходит наложение слоей. меню накладывается на контент. присвоил в ксс шапке сайта блоку header значение relative. Далее у меня постоянно держался отступ от окна браузера.

Вот пару строк,которые спасли ситуацию.может пригодится кому =)

var menuBoundary = document.getElementById (‘menu’).offsetTop;

var floatTop = Math.max ($(document).scrollTop () — menuBoundary, 0);

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

Ключом здесь является функция Math.max,

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

П.С. ОБъедените если не трудно,забылся просто)

Вроде и так понятно ��

Ну если потом под пивко надумаю внести какие-либо коррективы.

В любом случае, спасибо

Спасибо, интересное решение,

а главное простое!

Наздоровье, Antonio. Вижу, у вас так же реализовано плаванье рекламы от Гугла

Почему когда изменяеш разрешение монитора меню «уезжает» в другое место

Как это можно исправить?

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

Я наверно немного неправильно выразился

На Опере 10 61 при прокручивании меню плывет вниз, но обратно возвращается не на то место с которого «стартовало», а нежу

На ИЕ8 положение меню выше чем должно быть

Аха, вижу. Скорее всего причина в том, что для #lmenu в стилях указано: top:18% — значение в процентах. Попробуйте задать значение в пикселях или других абсолютных величинах

Ваше SEO-мнение

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL