Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Jeesun Kim
Jeesun Kim
4,866 Points
Posted by Jeesun Kim
Jeesun Kim
4,866 Points

How to Build a WordPress Theme: How can I have images as menu?

I have completed Zac's WordPress Tutorials. Now, I am creating my own WordPress theme. I want to have image icons as my menu and when you have mouseover each icon, the text shows up below the icon.

It works perfect as a static html but I don't know how to incorporate this with wordpress. I assume I need a plugin?

This is my prototype code:

<ul class="nav">
<li><a href="about.html" class="menu_top"><img src="img/meetjee.png"/></a><div class="meetjee">meet jee</div></li>
<li><a href="" class="menu_top"><img src="img/portfolio.png"/></a><div class="blog">blog</div></li>
<li><a href="project.html" class="menu_top"><img src="img/blog.png"/></a><div class="work">work</div></li>
<li><a href="" class="menu_top"><img src="img/contact_icon.png"/></a><div class="contact">contact</div></li>
</ul>

style.css ul.nav { list-style: none; }

ul.nav li { display:inline-block; margin-right: 30px; font-family: 'brandon_grotesque_lightRg'; font-size: .9em; }

a.menu_top { display: hidden; }

.meetjee { display: none; position: absolute; z-index: 100; text-align: center; }

.blog { display: none; position: absolute; float:left; z-index: 100; }

.contact { display: none; position: absolute; float:left; z-index: 100; }

.work { display: none; position: absolute; float:left; z-index: 100; }

a:hover + .meetjee { display: block; }

a:hover + .blog { display: block; }

a:hover + .contact { display: block; }

a:hover + .work { display: block; }

2 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

I would suggest applying the images as background images. That might be easier to target each menu item using nth-child selectors and add the appropriate image.

Jeesun Kim
Jeesun Kim
4,866 Points
Jeesun Kim
Jeesun Kim
4,866 Points

Is there a specific php for applying li menu?

Fabian Raschke
Fabian Raschke
2,908 Points

You can find everything here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

Paul Graham
Paul Graham
1,396 Points

The only problem with using the native WP menus is that you won't be able to assign specific classes to determine backgrounds. You don't HAVE to use native menus, only if you want to be able to add and subtract links without changing code. I personally use wp_nav_menu() for my footer nav and not for my header nav because it's heavily customized. If you're going to custom program a nav, you can either use it as a template part or write a function in functions.php to output the code.

If you are going to pursue Zac's strategy, which is generally right I'd think, you can massively simplfy the code of your nav. This is how I'd probably approach it:

<nav>
    <li class="about"><a href="about"><span>meet jee</span></a></li>
    <li class="blog"><a href="blog"><span>blog</span></li>
    <li class="work"><a href="project"><span>work</span></a></li>
    <li class="contact"><a href="contact"><span>contact</span></a></li>
</nav>

Then what you could do is set the a elements to display: inline-block and size them however you need. Set the backgrounds of the a.class to be your desired background image. You can have the li span elements pushed off visibility by default, and then use a CSS transform to show those spans when you hover over any of the links. That would give you the best of all worlds, clean code, accessibility, and animation without using JS.

Jeesun Kim
Jeesun Kim
4,866 Points
Jeesun Kim
Jeesun Kim
4,866 Points

I got it!! Thank you everyone.

Fabian Raschke
Fabian Raschke
2,908 Points
Fabian Raschke
Fabian Raschke
2,908 Points

You can give each link a special class and then assign your icon as a background image for that class. This way you can use the menu functionality of Wordpress.

Jeesun Kim
Jeesun Kim
4,866 Points
Jeesun Kim
Jeesun Kim
4,866 Points

Thank you Fabian! I am going to try that. I am currently learning pHp so that I can understand WordPress better.

Paul Graham
Paul Graham
1,396 Points

This is the right way to do it also for accessibility, using an image replacement technique