Як створити прилипающее меню за допомогою CSS та JQuery

14

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

Як створити прилипающее меню за допомогою CSS та JQuery

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

З одного боку, існує безліч JQuery плагінів для створення липкого меню, з іншого, ми можемо самостійно написати таке меню всього лише парою рядків JQueryи CSS коду. У даному уроці ми розглянемо, як можна створити липке меню, як на JQuery, так і на CSS. Почнемо.

Спосіб на JQuery

У цій главі ми розглянемо, як за допомогою JQuery маніпулювати DOM, а також додати клас до меню, щоб зафіксувати його при проходженні певної точки. Передбачається, що ви вже знайомі з HTML5, так як ми будемо використовувати парочку тегів з п’ятої версії в нашій розмітці.

Розмітка

У нашій розмітці ми створимо хедер, в якому будуть міститися основні блоки: блок з класом demo-nav і слідом за ним блок з класом main-nav, в якому містяться посилання нашого меню. Потім необхідно обернути наш контент блоком з класом content. Будемо використовувати lorem ipsum як тексту.

Створенняприлипающегоменю

За допомогою jQuery
За допомогою CSS

Головна
Оназ
Профіль
Контакти

Основнойконтент!

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

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

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

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

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

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

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

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

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

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

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

Як видно, нічого особливого в нашій розмітки немає. Просто пара 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
}

Тепер давайте поглянемо на наш блок хедер меню. Необхідно визначити відносне позиціонування для панелі навігації. Встановимо висоту 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;
}

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

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;
}

Як завершальних штрихів додамо трохи медіа запитів до нашого хедеру і меню, зробивши більш чуйними блоки меню і контенту на маленьких екранах.

@all media 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’);
}
});
});

Спосіб CSS

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

Розмітка

Розмітка точно така ж, як і в прикладі з JQuery, однак ми будемо міняти позицію хедера і меню з допомогою CSS.

Створенняприлипающегоменю

За допомогою jQuery
За допомогою CSS

Головна
Оназ
Профіль
Контакти

Основнойконтент!

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

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

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

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

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

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

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

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

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

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

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

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;
}

Ще один спосіб на CSS

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

Висновок

От і все! У цьому уроці, я показав, як можна створити своє власне прилипающее меню за допомогою простого JQuery CSS. Не соромтеся і розбирайтеся в коді вище. Якщо у вас виникли питання, коментарі або пропозиції, пишіть про це в коментарях.