I'm looking for a way to dynamically highlight a menu item anytime a user is viewing a page that is assigned to a given taxonomy or category. For example a nav bar at the top with items "Products" and "Strategy". Any page or post that is created and has the categ开发者_如何学运维ory or taxonomy "product" would cause the Products menu item to be highlighted when you are on the page for that product. I'm thinking if I could figure out a way to just apply a class to that item based on the criteria above, that would do it. Any ideas? I'm stumped on this one.
I would recommend a front end approach. Here's what I'm thinking:
1) You have 2 or more categories: Products and Strategy ...
2) Each post in Products will have a body class string that contains a class which is probably called products-taxonomy or something like that.
3) With jQuery you can check for products-taxonomy or strategy-taxonomy and highlight the specific menu-item. This can be done easily with jQuery selectors provided that you add a specific class to your products category when you create your menu.
It would be something like this:
add class for products menu item : 'productsMenu'
add class for strategy menu item : 'strategyMenu'
make sure you echo the body_class
var $body = $(body); // better select just once the body
if($body.hasClass('products-taxonomy')) {
// highlighetMenuItem should be your highlighting class
$(".productsMenu").addClass("highlighetMenuItem");
} else if($body.hasClass('strategy-taxonomy')) {
$(".strategyMenu").addClass("highlighetMenuItem");
}
And yeah... you need jQuery on the front end if you want this to work. Or you could use pure javaScript in almost as many lines of code. :)
精彩评论