The next thing we’re going to do is style this menu. The Agility Skin has 4 different menus that you can style. It has the main menu, it has the header menu, a footer menu and a secondary menu.
The 4 Different Menus
The header menu is the menu that would exist either if you drag a menu into the header area or if you set up that 2 column header option so that it had a menu in it. In either case, the header menu would style that one.
The footer menu is this one here. There is a secondary menu which you’d use if there was some reason why you had another menu that you wanted to add to the site. And, of course, the main menu is this one here.
In addition to those, the main menu also lets you style the submenu entirely independently and it even lets you drill down to link supplemental styles which we’re going to look at here in a little while. You can also really fine tune styles using the link supplemental, hover supplemental, current supplemental and the same thing is true for the submenu.
Styling Example: Main Menu
So the main menu has a whole bunch of different styles that you can use to style it but we’re going to start off here with the simplest styles.
Let’s open up main menu, you can choose your font and in this case, we’re choosing Arial. Are choosing Arial, pardon me. Yes, we’re choosing Arial. So choose your font. It’s set at bold right now but we’re going to take it back down to the default.
You can set a font style which is Italic, Oblique or Normal. You can set a font variant which is essentially small caps. You can set a text transform which we are going to do, we’re going to transform to uppercase here.
You can set a text align but we’re not going to do that. You can set letter spacing and I’m going to add 1 pixel of letter spacing to that.
You can change the padding if you like. There’s top, right, bottom and left padding for each menu item. Padding is already set for it. There’s a default padding of 10 pixels top and bottom and 20 pixels left and right. If for some reason or another you want it bigger or smaller then you would use this menu item padding to do that.
3 Different States of Menu Items
Then we have our link text color. But before we set anything I should say first that menu items have different states. It has the link state, the hover state and the current state.
The link state is when you just see the menu and it’s just the menu as it sits. The hover state is when you’re hovering your mouse over the menu and the current state is if the page is the current page.
So in this case, if we go to home, this menu item is actually in its current state. These menu items before I hover over them are all in their link state and as I hover over it, it goes into the hover state.
Set Link and Hover State
So those are the 3 states of menus and we’re going to set the link text color to white. The link background color is that lighter green color. Our hover text color I also want to be white and that hover background color then is going to be the darker green.
Set Current State
The current text color I actually want to be that kind of grayish color but I’m not going to change the current background color. So the current background color then will have the same color as the link background color in that case.
Set Submenu Width
Then you can set the submenu width. I want to set the submenu to 250 pixels wide. By default it’s 150. Say okay to that and save our design options. Come back over here and refresh it. So we’ve essentially got our menus set up. Notice that these menu styles here did not have any effect on the menu down here. No effect whatsoever.
Styling Example: Main Submenu
Now, we can also style the submenu. Let’s go to that and make some changes. I’d like the font to be italic. I don’t want any text transform so I’m going to say none. I want to leave the font text align alone. I want no spacing so I’m going to say 0.
Then I’ll leave the link text colors alone but I want the background color to be a semi-transparent version of that green. That’s the link background color so it is a semi-transparent color of this. Let’s get the Hex to RGB conversion. So it’s 39, 77 and 0. I’m going to say link background color is rgba 39, 77, 0 and 0.7 for opacity.
Then the hover background color I want it to be the dark green so that’s the same color really. I’m going to leave the text colors alone entirely so let’s go ahead and save our design options.
Come back over and refresh this and now you’ve got this hover color and then the menu kind of just sits on top of, slightly covering or semi-opaque. When you hover over it, it becomes solid which has affected that light quite a bit on a menu. The ability to style both the menu and the submenu independently gives you that flexibility.
Styling Example: The Footer Menu
So finally, what we’re going to do is style the footer menu. The only thing I really want to do with the footer menu is I don’t want the hover color to be this red. So I’m going to come over to my menu and go to my footer menu and I’m going to come down to the hover text color and just want it to be white. That’s the only change I really want to make to it. Make that change, refresh it and now it turns white when I hover over it.