Highlighting the Current Webpage's Link

In order to highlight the current webpage's link, we need to uniquely identify each webpage and each link. To uniquely identify the webpage, we give the <body> an id. For example:

<body id = "body_home">

In order to uniquely identify each link, we give each <a> an id. For example:

<li><a id = "link_home" href = "home.html">Home</a></li>

Once we have uniquely identified the <body> and <a>, we add a css condition. If <body id = "home"> and <a id = "form">, then we need to find any <a> called "home" that is in a <body> called home. The css code to catch this is:

body#body_home a#link_home
{
}

Each webpage will have its own set <body> and <a> id. In the example below, we use the id "home", "about_us" and "products". The css code matchs each ,body, with its <a>, as shown below:

body#body_home a#link_home, 
body#body_about_us a#link_about_us, 
body#body_products a#link_products 
{   
  background-color : red;   
  color            : black;   
  cursor           : default; 
}

In order to build a working copy of the code below, you need to

Example of Highlighted Current Links (Run Example)

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.menu a
{
  text-decoration : none;
}

.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
  display          : block;      /* Expand hyperlink to fill container*/
  background-color : #61c6f0;
  color            : #ccc;    
}

.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
  background-color : #ddd;
  color            : #0ac;
}

.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;
}

.menu li
{
  width      : 80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;            /* Force list items tight together. */
}

.menu.vertical li
{
  display : block;   /* Force list items onto seperate lines. */
}

/* Menu item for current webpage */
body#body_home a#link_home,
body#body_about_us a#link_about_us,
body#body_products a#link_products
{
  background-color:red;
  color:black;
  cursor:default;
}
</style>


<title>Highlighting the Current Webpage's Link</title>
</head>

<body id = "body_home">    <!-- We need to put a unique id on each body -->

<div class = "menu">
<ul>
<li><a id = "link_home"     href = "home.html">Home</a></li>
<li><a id = "link_about_us" href = "about_us.html">About Us</a></li>
<li><a id = "link_products" href = "products.html">Products</a></li>
</ul>
</div>
</body>
</html>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>