Adding Some Magic: Animating Mobile Sub-Menus on Your Shopify Store

I remember one lazy afternoon when I was fervently trying to tweak my online store, much like rearranging the pillows on a well-worn couch. All I wanted was to make it look cool, a bit more lively—a place where you wouldn’t just shop, but also smile a little. The sun was busy setting, the shadows long and lazy, and there I was, wrestling with dropdown menus that stubbornly refused to move with any grace.

Now, perhaps like you, I wasn’t aiming for a fancy mambo number. Just a simple slide-in, slide-out effect for my mobile sub-menus—a sprinkle of animation magic, if you will. Enter stage left: the battle with sub-menu animations, specifically on mobile. You might think, "Surely, this can't be that difficult?" And you'd be right—sort of. The key is knowing your way around some basic CSS and JavaScript. Let’s dive in together, shall we?

Sub-Menu Slide-in Bliss

So there I was, squinting at my screen, and Eureka!—I stumbled upon a simple workaround that might just work for you too. First, let's picture the scene. You've got this little menu under “PRODUCTS,” just waiting to glide in beautifully. Sounds like a dream? Well, here’s our little secret.

Step 1: Tinkering with the Theme Files

Before anything else, let’s tread lightly on the code. We’re diving into Shopify's Theme Editor—cue epic music.

1. Navigate to Online Store > Themes, and click on Actions > Edit code. This is where the magic begins.
2. Now look for theme.css or theme.scss.liquid. This will vary depending on your theme, but they’re our playground today.

Add the following code at the end of your CSS file to animate your sub-menu. Trust me, it looks harder than it is—kind of like assembling IKEA furniture.

.mobile-nav__sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-nav__sub-menu.open {
  max-height: 500px; /* Adjust this max-height according to your sub-menu content */
}

Here, we define a transition effect for our menu, toggling its maximum height to create that sweet, smooth animation we’re after. Why doesn't it just work and take us out for pizza too?

Step 2: A Gentle Nudge with JavaScript

With our CSS all dressed up, we need a little JavaScript to bring it to life—kind of like those old-timey Frankenstein movies, minus the lightning bolts.

1. Jump to the theme.liquid file. This is where we sprinkle a few lines of JavaScript magic.

2. We need to listen for clicks, the way a detective listens for clues.

Add this code block just before the closing </body> tag:

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.menu-toggle').forEach((button) => {
    button.addEventListener('click', function () {
      let subMenu = this.nextElementSibling

      if (subMenu.classList.contains('open')) {
        subMenu.classList.remove('open')
      } else {
        document.querySelectorAll('.mobile-nav__sub-menu.open').forEach((openMenu) => {
          openMenu.classList.remove('open')
        })
        subMenu.classList.add('open')
      }
    })
  })
})

This bit of code listens for clicks and toggles the open class to let our CSS do its thing each time you tap that plus/minus icon. Just like that, no smoke or mirrors needed.

Step 3: Testing Our Artwork

With our code snugly in place, it’s time to test. Will it blend? Does it float? Only one way to find out. Grab your mobile device, or just use your browser’s developer tools to simulate a mobile screen. Click those icons and watch your sub-menu dance to life.

I stood back, hands on hips, a grin creeping over my face. It's a simple joy, watching a menu adeptly slide in and out like a polite game of peek-a-boo. It felt almost like magic—and hey, it’s okay to revel in these small wins.

As we wrap up, remember: coding is often just about trying things out, seeing what fits. Your store is your canvas, and each little animation adds a brushstroke, bringing it one step closer to the vibrant, engaging space you envision. Keep experimenting, keep building, and above all, enjoy the journey. Because if it’s not fun, then why?