Advanced Search

highlight selected item in menu CSS only

/ Published in: CSS
Save to your folder(s)
give a class name to each link according to the page it redirects to.
give attribute id to the body of the template and make the attribute editable (Dreamweaver lets you do that: select the attrib, Modify>Templates>Make attribute editable and tick the checkbox.
For each page change id value to be the same as the class of the link referring to the page.
(to do that, go to Modify>Template properties)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #home  #menu  .home a,
  2. #about #menu  .about a,
  3. #services #menu  .services a,
  4. #products #menu  .products a{ color:#000000; text-decoration:underline;}
  5.  
  6. html example code for page "about":
  7. <body id="about">
  8. ...
  9. <ul id="menu">
  10. <li class="about"><a href="../about/index.html">About</a></li>
  11. <li class="services"><a href="../services/index.html">Services</a></li>
  12. <li class="projects"><a href="../projects/index.html">Projects</a></li>
  13. </ul>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.