Как адаптировать боковое меню?

Question

squadbrodyaga @squadbrodyaga

Татарский богатырь

Как адаптировать боковое меню?

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

контейнер — в красной рамке
левое меню — в белой рамке

Сейчас я просто при событии 'resize' вешаю класс portrait на контейнер когда высота больше длинны,
но проблема в том, что когда я начинаю менять размер окна, то происходит момент, в котором меню начинает
вот так колбасить

Как это выглядит (Видео): https://skr.sh/v5PWcsf0kou

Может кто знает как убрать эту проблему? Помогите пожалуйста.

P.S Если что media запросы не подходят в моём случае

Вопрос задан 01 дек. 2020
187 просмотров

6 комментариев

Подписаться 4 Простой 6 комментариев

Ankhena @Ankhena Куратор тега CSS

Логично.
Срабатывает условие при котором панелька уменьшается => ширина контейнера за счет этого увеличивается => условие перестает выполняться => панелька расширяется обратно. И так по кругу.

Написано 01 дек. 2020
squadbrodyaga @squadbrodyaga Автор вопроса

Ankhena, ну да, это я понимаю, но как исправить?)

Написано 01 дек. 2020
Ankhena @Ankhena Куратор тега CSS

squadbrodyaga, после первого срабатывания перестать изменять при продолжении ресайза в том же направлении

Написано 01 дек. 2020
squadbrodyaga @squadbrodyaga Автор вопроса
Ankhena, я еще не сталкивался с таким, можешь пожалуйста помочь? Хотя бы подскажи
про что нужно прочитать

Если что сейчас моя функция выглядит так:

window.onresize = function() { if (container.offsetWidth >= container.offsetHeight) { leftmenu.classList.remove('mobile') } else { leftmenu.classList.add('mobile') } }
Написано 01 дек. 2020
Ankhena @Ankhena Куратор тега CSS

squadbrodyaga, после того как выполнилось условие меняем какую-нибудь переменную с 0 на 1.
По дороге проверяем старую ширину окна и новую. Записываем в какую сторону было движение в момент срабатывания условия. Если и дальше оно идет в ту же сторону, то ничего не делаем. Если оно изменилось, то начинаем проверять.

Но вообще-то мне не кажется, что ширина панельки не должна зависеть от пропорций контейнера рядом. Скорее уж от ширины окна.
Хотя, возможно, в контейнере что-то такое сложено, что ему важны пропорции родителя.

Написано 01 дек. 2020
squadbrodyaga @squadbrodyaga Автор вопроса

Ankhena, попробую разобраться, спасибо)

Написано 01 дек. 2020

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как сделать движение объекта?
- 1 подписчик
- час назад
- 31 просмотр
0

ответов
CSS

+1 ещё

Простой
Как сделать такую карусель фотографий карточки товара?
- 1 подписчик
- 2 часа назад
- 47 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему плагин mmenu работает некорректно?
- 1 подписчик
- 2 часа назад
- 14 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как в ангуляре при изменении данных в localstorage рендерить измененную информацию?
- 1 подписчик
- 2 часа назад
- 12 просмотров
0

ответов
JavaScript

Простой
Где здесь ошибка в коде?
- 1 подписчик
- 3 часа назад
- 61 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Discord.JS ошибка инсталяции модуля в Heroku. Как исправить?
- 1 подписчик
- 3 часа назад
- 36 просмотров
1

ответ
JavaScript

Простой
Как учесть, что может быть мало элементов?
- 1 подписчик
- 4 часа назад
- 65 просмотров
0

ответов
CSS

+1 ещё

Простой
Как сделать область вокруг фото с ссылкой некликабельной?
- 1 подписчик
- 4 часа назад
- 49 просмотров
1

ответ
CSS

+1 ещё

Средний
Как улучшить CLS используя слайдеры Owl Carousel?
- 2 подписчика
- 4 часа назад
- 40 просмотров
0

ответов
JavaScript

Средний
Как реализовать проверку ввода нескольких нескольких инпутов?
- 1 подписчик
- 4 часа назад
- 39 просмотров
2

ответа
Показать ещё Загружается…

JavaScript-разработчик

CORE

от 230 000 ₽

JavaScript Fullstack developer

Intspirit • Краснодар

от 80 000 до 150 000 ₽

JavaScript разработчик

Sportrecs • Москва

от 150 000 до 200 000 ₽

Проектирование базы данных и разработка REST API

27 янв. 2021, в 00:37

11111 руб./за проект

Сделать новый дизайн mini apps VK

26 янв. 2021, в 23:30

3000 руб./за проект

Сайт для отслеживания посылок

26 янв. 2021, в 23:07

1000 руб./за проект

Логично.
Срабатывает условие при котором панелька уменьшается => ширина контейнера за счет этого увеличивается => условие перестает выполняться => панелька расширяется обратно. И так по кругу.
Ankhena, ну да, это я понимаю, но как исправить?)
squadbrodyaga, после первого срабатывания перестать изменять при продолжении ресайза в том же направлении
Ankhena, я еще не сталкивался с таким, можешь пожалуйста помочь? Хотя бы подскажи
про что нужно прочитать

Если что сейчас моя функция выглядит так:

window.onresize = function() { if (container.offsetWidth >= container.offsetHeight) { leftmenu.classList.remove('mobile') } else { leftmenu.classList.add('mobile') } }
squadbrodyaga, после того как выполнилось условие меняем какую-нибудь переменную с 0 на 1.
По дороге проверяем старую ширину окна и новую. Записываем в какую сторону было движение в момент срабатывания условия. Если и дальше оно идет в ту же сторону, то ничего не делаем. Если оно изменилось, то начинаем проверять.

Но вообще-то мне не кажется, что ширина панельки не должна зависеть от пропорций контейнера рядом. Скорее уж от ширины окна.
Хотя, возможно, в контейнере что-то такое сложено, что ему важны пропорции родителя.
Ankhena, попробую разобраться, спасибо)

Как адаптировать боковое меню?

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

Минуточку внимания

Войдите на сайт