menu 1   |   menu 2   |   menu 3

A very simple way to highlight the selected menu Tab.

I always design a single menu page. All other pages will include this menu page. If I change menu text or link, I only need change it once in one place. All other pages will get updated automatically.

The feature I want is to highlight the menu tab which indicate which page I am at. But I couldn't find a simple way to do it from Internet search

Following is my design. It is extreme simple. The idea is to define a style which is only apply to the current page. You can test it on top of this page.

The detail code is:

1. Create a CSS file which contains the menu style. All the menus are controlled by this menu style.

.menu {
  FONT-SIZE: 12px; 
  FONT-FAMILY: Arial, Helvetica, sans-serif; 
  }
.menu a {
  text-decoration:none; 
  }
.menu a:hover {
  color:#fff;
  background:#08c;
  }

2. Add menu highlight style in each page. Name it differently for each page.

.hilt1 {
  color:#fff; 
  background:#08c;
  }

3. Create a menu, which use the overall menu style, and add its only menu style defined in its own page.

<p class="menu">
<a href="menu_sel1.htm" class="hilt1" >menu 1</a>&nbsp;&nbsp; |&nbsp;&nbsp; 
<a href="menu_sel2.htm" class="hilt2">menu 2</a>&nbsp;&nbsp; |&nbsp;&nbsp; 
<a href="menu_sel3.htm" class="hilt3"> menu 3 </a>
</p>

When each page are loaded, the style defined in this page will take effect, which will highlight the current page menu tab. All other menu tabs will use the CSS menu style. For example, when load page "menu_sel1.htm", this page does not know the style "hilt2" or "hilt3". So both do not take any effect. But "hilt1" will take effect, which will make the menu tab has blue background.