Question

I am currently in the process of adding a navigation bar to a test site. I have seen some navigation bar indicate the current selected page by adding a bar underneath or glow to the <a> tag. I am right now puzzled in the right way to achieve such css style. How can i achieve a glow effect around a selected <a> so the user will now the page they currently at? EXAMPLE

Thank you

For my <a> tags i have created a .buttonNav class

CSS related rules for navigation bar:

<style>
/**************  Header Styling ****************/
#navigation {
    left: 440px;
    margin-top: 80px;
    position: relative;
}


#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
    outline: 0;
    padding: 5px 12px;
    display: block;
    color: #EBEBEB;
    font-weight: bold;
    text-shadow: 1px 1px #1f272b;
    border: 1px solid #1c252b;
    border-radius: 3px;
    background: #232B30;
}
.buttonNav:hover {
    color: #fff;
    background: #4C5A64; 
}
.buttonNav:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    color: #fff;
    padding: 6px 12px 4px;
    background: #20282D; 
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.button-list {
    list-style: none outside none;
    overflow: hidden;
}
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; list-style: none outside none;}

</style>

HTML

<div id="header">
  <div class="search"><input type="text" class="search-input" name="search" value="Search" onclick="$(this).val('');" /><input type="submit" class="search-submit" /></div>
  <div id="navigation">

   <ul class="button-list">
       <h2>MAIN TITLE PAGE</h2>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/index.php" class="buttonNav" >Content 1</a></li>
    <li><a href="http://webprolearner2346.zxq.net/css-test2/content2.php" class="buttonNav" >Content 2</a></li> 
   </ul> 
  </div>
 </div>

Answer 1

I would put in some jquery to handle this automatically something like

  $(document).ready(function () {
      var str = location.href.toLowerCase();
      $(".navigation li a").each(function () {
          if (str.indexOf(this.href.toLowerCase()) > -1) {
              $("li.highlight").removeClass("highlight");
              $(this).parent().addClass("highlight");
          }
      });
  })

This function will add a css class highlight to the active li a element. IF and only if the name of the next page is the same as the text. So if the link is called “Product.html” you’ll want the text of the a element to be “Product”

the an example of the HTML

<ul class="navigation">
    <li class="highlight"><a href="index.html">Home</a></li>
    <li><a href="product.html">Product</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

the css would change the background color slightly.

.highlight{
    background-color: #fff;
}

you know or put in the glow effect you want

hope this helps,

EDIT: working tutorial/demo http://blog.huidesign.com/automatically-highlight-current-page-in-navigation-with-css-jquery/

EDIT2: thanks to Sven Bieder, for helping better understand.