Image menu dynamic highlighting

  • 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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • <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.

    Thread Starter lowercase001

    (@lowercase001)

    Thanks very much. This worked perfectly!

    Thread Starter lowercase001

    (@lowercase001)

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image menu dynamic highlighting’ is closed to new replies.