Creating a custom menu with images as each link

Question

In my current template my main navigation is output by a simple wp_nav_menu function. Now I am thinking of replacing it with a unordered list with background images in css. Assuming I do this I need to put in the direct link to the page, including it's id#, is there a wordpress function that will allow me to grab each pages location separately and place it in the corresponding list item for my main navigation I am creating.

something like

<ul>
<li class="nav1"><a href="**wordpress function for 1st nav**"></a></li>
<li class="nav2"><a href="**wordpress function for 2nd nav**"></a></li>
</ul>

Answer 1

There are a few ways to have images as them menu links. Since you already have the wp_nav feature I'd suggest using it to add your images. Here is a quick way to do it:

Step One

Add a new custom nav menu:

Step 2

Add a temporary page and upload the image for the menu:

Step 3

Switch to HTML view select the text and link it to the page it will represent in the menu

Note: You don't have to use the editor but for most users it's easier if they don't know html. You could just use this format if you're more comfortable:

<a href="http://the-page-it-represents.com/"><img src="http://your-website.com/wp-content/uploads/2012/01/Profile.png" alt="" title="Profile" width="48" height="48" /></a>

Step 4

Add a custom menu item Paste the text into the Label text box of the custom menu-item. You can just use # as the URL. Then click the add menu item button and you've got you're first image.

Step 5

Menu Positioning

I recommend using Firefox with either Firebug or the Web Developer Plugin. Here is the item without the style and the web developer plugin used to find the ID:

Continue adding them until your finished. This will allow you to add on to it later and can be used with drop-down navigation also. There are other ways to do this, but this one works pretty well.