Adding a luminous glow effect to the <a> tag upon selection

Question

Adding a luminous glow effect to the <a> tag upon selection

Currently, I am working on integrating a navigation bar into a test site. I have noticed that some navigation bars highlight the current selected page by adding a bar underneath or creating a glowing effect around the <a> tag. I am unsure of the correct way to achieve this specific CSS styling. How can I implement a glow effect around a selected <a> element so that users can easily identify the page they are currently on? EXAMPLE

Thank you

I have created a .buttonNav class for my <a> tags.

CSS rules related to the 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 code:

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

css

Answer 1

Answer №1

By incorporating a new class

.activePage {
  background: #yourUniqueColor;
  (box-shadow)..
  (text-decoration)..
}

Including this class in the link that corresponds to the current page (this must be done for every page), you have the ability to customize the appearance of the current page's link to stand out from the rest, according to your preferences.

Answer 2

By incorporating a new class

.activePage {
  background: #yourUniqueColor;
  (box-shadow)..
  (text-decoration)..
}

Including this class in the link that corresponds to the current page (this must be done for every page), you have the ability to customize the appearance of the current page's link to stand out from the rest, according to your preferences.

Answer 3

Answer №2

Adding jQuery to automatically handle highlighting active navigation elements can be done like this:

  $(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 script adds a CSS class highlight to the active li element with an a tag, only if the next page's name matches the text of the link. For example, if the link is "Product.html", the a element should have the text "Product".

Here's an example of the HTML structure:

<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 provided changes the background color slightly for highlighted elements.

.highlight{
    background-color: #fff;
}

You can also add other effects like a glow effect as desired.

For a working tutorial/demo, check out this link.

Special thanks to Sven Bieder for providing additional insights!

Answer 4

Adding jQuery to automatically handle highlighting active navigation elements can be done like this:

  $(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 script adds a CSS class highlight to the active li element with an a tag, only if the next page's name matches the text of the link. For example, if the link is "Product.html", the a element should have the text "Product".

Here's an example of the HTML structure:

<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 provided changes the background color slightly for highlighted elements.

.highlight{
    background-color: #fff;
}

You can also add other effects like a glow effect as desired.

For a working tutorial/demo, check out this link.

Special thanks to Sven Bieder for providing additional insights!

Answer 5

Answer №3

Usually, the best practice is to handle this on a server-level. Fortunately, it's a straightforward task at the moment. If you find yourself on the main page, just locate the link leading to the homepage in your navigation and apply a class or inline style to it.

Answer 6

Usually, the best practice is to handle this on a server-level. Fortunately, it's a straightforward task at the moment. If you find yourself on the main page, just locate the link leading to the homepage in your navigation and apply a class or inline style to it.

Adding a luminous glow effect to the <a> tag upon selection

Answer №1

Answer №2

Answer №3

Similar questions

Turn off slider trace animation?

What is the best way to align my content alongside my sidebar?

Bootstrap glyphicon not in sync with input field alignment

Unexpected results from CSS nth-child selector

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Setting the root position of a div: How can it be done?

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

Inexperienced with Bootstrap/CSS: Cannot open dropdown by clicking (CDN properly installed)

What is the best way to ensure that the viewBox of an SVG perfectly matches the size of the image it overlays?

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

Utilize the arrow keys to navigate through the search suggestions

An error occurred when executing Selenium through Python due to an invalid selector issue

Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Integrating autoprefix-cli into ANT build

Getting rid of the empty spaces between the lines of cards in Bootstrap 4

Is there a way to verify the presence of a specific word within a classname?

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

The nth-child selector fails to function properly with a customized MUI component in CSS

Adjust my website to fit various screen sizes and mobile devices

Is there a way to disable certain CSS features in Chrome, like CSS grid, for testing purposes?