Server side navigation highlight active page

Question

I'm looking to implement a server side header.shtml with the ability to recognize the active page (likely by adding a css class to it)

<header class="topbar container">
<a href="http://www.example.com/" rel="home">
<div class="logo grid">
<h1 class="ir">Home</h1>
</div>
</a>
<nav class="navbar" role="navigation">
<ul>
    <li class="active"><a href="about.html">About</a>
    </li>
    <li><a href="projects.html">Projects</a>
    </li>
    <li><a href="blog.html">Blog</a>
    </li>
    <li><a href="contact.html">Contact</a>
    </li>
</ul>
</nav></header>

I'm trying to cut down on code by using the .shtml and then

<!--#include virtual="/header.shtml" -->

I'm guessing though, that this can only be accomplished through Javascript or JQuery, but I was wondering if it could be done css only?

no, you can't do it with css only, because your website must react dynamically to the menuclicks on your page. You need js for this — Sven Bieder, Aug 24 '12 at 18:38

score 3 · Answer 1 · answered Aug 28 '12 at 13:38

Yes, this can be done only with CSS. I learned this solution from this book: CSS: The Missing Manual and it's based on descendant selectors.

First, assign a unique id to each navigation entry:

<ul>
    <li id="nav_about"><a href="about.html">About</a>
    </li>
    <li id="nav_projects"><a href="projects.html">Projects</a>
    </li>
    <li id="nav_blog"><a href="blog.html">Blog</a>
    </li>
    <li id="nav_contact"><a href="contact.html">Contact</a>
    </li>
</ul>

Then, assign an id to the body tag of each page:

<!-- about.html -->
<body id="about">

<!-- projects.html -->
<body id="projects">

<!-- blog.html -->
<body id="blog">

<!-- contact.html -->
<body id="contact">

Finally, style your navigation bar with CSS:

nav li {
    /* default nav entry style here */
}

#about #nav_about, #projects #nav_projects, #blog #nav_blog, #contacts #nav_contacts {
    /* active nav entry style here */
    /* styles declared here will override the defaults because this selector has more specificity */
}

Server side navigation highlight active page

1 Answers1