I’m building a menu for my website. The static is looking like this:
<nav>
<ul id="menu">
<li class="item_1"><a href="#">Item 1</a></li>
<li class="item_2"><a href="#">Item 2</a></li>
<li class="item_3"><a href="#">Item 3</a></li>
<li class="item_4"><a href="#">Item 4</a></li>
<li class="item_5"><a href="#">Item 5</a></li>
<li class="item_6"><a href="#">Item 6</a></li>
<li class="item_7"><a href="#">Item 7</a></li>
<li class="item_8"><a href="#">Item 8</a></li>
</ul>
I’ve been able to understand how to customized the <ul>
tag, to get rid of the automatic <div>
tag. But now, I want to customized the <li>
tag to be able to assign different class
name to control specific behavior through CSS. When I use the wp_nav_menu()
the output is as follow:
<ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
</ul>
I want to get rid of the id
in the <li>
tags and change the class
to reflect the name of the page I want to link to. Basically I want to output the the same thing as the 1st snippet of code in this post.
The reason why I doing this, is that I use custom images that is controled by my CSS insted of plain text.
Is this possible? What strategy I should use to overcome this problem?