Как сделать липкое меню css
Перейти к содержимому

Как сделать липкое меню css

  • автор:

Как сделать липкое меню на чистом css?

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

5f035bd2ca866384218676.png

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

  • Вопрос задан более трёх лет назад
  • 565 просмотров

Комментировать
Решения вопроса 2

Одного css не хватит. Максимум можно сделать что бы меню выездало при фокусе кнопки, но это такое себе решение. Лучше потратить 5 минут и написать обработчик

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
xenonhammer @xenonhammer

Переместить меню на самый верх и сделать position:fix. JS нужно, чтобы решать всевозможные задачи (подобного рода тоже), не стоит им пренебрегать

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • 2 часа назад
  • 18 просмотров

Как правильно сделать липкое меню при прокрутке страницы (без js, думаю ни как)?

Есть меню с категориями товаров, располагается в блоке «aside», нужно, чтобы при прокрутке вниз, оно прилипало к верхней части экрана, провернуть это можно с помощью «position: sticky».

6039deae7c699062137986.jpeg

Но есть проблема, это хорошо прокатит в том случае, если меню не большое, и полностью помещается в область экрана

6039df6f0b94a293316861.jpeg

А если меню длинное, как в этом случае:

то при прокрутке, происходит фиксация, но нижняя часть меню не доступна для пользователя, пока он не закончит прокручивать всю страницу вниз, в зависимости от длины блока «main»

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

Вроде доступно объяснил, спасибо!

  • Вопрос задан более двух лет назад
  • 947 просмотров

1 комментарий

Простой 1 комментарий

Как сделать плавающее (липкое) меню на сайте с помощью Javascript

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

Начнем с HTML разметки:

Сделаем так, чтобы прилипал элемент nav , который будет служить меню. Добавим стили:
/* Сбросим дефолтные отступы для демонстрации */ body < margin: 0; padding: 0; >.header < background: #FFFACD; width: 100%; height: 100px; >.nav < background: #87CEEB; width: 100%; height: 50px; >.main < background: #AFEEEE; width: 100%; height: 150vh; display: block; >/* Будем присваивать этот класс, чтобы блок прилипал */ .sticky < position: fixed; top: 0; >/* Добавляем отступ равный высоте меню к контенту */ .sticky + .main

А теперь реализуем логику на Javascript:

window.onscroll = function() < checkMarginToTop(); >; var nav = document.getElementById("nav"); var sticky = nav.offsetTop; function checkMarginToTop() < if (window.pageYOffset >sticky) < nav.classList.add("sticky"); >else < nav.classList.remove("sticky"); >>

Теперь наш скрипт определяет расстояние от верха меню до верха окна и когда это расстояние становится равным 0 присваивает класс sticky элементу nav .

Адаптивное липкое меню CSS при прокрутке

Адаптивное липкое меню CSS при прокрутке

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

Меню проверено на работоспособность:

Адаптивное меню на CSS для сайта

Переход на мобильный гаджет:

Мобильная навигация для сайта на CSS

С нажатием кнопки идет выдвижение вертикального меню:

Отзывчивое горизонтальное меню с логотипом на CSS

Шрифтовые знаки:

@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap’);
* <
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
>
::-webkit-scrollbar <
width:10px;
>
::-webkit-scrollbar-track <
background:#f1f1f1;
>
::-webkit-scrollbar-thumb <
background:#bf0606;
>
::selection <
background:rgb(0,123,255,0.3);
>
.asumen-dalusa <
max-width: 1250px;
margin:auto;
padding:0 30px;
>
.usauidemes <
position:fixed;
width:100%;
z-index:2;
padding:25px 0;
transition: all 0.3s ease;
>
.usauidemes.consequaka <
background:#1b1b1b;
padding:10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
>
.usauidemes .asumen-dalusa <
display: flex;
align-items: center;
justify-content: space-between;
>
.usauidemes .sequam a <
color:#fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
>
.usauidemes .kesaude-conuam <
display: inline-flex;
>
.kesaude-conuam li <
list-style: none;
>
.kesaude-conuam li a <
color:#fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition:all 0.3s ease;
>
.kesaude-conuam li a:hover <
color:#bf0606;
>
.banner <
background:url(«images/bg.jpg») no-repeat;
height:100vh;
background-size:cover;
background-position:center;
background-attachment: fixed;
>
.about <
padding:30px 0;
>
.about .title <
font-size: 38px;
font-weight: 700;
>
.about p <
padding-top:20px;
text-align: justify;
>
.icon <
color:#fff;
font-size:20px;
cursor: pointer;
display:none;
>
.kesaude-conuam .cancel-btn <
position:absolute;
right:30px;
top:20px;
>
@media (max-width:1230px) <
.asumen-dalusa <
padding:0 60px;
>
>
@media (max-width:1100px) <
.asumen-dalusa <
padding:0 40px;
>
>
@media (max-width:900px) <
.asumen-dalusa <
padding:0 30px;
>
>
@media (max-width:868px) <
.icon <
display:block;
>
body.disabled <
overflow: hidden;
>
.icon.hide <
display:none;
>
.usauidemes .kesaude-conuam <
position:fixed;
height:100vh;
width:100%;
max-width: 400px;
left:-100%;
top:0px;
display:block;
padding:40px 0;
text-align: center;
background:#222;
transition:all 0.3s ease;
>
.usauidemes.show .kesaude-conuam <
left:0%;
>
.usauidemes .kesaude-conuam li <
margin-top:45px;
>
.usauidemes .kesaude-conuam li a <
font-size: 23px;
margin-left:-100%;
transition:0.6s cubic-bezier(0.68, -0.55,0.265,1.55);
>
.usauidemes.show .kesaude-conuam li a <
margin-left:0;
>
>
@media (max-width:380px) <
.usauidemes .sequam a <
font-size: 27px;
>
>

const body = document.querySelector(«body»);
const usauidemes = document.querySelector(«.usauidemes»);
const menuBtn = document.querySelector(«.menu-btn»);
const cancelBtn = document.querySelector(«.cancel-btn»);
menuBtn.onclick = ()=> <
usauidemes.classList.add(«show»);
menuBtn.classList.add(«hide»);
body.classList.add(«disabled»);
>
cancelBtn.onclick = ()=> <
body.classList.remove(«disabled»);
usauidemes.classList.remove(«show»);
menuBtn.classList.remove(«hide»);
>
window.onscroll = ()=> <
this.scrollY > 20 ? usauidemes.classList.add(«consequaka») : usauidemes.classList.remove(«consequaka»);
>

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

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

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

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