insert div into a menu item before the link and more

admin管理员组

文章数量:1290420

I make a web page in Wordpress using a certain theme. Now, this theme has an expected markup for the menus:

<ul id=”primary-navigation-main”>
    <li>
        <a href=””>Page 1</a>
    </li>
    <li>
        <a href=””>Page 2</a>
    </li>
    <li>
        <a href=””>Page 3</a>
    </li>
</ul>

On the mobile menu the wishes are slightly different. In the company they want some transition while pressing on the menu item. Something that I solved at another (hardcoded) menu like that:

<ul id=”primary-navigation-main”>
    <li>
        <div class=”transition-div”></div>
        <a href=””>
            <p>Page 1</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=””>
            <p>Page 2</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=””>
            <p>Page 3</p>
        </a>
    </li>
</ul>

or like in this jsfiddle.

I don’t know if this is the best solution for this transition but it works.

So, I would like to add <div> into <li> before <a> and in the <a> I would like to add <p>. I was fiddling with wp_nav_menu and wp_nav_menu_items but I wasn’t successful. Do I need to register <ul> or something else? Also it seems I will have to use a Walker class but I don't know how.

Could anybody help me or simply tell me it's not possible?

I make a web page in Wordpress using a certain theme. Now, this theme has an expected markup for the menus:

<ul id=”primary-navigation-main”>
    <li>
        <a href=”https://example/page1”>Page 1</a>
    </li>
    <li>
        <a href=”https://example/page1”>Page 2</a>
    </li>
    <li>
        <a href=”https://example/page1”>Page 3</a>
    </li>
</ul>

On the mobile menu the wishes are slightly different. In the company they want some transition while pressing on the menu item. Something that I solved at another (hardcoded) menu like that:

<ul id=”primary-navigation-main”>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example/page1”>
            <p>Page 1</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example/page1”>
            <p>Page 2</p>
        </a>
    </li>
    <li>
        <div class=”transition-div”></div>
        <a href=”https://example/page1”>
            <p>Page 3</p>
        </a>
    </li>
</ul>

or like in this jsfiddle.

I don’t know if this is the best solution for this transition but it works.

So, I would like to add <div> into <li> before <a> and in the <a> I would like to add <p>. I was fiddling with wp_nav_menu and wp_nav_menu_items but I wasn’t successful. Do I need to register <ul> or something else? Also it seems I will have to use a Walker class but I don't know how.

Could anybody help me or simply tell me it's not possible?

• menus

Share Improve this question asked Jun 16, 2021 at 13:05 Igor BeuermannIgor Beuermann 122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I overslept and came to a completely different solution with the same visual outcome. It simply doesn't use additional div in the li elements and p elements in the a element. The jsfiddle shows the solution thanks to the Keith J. Grant's idea I encountered. So instead of Wordpress I honed a bit my CSS skills.

But actually, the question remains: how to insert an arbitrary markup into a certain existing menu (in my case the primary menu of the chosen theme). That is into each menu item li and then into each link a, preserving the menu's URLs.

本文标签： insert div into a menu item before the link and more