CODEWITHSUNDEEP
cssnavigationshtml
andy.d
andy.d

Reputation: 1

Server side navigation highlight active page

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?

Upvotes: 0

Views: 820

Answers (1)

alf
alf

Reputation: 18530

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 */
}

Upvotes: 3

Related Questions