We are going to continue working with the Supplemental Menu Styles in the Agility Skin for Thesis 2. So far I’ve shown how to make the menu span across the entire page and how to create a border under the menu. The final thing I want to show you how to do with these supplemental styles is how to turn these menu items into menu buttons.
Remove Menu Background Color
We’re going to start off in the background option. And I’m going to edit the top menu area background and say it’s transparent. So there is no background color there now for that main menu. Then I think the other thing I’m going to do is take the padding back down to normal and take the font size back up to 16.
Add Margin to the Menu Links
Now what I’m going to do is make these into buttons instead of making it a bar. Essentially the way you do that is to add some margin to the menu links and so really all we have to do is say give ourselves 10 pixels of left and right margin. You don’t have to do it that way, you could do 20 pixels on one side.
Now you end up with these individual menu buttons. It’s actually possible to specify a width. The overall width here is 173 pixels wide. Well, we could come down here to our main menu, take the font back down to 15, make our submenu width 150. Say okay to that and then come back over to the main menu link supplemental styles and make the menu item width 150.
Let’s see how close we get to something that looks right. Pretty close. I might take that font down to 14 pixels so this one doesn’t go to two lines. You can play with the spacing more too. I’m not going to really worry about that in this case, I think you get the idea here where you can make these things into buttons.
What I’m really going to do is to change the name of that menu item that doesn’t fit in the spacing. That was Finished Products. Go to Appearance and Menus. As you can see, this is the problem that you face when you try to style a menu. There are issues associated with having varying widths of menu elements.
Add Rounded Corners to Menu Items
Then we’re going o dump this border we added for the last example. Skin design, I’m going to get rid of that border system. Default, border color, get rid of the border altogether but we’re going to give this a 10 pixel border radius.
We’re going to give it ccc as the color and 5, 5, 5 of shadow offset and blur which means this offsets to the left and right, 5 pixels offset down, 5 pixels and has a blur of 5 pixels. So we’ll set that as our shadow color. It didn’t like my syntax there so we will add the px in those things, 5px, 5px and 5px.
Change Hover Style
So now we’ve got that little bit of drop shadow there and then what I want to do with this is as I hover over these things, I want the drop shadow to look like it’s being pushed in. So then I come back over to my main hover style and I don’t care about the border color but the drop shadow will be 3px, 3px, 3px and the ccc.
Refresh that and now it looks like you’re pushing on the button when you hover over it because the drop shadow gets a little bit smaller. Obviously, buttons like this don’t work that well with the submenu but that’s not really the point. The point about this is how you can use the supplemental styles to create menu buttons.
Add Background Images to the Menu Items
You can do the same kind of thing with supplemental styles and use images and that kind of stuff here instead of background colors which is fast and easy but you could use a background image for this as well. You can see that I think by looking at these, you could put a background image, its position, its attachment.
As soon as you imagine the kinds of things you can do with background images on your menu, at that point you can start seeing all the possibilities of how these supplemental menu styles can work especially for an accomplished designer who doesn’t want to have to write out the CSS.
So, border style, default, main menu link supplemental styles. Although we could say 0px for this drop shadow, 0px and 0px to get rid of the drop shadow entirely. In fact, we could do that same thing over here and give this one a little drop shadow. Let’s come over to this and go to our main submenu link supplemental style, we could actually give it a darker drop shadow and then say 3px, 3px, 3px.
Say okay to that, save our design options and refresh the page. Now our drop down menu, oh isn’t that interesting? So each menu element then has that appearance of the drop shadow which is not exactly what I was expecting but it’s not entirely unpleasant either. You have that sort of definition that’s possible so you can end up with some pretty cool things with the supplemental styles.