wp admin – How to detach sub-menu output and stay connected to parent

I am making a menu like this https://squareup.com/ I have html, css and jquery ready. Now, I’m trying:

Create a menu item with its sub-menu item wp-admin -> appearance -> menus (which I have done)

Output the menu item with its corresponding sub-menu item separately and dynamically.

 <header>
        <?php if ( get_field('landing_hero_image') ): ?>
                <div class="menu" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
                    <a class="click-me">
                        main menu item
                    </a>
                </div>
                <div class="hidden-content">
                    sub menu item associated with the main item
                </div>
                <div class="banner" style="background-image: url(<?php the_field('landing_hero_image'); ?>);">
                </div>
            <?php endif; ?>
    </header>

So in short, how do I separate the output (html) menu items and their children?

Many thanks in advance.

Leave a Comment