Simulating conditions with pure HTML/CSS
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;
}
Comments
Leave a comment:
About this site
At the moment, T3node is a TYPO3 blog by Steffen Müller. Beside TYPO3, technical and nontechnical topics about free software and the internet are discussed.
This blog is also a personal survey about what motivates me to write this blog and what issues are worth writing. Statistically, my motivation to do this is probably to
1. express myself
2. connect with other people
3. share knowledge with other people
All contents are distributed under the Creative Commons Attribution - NonCommercial - ShareAlike 3.0 Unported licence.
Article tags
