Как сделать чтобы меню сайта двигалось вместе с прокруткой
Перейти к содержимому

Как сделать чтобы меню сайта двигалось вместе с прокруткой

  • автор:

Как сделать прокрутку горизонтального меню при прокрутке страницы по вертикали?

Используется библиотека jquery последний версии. Задача заключается в следующем: Есть горизонтальное меню с прокруткой, то есть элементы уходят за экран. Ссылки в меню сделаны якорями и ведут на блоки на странице. Сейчас есть отслеживание элемента меню при прокрутке по странице, то есть если блок находится на экране вверху, пункту меню присваивается класс «active», при прокрутке ниже класс переходит другому пункту, в соответсвии с блоком. Но появляется проблема — при прокрутке ниже по сайту — не двигается меню (горизонтальное), то есть становится не видно, какой пункт меню сейчас. Попытался реализовать отслеживание через вот такую конструкцию:

jQuery(window).scroll(function() < var scrollToOld = 0; var $sections = $('section'); $sections.each(function(i,el)< var top = $(el).offset().top-10; var bottom = top +$(el).height(); var scroll = $(window).scrollTop(); var if( scroll >top && scroll < bottom)< $('a.active--products-category-menu').removeClass('active--products-category-menu'); $('a[href="#'+id+'"]').addClass('active--products-category-menu'); var idElement = $('a[href="#'+id+'"]').attr('id'); var iddiv = $('.active--products-category-menu').parent().attr("id"); //var iddiv = $('.active--products-category-menu').parent().attr("id"); var scrollTo = $('#'+idElement).offset().left; var link = $('a[href="#'+id+'"]'); $( ".wrapper-product-category-menu" ).scrollLeft( scrollTo ); console.log('ID элемента секции id '+id); console.log('Координаты scrollTo '+scrollTo); console.log('ID элемента idElement '+idElement); console.log('ID родителя iddiv '+iddiv); console.log('#'+idElement); 
  1. Почему координаты разные, что с ними происходит?
  2. Как в целом правильно реализовать задумку? Пример, как это выглядит в яндекс еде в приложении: https://cloud.mail.ru/public/MdQu/nLpdRauoH

Отслеживать

задан 12 мар в 10:48

Дмитрий Храмов Дмитрий Храмов

21 2 2 бронзовых знака

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

– user587008

19 мар в 4:24

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

  • html
  • css
  • jquery

Горизонтальное меню для сайта

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

Как сделать горизонтальное меню: разметка и примеры оформления

  • Содержание:
  • HTML-разметка и базовые стили для горизонтального меню
  • 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
  • 2. Адаптивное меню для свадебного сайта
  • 3. Адаптивное меню с фестонами
  • 4. Адаптивное меню на ленточке
  • 5. Адаптивное меню с логотипом по середине
  • 6. Адаптивное меню с логотипом слева

HTML-разметка и базовые стили для горизонтального меню

HTML разметка для горизонтальной навигации

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

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ >a 

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.

Способ 2. li

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 3. li

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed'); .menu-main < list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; >.menu-main li .menu-main li:after < content: "|"; color: #606060; display: inline-block; vertical-align:top; >.menu-main li:last-child:after .menu-main a < text-decoration: none; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; >.menu-main a, .menu-main a:visited .menu-main a.current, .menu-main a:hover .menu-main a:before, .menu-main a:after < content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; >.menu-main a:hover:before, .menu-main .current:before .menu-main a:hover:after, .menu-main .current:after @media (max-width: 550px) < .menu-main .menu-main li .menu-main li:after .menu-main a < padding: 25px 0 20px; margin: 0 30px; >>

2. Адаптивное меню для свадебного сайта

@import url('https://fonts.googleapis.com/css?family=PT+Sans'); .top-menu < position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; >.top-menu:before, .top-menu:after < content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; >.top-menu:after < border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; >.menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; >.menu-main:before, .menu-main:after < content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); >.menu-main:before .menu-main:after .menu-main li < display: inline-block; padding: 5px 0; >.menu-main a < text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: 'PT Sans', sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; >.menu-main .current, .menu-main a:hover < border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; >@media (max-width: 500px) < .menu-main li >

3. Адаптивное меню с фестонами

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; >.menu-main:after < content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; >.menu-main li .menu-main a < text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: 'PT Sans Caption', sans-serif; color: #777777; transition: .3s linear; position: relative; >.menu-main a:before, .menu-main a:after < content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; >.menu-main a:before .menu-main a:after .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after .menu-main a.current, .menu-main a:hover @media(max-width:680px) < .menu-main li >

4. Адаптивное меню на ленточке

@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .top-menu < margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); >.top-menu:before, .top-menu:after < content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; >.top-menu:before < top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); >.top-menu:after < bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); >.menu-main < list-style: none; padding: 0; margin: 0; text-align: center; >.menu-main:before, .menu-main:after < content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; >.menu-main:before < left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); >.menu-main:after < right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); >.menu-main li < display: inline-block; margin-right: -4px; >.menu-main a < text-decoration: none; display: inline-block; padding: 15px 30px; font-family: 'PT Sans Caption', sans-serif; color: white; transition: .3s linear; >.menu-main a.current, .menu-main a:hover @media (max-width: 680px) < .top-menu .menu-main li < display: block; margin-right: 0; >.menu-main:before, .menu-main:after .menu-main a >

5. Адаптивное меню с логотипом по середине

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < position: relative; background: rgba(34,34,34,.2); >.menu-main < list-style: none; margin: 0; padding: 0; >.menu-main:after < content: ""; display: table; clear: both; >.left-item .right-item .navbar-logo < position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.menu-main a < text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: white; transition: .3s linear; >.menu-main a:hover @media (max-width: 830px) < .menu-main < padding-top: 90px; text-align: center; >.navbar-logo < position: absolute; left: 50%; top: 10px; transform: translateX(-50%); >.menu-main li < float: none; display: inline-block; >.menu-main a < line-height: normal; padding: 20px 15px; font-size: 16px; >> @media (max-width: 630px) < .menu-main li >

6. Адаптивное меню с логотипом слева

@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; >.top-menu:after < content: ""; display: table; clear: both; >.navbar-logo .menu-main < list-style: none; margin: 0; padding: 0; float: right; >.menu-main li .menu-main a < text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; >.menu-main a:before < content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; >.menu-main a:hover:before @media (max-width: 660px) < .menu-main < float: none; padding-top: 20px; >.top-menu < text-align: center; padding: 20px 0 0 0; >.menu-main a .menu-main a:before > @media (max-width: 600px) < .menu-main li >

Вертикальное меню для сайта

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

* .widget < padding: 20px 30px; background: white; font-family: 'Roboto', sans-serif; >.widget-title < text-transform: uppercase; letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; >.widget-list < padding: 0; list-style: none; >.widget-list a:before < content: "\2014"; margin-right: 14px; >.widget-list a < text-decoration: none; outline: none; display: block; padding: 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; >.widget-list a:hover

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

.metro < list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; >.metro li .metro ul < margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; >.metro ul:before, .metro ul:after < content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relative; display: block; left: -9px; >.metro ul:before < transform: rotate(-45deg); margin-top: -15px; >.metro ul:after < transform: rotate(45deg); bottom: -20px; >.metro ul li .metro ul li:first-child < margin-top: -5px; padding-top: 5px; >.metro ul li:last-child < padding-bottom: 9px; margin-bottom: -25px; >.metro a < text-decoration: none; display: block; font-family: 'Noto Sans', sans-serif; color: #4A4B4D; >.metro a:before

3. Вертикальное меню с эффектами при наведении

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

.category-wrap < padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; >.category-wrap h3 < font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relative; >.category-wrap h3:after < content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0; >.category-wrap ul < list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); >.category-wrap li .category-wrap a < text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px; position: relative; transition: .3s linear; >.category-wrap a:after < content:"\f18e"; font-family: FontAwesome; position: absolute; right: 5px; color: white; transition: .2s linear; >.category-wrap a:hover

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

* .widget < padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: 'Roboto', sans-serif; >.widget h3 < margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; >.widget ul < margin: 0; padding: 0; list-style: none; width: 250px; >.widget li < border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; >.widget li:last-child < border-bottom: none; margin-bottom: 0; padding-bottom: 0; >.widget a < text-decoration: none; color: #616a6b; display: inline-block; >.widget li:before < font-family: FontAwesome; font-size: 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; >.widget li:nth-child(1):before .widget li:nth-child(2):before .widget li:nth-child(3):before .widget li:nth-child(4):before .widget li:nth-child(5):before

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

 

Распродажа

Продукт 1
 
₽ 2000
Продукт 2
 
₽ 2500
Продукт 3
 
₽ 2070
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'); .col < width: 300px; background: white; padding: 20px; border: 1px solid #eeeeee; font-family: 'Open Sans', sans-serif; >.col * .widget-title < margin: 0 0 30px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: #242424; overflow: hidden; >.widget-title:after < content: ""; position: relative; display: inline-block; width: 100%; vertical-align: middle; right: -15px; margin-right: -100%; border-top: 2px solid #cca86d; >.price-line .price-line:last-child .price-line:after < content: ""; display: table; clear: both; >.product-image < width: 80px; float: left; >.product-image a < display: block; outline: none; >.product-image img < display: block; width: 100%; >.product-content < float: left; margin-left: 20px; >.product-title < font-size: 18px; margin-bottom: 10px; line-height: 1; >.product-title a < text-decoration: none; color: #242424; >.price-box < color: #666; font-size: 18px; line-height: 1; >.star-rating < margin-bottom: 10px; font-size: 13px; position: relative; font-family: 'FontAwesome'; >.star-rating:before

Как создать горизонтальное меню с прокруткой для сайта?

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

Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.

Создание разметки

 

Вид горизонтального меню с прокруткой без стилей:

Вид горизонтального меню с прокруткой без стилей

Написание CSS кода меню

1. Зададим стили для .nav-scroller , .nav-scroller__items и .nav-scroller__item :

.nav-scroller { overflow-y: hidden; background-color: #fff; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } .nav-scroller__items { display: flex; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .nav-scroller__item { color: #424242; display: flex; padding: 0.5rem 1.25rem; text-decoration: none; }

Список используемых свойств:

  • overflow-y: hidden - скрываем контент, который будет выходить за нижнюю границу элемента .nav-scroller ;
  • background-color: #fff - устанавливаем цвета фона .nav-scroller ;
  • box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) - добавляем тень к .nav-scroller ;
  • display: flex - делаем элемент flex-контейнером;
  • overflow-x: auto - разрешаем прокрутку по горизонтали, она будет доступна при необходимости;
  • white-space: nowrap - запрещаем переносить текст на новую строку, даже если он не помещается в ней;

На этом этапе меню будет иметь следующий вид:

Вид горизонтального меню с прокруткой без стилей

2. Добавим правую границу ко всем элементам кроме последнего:

.nav-scroller__item:not(:last-child) { border-right: 1px solid #eee; }

Добавим правую границу ко всем пунктам Горизонтального меню кроме последнего

3. Выделим другим цветом фона активный пункт меню:

.nav-scroller__item_active { background-color: #fff59d; }

Указание активного пункта меню будем выполнять посредством добавления к нему класса nav-scroller__item_active .

Выделение активного пункта меню другим цветом фона

4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:

/* для всех пунктов кроме активного */ .nav-scroller__item:not(.nav-scroller__item_active):hover { background-color: #f5f5f5; } /* для активного пункта */ .nav-scroller__item_active:hover { background-color: #fff176; }

Изменение фона элемента меню при наведении на него курсора

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

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

Меню с горизонтальной прокруткой на устройствах с маленьким экраном

Улучшения для меню с горизонтальной прокруткой

1. Выравнивание активного пункта по центру

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

JavaScript

document.addEventListener('DOMContentLoaded', () => { const $navItems = document.querySelector('.nav-scroller__items'); const $navItemActive = $navItems.querySelector('.nav-scroller__item_active'); if (!$navItemActive) { return; } const navItemsRect = $navItems.getBoundingClientRect(); const navItemActiveRect = $navItemActive.getBoundingClientRect(); const navItemsLeft = navItemActiveRect.left - navItemsRect.left + (navItemActiveRect.width - navItemsRect.width) / 2; $navItems.scrollLeft = navItemsLeft; });

Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active оказывался если это возможно по центру.

Горизонтальное меню с прокруткой, у которого активный элемент отображается по центру

2. Прокручивания меню с помощью удерживания кнопки мыши

В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).

Для этого в CSS добавим следующий код:

.nav-scroller__items::-webkit-scrollbar { display: none; }

Это правило выключит отображение полосы прокрутки.

После этого на страницу подключим файл dragscroll.js :

Добавим класс dragscroll к прокручиваемому элементу:

 

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

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