Не знаю, делаю ли я что-то не так, но у меня есть боковое меню с некоторыми значками.Когда вы щелкаете один из значков, он расширяется примерно на 350px
вправо, и отображается текст, объясняющий этот значок.Для этого я использую некоторый javascript, который добавляет / удаляет класс CSS, если щелкнуть по нему, а затем выполняется функция transform: translateX()
, а значок / панель расширяется или вычитается (см. Изображение).Довольно простой imo.
Я недавно сделал это, добавив наличие отрицательного поля, а затем изменил его на 0 при добавлении класса CSS - что сработало.Но кажется, что консенсус заключается в том, что вы не должны translate
поля (из-за производительности).Поэтому я попробовал функцию translateX()
, которая, казалось, работала, однако я только что понял, что пространство, которое она должна занимать при нажатии (т. Е. Расширенная панель (см. Изображение)), так или иначе занимает пространство.Поэтому, если бы я щелкнул где-то, где предполагается расширить панель (когда она закрыта, конечно), как кнопка, я бы не смог, потому что она занимает пространство, даже если она не развернута.
Так чтосвойство функции translate
, или я могу как-то это исправить?
РЕДАКТИРОВАТЬ (см. этот пример): https://jsfiddle.net/1t5Lrgax/
Здесь вы видите боковую панель, и, как вы можете видеть, зеленая кнопка может быть нажата только сверху, но не на большей части ее тела, которая закрыта боковой панелью, когда она развернута.