Всем привет! Sticke меню, или прилипающее меню, имеет устойчивую популярность в современном сайтостроении. Это такой вид меню, когда оно прилипает к определенной позиции и остается видимым даже при прокрутке страницы, тем самым обеспечивая постоянный доступ к нему. Существует множество JQuery плагинов для создания липкого меню. Здесь я расскажу, как самостоятельно написать такое меню с помощью JQuery и CSS.
Способ на JQuery
В этой главе мы рассмотрим, как с помощью JQuery манипулировать DOM, а также добавить класс к меню, чтобы зафиксировать его при прохождении определенной точки.
1. Разметка
В нашей разметке мы создадим хедер, в котором будут содержаться основные блоки: блок с классом demo-nav и следом за ним блок с классом main-nav, в котором содержатся ссылки нашего меню. Затем необходимо обернуть наш контент блоком с классом content.
<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>
2. 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;
}
В качестве завершающих штрихов добавим немного медиа запросов к нашему хедеру и меню, сделав более отзывчивыми блоки меню и контента на маленьких экранах.
@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
}
}
3. Скрипт
Чтобы добиться эффекта плавающего прилипающего меню мы будем использовать самописную функцию, которая будет срабатывать в определенной точке на экране.
Обратите внимание: мы используем библиотеку 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.
1. Разметка
Разметка точно такая же, как и в примере с 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>
2. 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;
}
Источник: https://designmodo.com/demo/stickynavigation/, https://webformyself.com/kak-sozdat-prilipayushhee-menyu-s-pomoshhyu-css-ili-jquery/