Нужно отсоединить бургер кнопку (меню) от крестика (закрыть)?

Question

[Дмитрий Филатов]

Кнопки бургер и закрыть привязаны друг к другу, из-за этого если передвинуть бургер то и крестик передвигается, нужно их отсоединить друг от друга, но крестик должен выдвигаться вместе с меню синхронно как сейчас, долго мучился но так и не смог, может у вас получится.
Код выложил тут: https://jsfiddle.net/qkv4f2bu/
Можно посмотреть пример на wildberries - там крестик двигается вместе с меню, а кнопку бургер можно передвигать в любое место.

Comments

[Froggyweb]

вот теперь я начал понимать клиентов.... птичий язык какой-
иконка меняет состояние открыто- закрыто. Это хорошо.
кого нужно отсоединить - непонятно. Иконку закрытия меню куда-то сместить?

[StiflerProger]

Тут дело в том что у тебя кнопка "крестика" и "бургер" это физически 1 элемент, а на сайте wildberries это 2 разных элемента. Поэтому у тебя есть эффект превращения бургера в крестик, а у них крестик появляется

[Дмитрий Филатов]

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

[Дмитрий Филатов]

Froggyweb, Иконка закрытия сейчас правильно выдвигается вместе с меню, а если бургер передвинуть в какое нибудь место то и закрытие в след за ним двигается

[Froggyweb]

закрытие это просто трансформация бургера. что нужно -непонятно
у скрипта есть наверняка метод open и close если нужен другой элемент на открытие/закрытие надо использовать API скрипта

Answer 1

[Иван В]

Просто сделайте два элемента.

Обратите внимание, что у кнопки есть классы "closed" и "opened", от которых зависит внешний вид кнопки. Следовательно, элементы делим по этому классу.

// Бургер
<a href="#" class="menu-icon js-menu_toggle closed">
......
</a>

// Крестик
<a href="#" class="menu-icon js-menu_toggle opened">
......
</a>

В js в функциях, обрабатывающих клики по кнопкам, удалите "$(this).removeClass('...').addClass('...');".

Элемент крестика уже на месте, а вот бургер нужно вынести за пределы элемента "side_menu".

Comments

[Дмитрий Филатов]

У меня не получилось, может вы в самом коде покажите как сделать https://jsfiddle.net/uh2kw1fv/3/

[Иван В]

Дмитрий Филатов, вы, наверное, на нажали "Сохранить", в коде нет ни одной моей рекомендации.

[Дмитрий Филатов]

Иван В, Сохранил - https://jsfiddle.net/ugjkLyzf/

[Иван В]

Дмитрий Филатов, обрати внимание как строится кнопка бургера. В CSS уже все написано.

<a href="#" class="menu-icon js-menu_toggle open">
......
</a>

В этом коде не хватает линий (это span'ы с menu-icon_line) и оберток (burger_box, menu-icon-container).
В общем, замени крестик на этот код.

<div class="burger_box">
		<div class="menu-icon-container">
			<a href="#" class="menu-icon js-menu_toggle opened">
				<span class="menu-icon_box">
					<span class="menu-icon_line menu-icon_line--1"></span>
					<span class="menu-icon_line menu-icon_line--2"></span>
					<span class="menu-icon_line menu-icon_line--3"></span>
				</span>
			</a>
		</div>
	</div>

Его не будет видно на белом фоне, по этому поменяй его положение через абсолютную позицию и добавь анимацию появления \ исчезновения.

[Дмитрий Филатов]

Иван В, Получилось, но теперь если открыть меню, то кнопка (бургер) остаётся по какой то причине в меню, (в открытом меню) и если нажать на нее, то меню закрывается. Никак убрать её не удалось. Выделил её черным цветом - https://jsfiddle.net/vq7dnok2/1/

[Иван В]

Дмитрий Филатов, это не кнопка бургера остается в меню, это на самом деле кнопка крестика (просто позиция в точности совпадает с положение бургера), которая лежит в меню.
Содержимое кнопки (линии изображающие крест ".menu-icon_line"), ты передвинул с помощью свойства left.
Но нужно было передвинуть саму кнопку ".menu-icon_box".
1) у ".menu-icon_line" замени left и top на меньшие значения, чтобы линии оказались в центре кнопки.
2) самой кнопке ".menu-icon_box" задай свойство right: -50px; (более точное значение подгонишь сам).

Answer 2

[StiflerProger]

https://jsfiddle.net/4j29ru5h/18/

Красиво сам оформишь =)

Comments

[Дмитрий Филатов]

Получилось, но крестик не получается убрать, он должен появляться только когда меню открывается, а не торчать все время в углу - https://jsfiddle.net/801hpn4q/

[StiflerProger]

Дмитрий Филатов, я думал что для тебя будет лучше чтобы ты сам сделал "появление" крестика) https://jsfiddle.net/yq04rhog/11/

[Дмитрий Филатов]

StiflerProger, Теперь если открыть меню, то кнопка (бургер) остаётся по какой то причине в меню, (в открытом меню) и если нажать на нее, то меню закрывается. Никак убрать её не удалось. Выделил её черным цветом - https://jsfiddle.net/vq7dnok2/1/

[Дмитрий Филатов]

StiflerProger Уже не надо, проблема решена)