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

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

От автора: в настоящее время в интернете все больше набирает популярность фиксированное или «прилипающее» меню. Меню в таком случае прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему.

демо

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

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

Способ на JQuery

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Разметка

В нашей разметке мы создадим хедер, в котором будут содержаться основные блоки: блок с классом demo-nav и следом за ним блок с классом main-nav, в котором содержатся ссылки нашего меню. Затем необходимо обернуть наш контент блоком с классом content. Будем использовать lorem ipsum в качестве текста.

Как видно, ничего особенного в нашей разметке нет. Просто пара HTML5 тегов и классов.

CSS

Давайте предадим нашей разметке форму. Напишем базовые стили для основных элементов, таких как body, header, хедер самого меню и т.д.

Теперь давайте взглянем на наш блок хедер меню. Необходимо задать относительное позиционирование для панели навигации. Установим высоту в 60px и ширину в 100%. Также добавим нижнюю границу шириной в 1px и стили для ссылок с произвольными внутренними отступами.

Затем мы создадим специальный класс stickytop с фиксированным позиционированием. Это потребуется в дальнейшем в нашем коде JQuery.

Перейдем к основной зоне контента. Установим padding в 50px для блока .content и количество колонок 3. Column-gap отвечает за размер пространства между колонок.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Скрипт

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

Обратите внимание: мы используем библиотеку JQuery, не забудьте подключить ее в шапке с помощью Google Hosted Libraries или самостоятельно, добавив файл jQuery.js в соответствующую директорию.

В коде ниже метод $window.scroll() останавливается на отметке в 290px и добавляет класс stickytop к нашему основному меню, иначе, если условие не сработало, класс будет удален.

Попробуйте добавить код ниже прямо перед закрывающим тегом body, не забудьте обернуть код в теги script.

Способ на CSS

Теперь, когда мы знаем, как создать прилипающее меню с помощью JQuery, давайте посмотрим, как сделать такое же меню, но с помощью CSS.

Разметка

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

CSS

CSS почти такой же, как в примере с JQuery за исключением nav.main-nav. Необходимо добавить фиксированное позиционирование. Ниже представлен код.

Еще один способ на CSS

Для пользователей Chrome было добавлено новое значения для свойства position: sticky, которое создает такой же эффект прилипания, как код JQuery выше. Тем не менее, данное свойство по умолчанию еще не установлено, и я рекомендую вам прочесть статью, чтобы лучше ознакомиться с этим свойством. Чтобы узнать, поддерживает ли ваш браузер данное свойство, пройдите по ссылке.

Заключение

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

Автор: Sam Norton

Источник: http://designmodo.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

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

Получить

Метки: ,

Похожие статьи:

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

Комментарии Facebook:

Комментарии (3)

  1. Евгений

    Только при обновлении страницы оно не липнет сразу. Появляется только после скролла страницы.

    • Lulizia

      Есть ли какие-нибудь способы решить эту проблему, кроме как визуально скрыть?

  2. Ильнур

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

    $(function(){
    if ($('nav.main-nav').offset().top >= 290) {
    $('nav.main-nav').addClass('stickytop');
    }
    $(window).scroll(function() {
    if($(this).scrollTop() >= 290) {
    $('nav.main-nav').addClass('stickytop');
    }
    else{
    $('nav.main-nav').removeClass('stickytop');
    }
    });
    });

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree