How can I create a mobile footer dropdown menu in Dawn Theme?

How can I create a mobile footer dropdown menu in Dawn Theme?

yalostore
Excursionist
34 0 8

Hi

 

Im trying to make a dropdown menu in my footer section but just in mobile version. Ive tried different codes Ive found here but it doesnt work at all 😞

My url is: yalostore.com

This is how it looks like now

WhatsApp Image 2023-09-28 at 9.38.22 PM.jpeg

 Hope somebody can help me 😄

Replies 6 (6)

VIEKIN
Shopify Partner
662 79 94

Hi,

Do you want to implement like this?

https://www.cssscript.com/demo/multilevel-accordion-menu-with-plain-html-css/

If that, you need to customize code and has familiar with javascript and css.

If you want you can ask to a developer to help.

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
yalostore
Excursionist
34 0 8

I added this code and it works, just that the two last menus (follow us, subscribe) are not working with the code. 

I would like either have the code working in that two menus, or just delete the + icon so they can like that.

WhatsApp Image 2023-09-28 at 11.01.32 PM.jpeg

<style>
@media (max-width: 749px) {
.grid .footer-block.grid__item {
margin: 0;
}
.grid .footer-block__heading {
position: relative;
margin: 0;
padding: 1.5rem 0;
cursor: pointer;
}
.grid .footer-block__heading::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
text-align: center;
}
.grid .footer-block__heading:not(.block-collapsed)::after {
content: "-";
}
.grid .footer-block__heading.block-collapsed + .footer-block__details-content {
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
transition: all .2s ease-out;
overflow: hidden;
}
.grid .footer-block__heading + .footer-block__details-content {
visibility: visible;
opacity: 1;
height: auto;
transition: all .2s ease-out;
overflow: hidden;
margin-bottom: 3rem;
}
}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}

const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}

document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')

heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)

heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})

})
</script>

 

VIEKIN
Shopify Partner
662 79 94

To prevent the code affect to two parts bottom you can change to the class is using to detect element.

you can try this code bellow:

<script>
window.addEventListener('DOMContentLoaded', () => {
if (window.matchMedia('(min-width: 750px)').matches) {
return
}

const handleCollapse = (heading) => {
if (heading.classList.contains('block-collapsed')) {
heading.classList.remove('block-collapsed')
heading.setAttribute('aria-expanded', 'true')
} else {
heading.classList.add('block-collapsed')
heading.setAttribute('aria-expanded', 'false')
}
}

document.querySelectorAll('.footer-block--menu .footer-block__heading').forEach((heading, index) => {
heading.classList.add('block-collapsed')
heading.setAttribute('role', 'button')
heading.setAttribute('aria-expanded', 'false')
heading.setAttribute('tabindex', '0')

heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
heading.setAttribute('aria-controls', `footer-block-index-${index}`)

heading.addEventListener('click', () => { handleCollapse(heading) })
heading.addEventListener('keypress', () => { handleCollapse(heading) })
})

})
</script>

 

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
yalostore
Excursionist
34 0 8

It doesnt work, with that code its like its not affecting anything 😞

WhatsApp Image 2023-09-28 at 11.23.41 PM.jpeg

VIEKIN
Shopify Partner
662 79 94

humm, so strage 🧐

But a little difficult to check like this, we need check directly to code

so you can ask to a developer to help you if you want

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
yalostore
Excursionist
34 0 8

Okay 😞

 

Thank you anyways for trying to help