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

Дата публикации: 2015-08-10

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

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

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

Способ на JQuery

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

Разметка

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

<header>
<h1>Создание<span>прилипающего</span>меню</h1>
    <nav class="demo-nav">
        <a href="index.html" class="active">Спомощью jQuery</a>
        <a href="index2.html">Спомощью CSS</a>
    </nav>
</header>
 
<nav class="main-nav">
<div class="container">
 <a href="#">Главная</a>
  <a href="#">Онас</a>
  <a href="#">Профиль</a>
  <a href="#">Контакты</a>
  </div>
</nav>
 
<div class="content">
 
<h2>Основнойконтент!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>

<h1>Создание<span>прилипающего</span>меню</h1>

<a href="index.html" class="active">Спомощью jQuery</a>

<a href="index2.html">Спомощью CSS</a>

</nav>

</header>

<a href="#">Главная</a>

<a href="#">Профиль</a>

<a href="#">Контакты</a>

</div>

</nav>

<h2>Основнойконтент!</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</div>

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

CSS

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

body {
    font:16px/1.5'Raleway',Arial,sans-serif;
    color:#fff;
    margin:0;
    padding:0
}
 
h1{
    font-size:50px;
    font-weight:300;
    text-align:center;
    font-weight:700
}
 
span {
    color:#27ae60;
    font-weight:700
}
 
h2{
    font-size:35px;
    text-align:left;
    margin-left:-20px
}
 
nav.demo-nav {
    width:350px;
    margin:0auto;
    display:block
}
 
nav.demo-nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family:'Lato',sans-serif;
    color:#27ae60;
    font-weight:400;
    padding:5px15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2pxsolid#ecf0f1;
    border-radius:none
}
 
nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#27ae60
}

body {

font:16px/1.5'Raleway',Arial,sans-serif;

color:#fff;

margin:0;

padding:0

}

h1{

font-size:50px;

font-weight:300;

text-align:center;

font-weight:700

}

span {

color:#27ae60;

font-weight:700

}

h2{

font-size:35px;

text-align:left;

margin-left:-20px

}

nav.demo-nav {

width:350px;

margin:0auto;

display:block

}

nav.demo-nav a {

font-size:19px;

display:inline-block;

text-align:center;

font-family:'Lato',sans-serif;

color:#27ae60;

font-weight:400;

padding:5px15px;

text-transform:uppercase;

border-radius:2px;

letter-spacing:1px;

text-decoration:none;

margin-right:10px;

border:2pxsolid#ecf0f1;

border-radius:none

}

nav a.active,nav a:hover {

background:#ecf0f1;

color:#27ae60

}

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

header {
    height:250px;
    background:#2ecc71;
    padding:23px0
}
 
nav.main-nav {
    background:#fff;
    height:60px;
    border-bottom:1pxsolid#dadada;
    text-align: center;
}
 
nav.main-nav a {
    font-family:'Lato',sans-serif;
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:15px19px;
    color:#27ae60;
}
 
.container {
    display: inline;
    margin:0auto;
}

header {

height:250px;

background:#2ecc71;

padding:23px0

}

nav.main-nav {

background:#fff;

height:60px;

border-bottom:1pxsolid#dadada;

text-align: center;

}

nav.main-nav a {

font-family:'Lato',sans-serif;

font-size:20px;

text-decoration:none;

display:inline-block;

padding:15px19px;

color:#27ae60;

}

.container {

display: inline;

margin:0auto;

}

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

nav.main-nav .stickytop {
    position:fixed;
    top:0
}

nav.main-nav .stickytop {

position:fixed;

top:0

}

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

.content {
    color:#222;
    padding:50px;
    -webkit-column-count:3;
/* Chrome, Safari, Opera */
    -moz-column-count:3;
/* Firefox */
    column-count:3;
    -webkit-column-gap:40;
    column-gap:40px;
}
 
.content h2{
    margin:0;
}

.content {

color:#222;

padding:50px;

-webkit-column-count:3;

/* Chrome, Safari, Opera */

-moz-column-count:3;

/* Firefox */

column-count:3;

-webkit-column-gap:40;

column-gap:40px;

}

.content h2{

margin:0;

}

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

@media all and (min-width: 360px) and (max-width: 480px) {
    header {
        padding:5px055px;
    }
 
    nav.main-nav a {
        font-size:17px;
    }
 
    nav.main-nav {
        height:55px;
    }
 
    .container {
        margin:0auto;
        width:50%;
 
    }
 
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1;
    }
}
 
@media screen and (max-width: 480px) {
    header {
        padding:5px 0 55px;
    }
 
    nav.main-nav a {
        font-size:17px;
    }
 
    nav.main-nav {
        height:55px;
    }
 
    .container {
        width:92%;
    }
 
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}

@media all and (min-width: 360px) and (max-width: 480px) {

header {

padding:5px055px;

}

nav.main-nav a {

font-size:17px;

}

nav.main-nav {

height:55px;

}

.container {

margin:0auto;

width:50%;

}

.content {

-webkit-column-count:1;

/* Chrome, Safari, Opera */

-moz-column-count:1;

/* Firefox */

column-count:1;

}

@media screen and (max-width: 480px) {

header {

padding:5px 0 55px;

}

nav.main-nav a {

font-size:17px;

}

nav.main-nav {

height:55px;

}

.container {

width:92%;

}

.content {

-webkit-column-count:1;

/* Chrome, Safari, Opera */

-moz-column-count:1;

/* Firefox */

column-count:1

}

Скрипт

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

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

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

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

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

$(function(){

$(window).scroll(function() {

if($(this).scrollTop() >= 290) {

$('nav.main-nav').addClass('stickytop');

}

else{

$('nav.main-nav').removeClass('stickytop');

}

});

Способ на CSS

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

Разметка

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

<header>
<h1>Создание<span>прилипающего</span>меню</h1>
    <nav class="demo-nav">
        <a href="index.html">Спомощью jQuery</a>
        <a href="index2.html" class="active">Спомощью CSS</a>
    </nav>
</header>
 
<nav class="main-nav">
<div class="container">
  <a href="#">Главная</a>
  <a href="#">Онас</a>
  <a href="#">Профиль</a>
  <a href="#">Контакты</a>
</div>
</nav>
 
<div class="content">
<h2>Основнойконтент!</h2>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 
</div>

<h1>Создание<span>прилипающего</span>меню</h1>

<a href="index.html">Спомощью jQuery</a>

<a href="index2.html" class="active">Спомощью CSS</a>

</nav>

</header>

<a href="#">Главная</a>

<a href="#">Профиль</a>

<a href="#">Контакты</a>

</div>

</nav>

<h2>Основнойконтент!</h2>

</div>

CSS

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

nav.main-nav {
    background:#fff;
    height:60px;
    z-index:170;
    margin:0auto;
    border-bottom:1pxsolid#dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

nav.main-nav {

background:#fff;

height:60px;

z-index:170;

margin:0auto;

border-bottom:1pxsolid#dadada;

width:100%;

position:fixed;

top:0;

left:0;

right:0;

text-align: center;

}

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

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

Заключение

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

Автор: Sam Norton

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

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

* Признана экстремистской организацией и запрещена в Российской Федерации.

Метки: css, меню

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

Способ на JQuery

Разметка

CSS

Скрипт

Способ на CSS

Разметка

CSS

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

Заключение

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

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

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

Материалы

Мы в соц. сетях

Связь

Информация