ARCHXTEKK,
1. Проще pointer-events: none
2. Вместо абсолюта - гриды.
3. Но вы правы в том, что фоновая картинка это украшение и делается через css, а не вставляется как img в разметку.
bazliiii, очень хорошо.
Теперь вспоминаем как считается ширина. Использовать calc не удобно, потому что width рассчитывает слайдер. Значит, меняем box-sizing и получаем желаемое.
Ещё убираем width 100%, потому что не ясно зачем это вообще.
Заодно можно и с высотой разобраться.
Вам нужно, чтобы второй блок был прибит к правому краю первого. А по вертикали по центру.
Так зачем вы пишете в стилях, поставь по центру по вертикали и по центру по горизонтали?? Логика-то где?
Откуда у второго ширина 100%? Почему у двух блоков задана одинаковая высота, если на картинке один по центру другого?
Если внутри синего есть ещё какое-то содержимое, то нужно показывать всю задачу целиком.
Overlord934, без разницы, верстайте как удобнее. Лишь бы соответствовало семантике и задумке дизайнера на любой ширине или нормально выглядело на любой ширине, если задумка дизайнера неизвестна.
Хотите все в относительных единицах напишите, хотите грид постройте, хотите изменяйте при media, вариантов много.
В этом коде нажатие на кнопку работает сколько угодно раз.
Код можно заметно сократить, если
1. оперировать классом на родителе, а не на двухэлементах
2. оперировать добавлением и удалением одного класса, а не меняя два.
Меню работает. Но кнопка переключается только один раз. Где допустила ошибку?
Нужно сделать песочницу на codepen.io с видимой проблемой.
И нужно ли еще делать открытие меню без JS для подстраховки? Если да, то как?
С помощью :focus-within
Собственно, тогда и js вовсе не нужен.
Но так никто не делает на проде. На проде такие вещи делают на js.
