WordPress.org

1. lowercase001
   Member
   Posted 2 years ago #

   I have a menu which uses images as opposed to html text for each button.
   Each button links to a Page of the same name. My html list looks liek this...

   <ul class="menu">
   <li class="news"><a href="/news/"></a></li>
   <li class="about"><a href="/about/"></a></li>
   <li class="contact"><a href="/contact/"></a></li>
   </ul>

   My css looks like this (3 states for each button)...

   li.news a {
   	width:46px;
   	background-image: url(images/menu_news.png);
   }
   li.news a:hover {
   	background-position: 0px -60px;
   }
   li.news a.active {
   	background-position: 0px -120px;
   }

   Is there a way I can use this menu across every page of the site without putting the menu in a new template for every single page just to show the highlighted button? For example if you are on the News page - I want the news button to be on the active state (without having to code a new menu in a News-only template).

   I know this can be done with code calling 'current' text link menus - but can it be done with image menus?

   Any help appreciated as this one has me beat!

2. stvwlf
   Member
   Posted 2 years ago #

   <ul class="menu">
     <li class="news"><a<?php if(is_page('news')) echo ' class="active"';?> href="/news/"></a></li>
     <li class="about"><a<a<?php if(is_page('about')) echo ' class="active"';?> href="/about/"></a></li>
     <li class="contact"><a<a<?php if(is_page('contact')) echo ' class="active"';?> href="/contact/"></a></li>
   </ul>

   This code will set the class of active on the a tag that corresponds to the page being viewed. Thus you can use the same code on every page.

3. lowercase001
   Member
   Posted 2 years ago #

   Thanks very much. This worked perfectly!

4. lowercase001
   Member
   Posted 2 years ago #

   Using the above code, how do I make the active Parent highlight when on a child page as well as the active Parent page?

Topic Closed

This topic has been closed to new replies.