Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Style the Menu Using Skin Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we have created our menus for this Professional Services Website let’s style the main menu. Come back over here to Menu Style Options and we’re going to grab the main menu. With a menu like this when you are styling the colors you essentially have two different elements to style and three different states for each of those elements.

Two Elements to Style

The elements are the background of the menu item and then the text of the menu item. Those are the two elements.

Three Different States for Each Element

And then every menu item has one of three states. It either has its standard default link state which is what it looks like if you’re not hovering over it or clicking on it. It has the hover state which is what it looks like when you are hovering over a menu item with your mouse. And it has the current state which is what the menu looks like if you can see the menu item and that menu item is the current page.

Style the Main Menu

When styling our menu here the first thing we’re going to do is center the menu. So we check that box. And then we’re going to set our menu color options so check that box. And then in terms of linked text, our link text, we’re going to choose the light text. We’re going to skip the custom color.

Background Styling

For the link background we’re going to choose our canonical green. We’re going to skip that one and we are not going to use opacity here.

Text Styling

Then for our hover text it looks like we’re using a gray. Actually we’re using a very light white. So rather than using the light text we’re going to come down here to the lightest white which is that one.

And then for hover text we’re going to again choose the lightest white and the hover background is going to be the medium dark contrast so it’ll be lighter when we hover over it.

Then the for current text we actually don’t want that to show up any differently than normal. So, it’s going to have the light text color and then the background will be the canonical green. And that gets our colors set up.

Our menu link decoration and hover decoration are fine. Our padding is fine. For our font family I think we said we’re going to use Arial so let’s set that. We want that font to be 18 pixels.

And there were another couple of things I wanted to do to this. I wanted to make it all uppercase letters. So, font text transform uppercase and then I want there to be a little spacing between each letter. I’m going to say 1px for that. And close that and save our menu options.

Styling the Submenu

Our menu should have undergone fairly significant change at this point. Now the difference between that menu and this menu is that you can see that the submenu is styled differently. You can actually see through the submenu color and you can also see a little drop shadow around that submenu so that the next thing we’re going to work on.

Color Options

Choose this and let’s come back over to our menu. Now we’ll choose our main menu submenu. Choose our color options. The link text can stay fine but the link background should be canonical green. We’re going to give it a 0.8 opacity. Hover is fine. Hover text color is fine. Hover background color is fine.

So I think that’s all we’re going to change on colors. This is just so that when it drops down you can see through it.

Font Options

However, we do want to change the font. In fact I took that down to 17 pixels. And then under Additional Styles under Font Style I’ll make it italic. Under text transform, now we’re going to say none. And under letter spacing we’re going to say 0px so that we don’t get any letter spacing there. And in Font Text Align we’re going to say left.

Let’s save that menu. Reload it. Okay, we still don’t have our opacity. And we still have to work on the border. Let’s try this main submenu again. Link background opacity. It’s working here so why isn’t it working over here? Link background is canonical green and 0.9. Hmmm. Well let’s just go back over there and do it again.

Link text is the lightest. Canonical green at 0.9. And then hover text was lightest. Hover background was medium dark contrast and there is no opacity. Current text was light text. Current background was canonical green without opacity. So let’s save the menu again. Go back over and reload it. There we go. Now you can kind of see through it.

Add Drop Shadow Using Link Supplemental Style

The other thing I want to do is add that drop shadow. And you add the drop shadow in these supplemental styles. The drop shadow is the kind of thing you only need to add once. So we’re going to add it to the Link supplemental style.

Now when you are using the supplemental style the very first thing you have to do is choose which menu it applies to. This time we’re going to make it apply to the main menu.

We don’t need a background image and we’re not going to set the menu item width. We’re not going to do anything with margin but we are going to add a border. But not a border that you can see like that. It’s going to be a drop shadow which is inside the border choice.

We’ll choose black for our color. We’ll go ahead and use the 3px, 3px, 3px for our offset and blur and we’ll use 0.3 for our color opacity. Now it’s setup exactly the same way except we don’t have that stuff under it. Oh, this is link supplemental. That’s the problem. I’m choosing the wrong one to make changes to. I need to choose the sub menu link supplemental styles. I’ll set those the same way and we’re done.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment