Know which page & section the user is currently on and react accordingly
Ever need to highlight or change certain features depending on where the user is ? HeadJS will detect the current page, and what section (subfolder/path) the user is on, and generate CSS classes that you can then easily target.
-
page (..problem with decimals ? should we drop, concenate ?)
- Will generate a CSS id for the current page: #v1-page
-
section
- Will generate multiple CSS classes for the current path: .site-section, .api-section
{% highlight css %}
/* user is on any page that ends with /index.* or on the root path / or */
#index-page .main-menu {
background-color: gray;
}
/* user is on a path containing /api/ */
.api-section .top-menu {
display: none;
}
/* mix & match */
/* for example the user is on /api/test.html */
#test-page.api-section .top-menu {
display: block;
}
{% endhighlight %}
If the user is on page « /home/api/test.html » HeadJS will generate the following CSS classes for you: #test-page, .home-section, .api-section
You can choose how these variables are named in the configuration section.