Dropdown menu in footer ( Ride Theme)

[Connor1836]

Hey, I’ve recently added a dropdown menu into my footer to organise things abit. I did this via code that was provided on here which worked but I’d like to know how to add my links to the menu and how to centre the boxes ( see attached photo) 

Thank you

[CodingFifty · Accepted solution]

Hi @Connor1836,

Try this code.

<style>
    .menu {
        width: 250px;
        margin: 0 auto; /* Center align */
    }

    .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; /* Pink color */
    }

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

    .submenu {
        display: none;
        padding: 10px;
        background: #f9f9f9;
        font-size: 14px;
        text-align: center; /* Center align text */
    }

    .submenu a {
        text-decoration: none;
        color: #333;
        display: block; /* Block for full width clickability */
        padding: 5px 0;
    }

    .submenu a:hover {
        color: #007bff;
    }
</style>

<div class="menu">
    <div class="menu-item" onclick="toggleMenu(this)">
        Get in touch <span>+</span>
    </div>
    <div class="submenu">
        <a href="mailto:contact@example.com">Email: contact@example.com</a>
        <a href="tel:123-456-789">Phone: 123-456-789</a>
    </div>

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

    <div class="menu-item" onclick="toggleMenu(this)">
        QUICK ORDER <span>+</span>
    </div>
    <div class="submenu">
        <a href="/checkout">Express Checkout</a>
        <a href="/bulk-order">Bulk Order</a>
        <a href="/track-order">Track Order</a>
    </div>

    <div class="menu-item" onclick="toggleMenu(this)">
        OUR POLICIES <span>+</span>
    </div>
    <div class="submenu">
        <a href="/shipping-policy">Shipping Policy</a>
        <a href="/return-policy">Return Policy</a>
        <a href="/privacy-policy">Privacy Policy</a>
    </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>

[topnewyork]

Hi @Connor1836 You didn’t attach the picture.