1

I have a set of links in the left navigation panel. And I wanted to highlight the opened link. I'm using css for my website.

HTML code:

<div id="LEFTmenu">
<ul>
<li><a href="link_01.html">Link1</a></li>
<li><a href="link_02.html">Link2</a></li>
<li><a href="link_03.html">Link3</a></li>
<li><a href="link_04.html">Link4</a></li>
<li><a href="link_05.html">Link5</a></li>
</ul>
</div>

CSS code:

#LEFTmenu {
    line-height:30px;
    width: 200px; 
    float: left; 
    margin-top: 10px; 
    background-color: #FFFFFF;}

#LEFTmenu ul {
    padding: 0;
    margin: 0 0 20px 15px;
    list-style: none;
    list-style-type: none;
    font-size: 14px;  }

#LEFTmenu ul li a:link, a:visited {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;  }

#LEFTmenu ul li a:hover {
    color: #CC3366;  }   

 #LEFTmenu ul li a:active {
    color: #33FFFF;  }

By using a:active, the link will have this property only for a very short time of just one click on the link. But I'm expecting the link to be highlighted while its page is opened. Is there such feasibility in CSS?

Nani
  • 1,148
  • 3
  • 20
  • 35
  • Are you using any Javascript? I'm not entirely sure if it's possible to do this using just CSS, but I could be wrong. –  Oct 22 '14 at 18:22
  • 'But I'm expecting the link to be highlighted while its page is opened.' -and when page is loaded (which is pretty fast, nowadays)? Do you actually want current link highlighted? E.g. User is on page 'Link2.html' -> link2 in menu is highlighted? – sinisake Oct 22 '14 at 18:24
  • possible duplicate of [highlight the navigation menu for the current page](http://stackoverflow.com/questions/4626431/highlight-the-navigation-menu-for-the-current-page) – Paulie_D Oct 22 '14 at 18:25
  • are you looking for visited link??? – Manjunath Siddappa Oct 22 '14 at 18:32
  • @Robert: I'm using only CSS and nothing else – Nani Oct 22 '14 at 18:37
  • @nevermind: yes, exactly!! – Nani Oct 22 '14 at 18:38
  • @ManjunathSiddappa: no not visited. visited means once it is visited and it always said to be visited even though navigation moves to other pages. but I'm looking for when a left navigation link is clicked and opened the particular page in the body area until navigation moved to another page the opened page link should be highlighted. – Nani Oct 22 '14 at 18:39
  • 1
    not possible with pure css. you'll either have to add some (trivial) javascript or use templates on the server. – Stephen Thomas Oct 22 '14 at 18:45
  • In all honesty, I'm not entirely sure it's possible without some kind of scripting –  Oct 22 '14 at 18:49

1 Answers1

4

The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.

for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.

the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,

   .highlighted{
       background-color:#000;
       color:#fff;
    }

just apply the "highlighted" class to the link you want.For example, if you are on link2.html page then you want the "link2" in your ul list to be highlighted. So inside your link2.html page, in your ul element referencing the links, just apply the class to link2 like..

.highlighted{
  color:#fff;
  background-colo:#000;
 }
<div id="LEFTmenu">
<ul>
<li><a href="link_01.html">Link1</a></li>
<li class="highlighted"><a href="link_02.html">Link2</a></li>
<li><a href="link_03.html">Link3</a></li>
<li><a href="link_04.html">Link4</a></li>
<li><a href="link_05.html">Link5</a></li>
</ul>
</div>

This is the easiest css solution for what you want to achieve.

Now the javascript version of doing this is not difficult by any means, but a little more complicated than the just css approach. I say it is a little more complicated because you are dynamically going to manipulate the element properties. Now you do have to watch out for what you are doing bcause you might accidentally change some DOM property that you do not want to change but altogether it is not difficult.

now for javascript approach now you can decide to do this in native javascript or use some jquery or other libraries. Jquery makes writing the code simpler but you have to link the jquery source to you html file, which adds memory/file size to your page. This part I will let you decide what you want to do and how you want to proceed.

HopefullyI have shed some light into what you are wanting to do. Good luck

Sai
  • 1,889
  • 5
  • 18
  • 26
  • Thank you so much for the elaborated explanation!! – Nani Oct 22 '14 at 19:04
  • Nice answer Sai, Good thinking changing the class to the link of the page your on ,on the page it self so it's highlighted. Nice trick +1 – Billy Oct 22 '14 at 21:35