Welcome back to Part 4 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we’re going to discuss how inheritance and specificity apply to the Thesis Nav menu.
Thesis Navigation Menu – How Inheritance and Specificity Affect It
The Thesis Nav menu is really the ideal Thesis theme structure to consider the subject of inheritance and specificity with because there are so many different ways in which the nav menu can be styled. And the Thesis theme builds in structures in the nav menu that allow us to style groups of menu items or individual menu items or the entire menu in one fell swoop. And so there’s a lot of inheritance built in to the Thesis menu and a lot of opportunity for specificity to override the inheritance.
HTML Elements of the Thesis Navigation Menu
In order for us to really understand how the Thesis Navigation menu works, we have to understand how it’s structured. The Thesis Nav menu has three HTML elements as its structure. The first is an unordered list and those are the UL elements. Next is the list items which are the LI elements inside of the UL element. And then finally, the links or the a elements. And it’s the links that provide the actual navigation in the Thesis theme menu from where you are to where you want to go. It’s the list items, the unordered list and the list items themselves, which provide the structure for the navigation menu and for how behaves with a drops down or fly out and that sort of thing.
And so if you take a look at the navigation menu for each one of these things is a list item and each drop down menu is a new UL item and each item inside of that is an LI item. And then each subsequent drop down menu is a new UL item and so on and so forth. And in each item, there is a link.
Let’s inspect the Thesis navigation menu structure in Firebug and you can see that we have this main UL with a class of menu and then inside of that are the LI items for each of the tabs. So if we drop this down and see how this intersects that, you can see each of the tabs is an LI item. And then if we expand those tabs, you can see inside of the tab, there is a link that takes you off of that page. Also inside the tab or inside the LI item is a nested UL item or a nested unordered list. If we expand that, we see the next level of list items and inside of each of those there is a link. And in these, there is also another nested submenu or another unordered list. And if we expand those again, we see that there’s another link inside these list items and so on and so forth. This process of nested unordered lists is how the Thesis navigation menu is created.
Links in the Thesis Navigation Menu
The links in a Nav menu have 4 states. The first is the default state and that is what every link is without any further definition. The next is the hover state which is when you hover your mouse over the link. The next is the current state that is the current page that you’re on. We’ll look at that for a second. If we come to tab 3, here is the page that we’re on and that’s its link state. Delete all this custom codes so it goes back to its normal. So there is its current state. This is its default state, this is the hover state, and then if we come down to a submenu item page again, delete all that. This color here is the current parent state; this link represents the parent of the current page. So the current parent state.
Those are the four states and there are two properties in each of the links that control the appearance of those states. The first property is background color and the second is font color. Let’s look at our site at our definitions of these things and go down to Thesis Design Options and then Nav menu; here you can see that we have a background color for each of these four states. The link background color, that’s the default background color. The hover background color, the current background color, and the current parent background color. And the same thing is true for these fonts; now they’re all the same color but they could all be different colors. And these are the two properties for each link that are changed so the state of each link is represented.
Thesis Theme Default Link Rules
The structure is created out of the UL items and the LI items; those two colors are assigned to the link items. And so the Thesis theme has six default rules which apply to the links which create those four states. The main default is menu a. Every link has this default menu a style applied to it. The second one is menu a hover so when you hover over menu a, it goes to menu a hover. The next one is menu current a so that is the current state of a link. The next one is menu current a hover so that’s the current state of the link when you hover over it. And then menu current parent a which is the state of the parent of the current page. And then you have its final one, menu current parent a hover. These are the default rules that are affected by the background color and the font color that govern those four states.
What happens here is every single link inside the Thesis menu inherits these styles and the style that is shown is dependent upon the specificity of the selector. This here is the least specific selector and therefore, it applies to everything. This is a more specific selector than this so when the hover condition exists, then this one shows instead of this.
In terms of math, it’s class and element and pseudo class or it’s essentially two classes plus an element. Well, this becomes more specific than this as well. It’s a class, a class, and an element versus a class and an element. So when this condition exists, this is more specific than this. And the next thing is also true. This now has three classes plus an element so it’s more specific than this and also more specific than this. And then the next step up is the menu current parent a which is again, two classes plus an element and that is a more specific version than menu a. And then finally, menu current parent a hover, again, three classes plus an element which is more specific than current parent a and more specific than menu a hover.
It’s inheritance that provides the styling all the way through and it’s specificity that changes some part of those inherited styles under these given conditions. And by default, this is how Thesis styles the menu. All of the links behave exactly the same way.
That wraps up Part 4 of Lesson 6 of the Customize Thesis Like a Pro tutorial series.