Feb. 5., 2008
Simulating conditions with pure HTML/CSS
By Steffen Müller. Licensed under the Creative Commons License
There are many ways to assign extra styles to the menu item of the active page. TYPO3 for example provides ACT in Typoscript to do so. But did you know that this can be solved with pure HTML/CSS?
The only information we need to have is the ID of the page and the menu items. By setting a page ID in the <body> tag and the class in the menu list item, we can use the cascading property to define extra style if both are matching.
HTML
<body id="papers">
...
<ul id="navMenu">
<li class="blog">My blog</li>
<li class="papers">My papers</li>
<li class="books>My books</li>
<li class="contact">Contact</li>
</ul>
CSS
#blog #navMenu .blog a,
#papers #navMenu .papers a,
#books #navMenu .books a,
#contact #navMenu .contact a, {
color: red;
}
License
This article is licensed under the Creative Commons License CC BY-SA 3.0. You are free to share (copy, distribute and transmit) and to remix (to adapt) the work under the following conditions:
- You must attribute the work by mentioning the name of the author (Steffen Müller) and setting a link back to the original article using its URL.
- If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.
