169 похожих чатов

Всем привет. Возникла задача сделать следующее: есть горизонтальное меню с Х элементами. Надо

его скрывать в одну кнопку (по сути типичное поведение для адаптивного меню) на узких экранах.
НО!
1. Надо скрывать только при переполнении контейнера, т.е. при разном количестве/шириене пунктов горизонтального меню бдетразная ширина экрана
2. хочется обойтись без медиазапросов и JS

Можно ли как-то чисто CSS это реализовать?
Ну, например, какой-то певдокласс типа :wrapped или :overflow по которому можно сделать селектор и поменять свойства

10 ответов

5 просмотров

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

возможно вот эта статья поможет реализовать такое: https://kizu.dev/flexible-overflow/ но это не будет лёгкой прогулкой )

Anatoliy Kulak
Статья классная, но жутко устаревшая

появились новые трюки чтобы сделать это же самое?

Андрей Гуртовой
появились новые трюки чтобы сделать это же самое?

ага, js называется. Пишешь 5 строчек и все нормально работает

ничему это не вредит, не неси чушь

Идея Диогена
ничему это не вредит, не неси чушь

Ну зачем вы так. По дефолту резайз очень даже вредит. Другое дело, что есть debounce. Или еще лучше ResizeObserver

https://developer.mozilla.org/en-US/docs/Web/CSS/@container

Anatoliy Kulak
Ну зачем вы так. По дефолту резайз очень даже вред...

Привет подскажи нормально ли так делать или как то иначе

Anatoliy Kulak
Ну зачем вы так. По дефолту резайз очень даже вред...

допустим есть блок флекс и по нажатию кнопки я хочу вешать класс на блок флекса flex-grow: 1 чтобы он растягивался и вот самое интересное внутри этого контейнера есть еще див с позитрон абсолют

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

Обсуждают сегодня

А еще в перле можно уже @arr1 + @arr2?
Sergei Zhmylove
53
я не магистр хаскеля, но разве не может лейзи тип конвертнуться в не-лейзи запросив вычисление содержимого прям при инициализации?
deadgnom32 λ madao
100
Где в Астане можно купить мясо для шашлыков?
Dancing Іңұқәһүғө
21
Подскажите, где смотреть результат выполнения программы? Код: ;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, станда...
Егор Анелькин
5
Привет всем. появился вопрос. Разрабатываю сайт, в данный момент он запущен. Хостинг beget. Добавляю на сайт яндекс метрику с помощью полей client-settings (взято отсюда http...
Andrew
2
Добрый день подскажите пожалуйста может кто то сталкивался с ошибками Sentry 22.10.0 развернутым из helm чарт в Kubernetes? Изначально 3 дня назад очень стало много событий ух...
Tire4 Finist Devops
1
;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, стандартный ;вызов процедуры ;option casemap:no...
Егор Анелькин
1
почому оно не работает?
Vi Chapmann Chapmann
19
всем привет почти закончил курс После него можно писать свою операционку? Какие библиотеки надо использовать и куда дальше копать для изучения
Linus
19
Так а кто может спарсить всех участников чата? Идишники
Magic
18
Карта сайта