Плавающее меню на jQuery

Плавающее меню на jQueryОчень часто, на многих сайтах, можно встретить так называемые "плавающие" меню или их еще называют фиксированными меню.

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

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

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

Делать мы все будем средствами jQuery. Потому что, это самый простой способ, ведь скрипт занимает всего лишь несколько строк кода.

Смотреть видеоурок

Еще один плюс реализации плавающего меню на jQuery - кроссбраузерность. Данное меню будет нормально отображаться в Chrome, Firefox, Opera, Safari, Яндекс.Браузер и IE7+.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийОдин комментарий

роман 18 октября 2014 г. в 01:06

СПАСИБО!!! Это лучшее решение, лучшее объяснение. Я смог -)

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад