Add transitions to header drawer menu

Store Design
,
1

I need help adding transitions to my header drawer menu on mobile for dawn theme 15.2.0. I have changed the menu into an accordion that works just fine, however i could not get any transitions to work with it. It is important that the transitions work for both closing & opening the different menu items. This is my store url: https://washologi.com/

This is my header-drawer.liquid file code:

{% comment %}
Renders a header drawer menu for mobile and desktop.

Usage:
{% render 'header-drawer' %}
{% endcomment %}

You can see what kind of transitions i want if you take a look at my footer menu accordion. Thanks!

2

Add the following code right before the closing tag in your file:

.menu-drawer details::details-content {
	display: block;
	margin-inline: 2rem;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.3s;
	transition-behavior: allow-discrete;
	transition-timing-function: ease-out;
}

.menu-drawer details[open]::details-content {
	block-size: auto;
	block-size: calc-size(auto, size);
}

Hope this code is helpful to you! :grinning_face:

3

Thanks for the suggestion! It works perfectly when i go into mobile mode through the inspect tool on desktop, however when i try it out on my phone the transition does not seem to work on neither Safari nor Google.

Since the previous code i also updated the js now so that it does not close a submenu when another one is opened. This is the new js:
4

Hi @ww04

I’m unable to test directly on a mobile device.

Please try updating your custom code to include dynamic height calculation for the detail-content.
In the below code, I added submenu to your custom code toggleAccordion. Let me know if you need further guidance!

function toggleAccordion(summaryElement) {
event.preventDefault();

const detailsElement = summaryElement.parentElement;
const isOpen = detailsElement.hasAttribute('open');
const icon = summaryElement.querySelector('.accordion-icon');
const submenu = detailsElement.querySelector(".menu-drawer__submenu")

if (isOpen) {
detailsElement.removeAttribute('open');
icon.textContent = '+';
submenu.style = `block-size: ${item.offsetHeight}px;`;
} else {
detailsElement.setAttribute('open', '');
icon.textContent = '-';
submenu.style = ``;
}
}
5

I understand that you cant preview it on mobile device, however could you provide me with an example of how you would do the dynamic height calculation? I have tried a couple of different things but have not gotten it to work.

Thanks!

6

@ww04 Hope this code is helpful to you! :blush:

I use JavaScript to get the offsetHeight of the submenu and then set the style for the details element.

1. Update custom style

.menu-drawer details::details-content {
	display: block;
	margin-inline: 2rem;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.3s;
	transition-behavior: allow-discrete;
	transition-timing-function: ease-out;
}

.menu-drawer details[open]::details-content {
	block-size: var(--eco-custom-block-size);
}
  1. Update custom toggleAccordion
function toggleAccordion(summaryElement) {
event.preventDefault();

const detailsElement = summaryElement.parentElement;
const isOpen = detailsElement.hasAttribute('open');
const icon = summaryElement.querySelector('.accordion-icon');
const submenu = document.querySelector(".menu-drawer__submenu");
detailsElement.style=`--eco-custom-block-size:${submenu.offsetHeight}px`;

if (isOpen) {
  detailsElement.removeAttribute('open');
  icon.textContent = '+';
} else {
  detailsElement.setAttribute('open', '');
  icon.textContent = '-';
}
}