Ride Theme Footer Drop down menus

[Connor1836]

 

 

Hey I use the ride theme and I’m trying to tidy up my footer I have lots of links and want to organise this into 3 dropdown menus

information

get in touch 

policies 

can somebody help with code please

ideally we want something like the photo attached

[DaisyVo · Accepted solution]

Hi @Connor1836 

You add this code to the Custom liquid section

 <style>
        .menu {
            width: 250px;
        }

        .menu-item {
            border-bottom: 1px solid #ddd;
            padding: 10px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            color: #007bff;
        }

        .menu-item span {
            transition: transform 0.3s ease;
            color: #e40087; /* Màu hồng giống trong ảnh */
        }

        .menu-item.active span {
            transform: rotate(180deg);
        }

        .submenu {
            display: none;
            padding: 10px;
            background: #f9f9f9;
            font-size: 14px;
            color: #333;
        }
    </style>
<div class="menu">
        <div class="menu-item" onclick="toggleMenu(this)">
            Get in touch <span>+</span>
        </div>
        <div class="submenu">
            Email: contact@example.com <br>
            Phone: 123-456-789
        </div>

        <div class="menu-item" onclick="toggleMenu(this)">
            INFORMATION <span>+</span>
        </div>
        <div class="submenu">
            About Us <br>
            FAQ <br>
            Terms & Conditions
        </div>

        <div class="menu-item" onclick="toggleMenu(this)">
            QUICK ORDER <span>+</span>
        </div>
        <div class="submenu">
            Express Checkout <br>
            Bulk Order <br>
            Track Order
        </div>

        <div class="menu-item" onclick="toggleMenu(this)">
            OUR POLICIES <span>+</span>
        </div>
        <div class="submenu">
            Shipping Policy <br>
            Return Policy <br>
            Privacy Policy
        </div>
    </div>

    <script>
        function toggleMenu(element) {
            let submenu = element.nextElementSibling;
            let isOpen = submenu.style.display === "block";

            
            document.querySelectorAll('.submenu').forEach(menu => menu.style.display = "none");
            document.querySelectorAll('.menu-item span').forEach(icon => icon.textContent = "+");

            if (!isOpen) {
                submenu.style.display = "block";
                element.querySelector("span").textContent = "-";
            }
        }
    </script>

[solverStaff]

Hello there

You can check this post to solve your problem https://community.shopify.com/c/shopify-design/dawn-theme-mobile-footer-accordion-menu/td-p/1322565

Regards

Tito