stmllr.net

Simulating conditions with pure HTML/CSS

by on stmllr.net

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;
}

Tags

Add a comment

Comments are moderated and need to approved. Please be patient.

License

Licensed under creative commonsThe content of this website 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.

Contact

My GnuPG key for download: 8F303C95
You can also download the key from the PGP keyservers: Search for 0x4e9b1ae78f303c95
Fingerprint: 5878 50B7 2FB4 5607 1F5A F7E5 4E9B 1AE7 8F30 3C95