Build Your Own Business Website header image

How to Create an apple.com Style Menu in Thesis 2 – Part 4 – Add Border and Corner Radius

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

The next thing we’re going to do is give our apple.com style menu a border and give it some corner radiuses. We’ll come back over to this and our border, we’re just going to give it a 1 border width. It’s going to be solid but the border color is going to be slightly darker than this. So if we click on that and then just push this back away to the darker, we can copy this, hit cancel and come back over to our border color and paste it in.

Then our corner radius, I think we’re just going to do 4 pixels and let’s hit save now and see what happens, okay there we go. Maybe that’s a little too dark that little border but you kind of get the idea where we end up with a little bit of border standing off. And what we need to do is come up with a hover style for this.

Style the Menu Item Location

The other thing we need to do is we need to make these menu items sit in the middle of their respective locations. So we come back over here to our supplemental menu style and actually, we don’t have to do it that way. We can do that inside of the regular menu package because the regular menu package has the text align center so now each one of these is centered in its own menu location.

Add Hover Condition

Now, we’re going to give it a hover condition and the thing that governs this is I think it’s .menu a:hover. So what we’re going to do then is come back over to our Menu Demonstration, Additional CSS so we’ve got our #menu-simple-menu.menu and then we’re going to say a:hover, opening and closing then we’ll say $grad2, save.

Then if we want a stronger demarcation, I’m not actually sure that you do want a stronger demarcation but if you want a stronger demarcation, we can come over to this Menu Demonstration, over to Options and down to Menu Item Settings, Links and Border.

Customize the Border Style

What we really want is just a border on the left hand side so we’re going to say 0 for top, 0 for right, 0 for bottom, 1px for left. Then I’m just going to pick kind of a lightish gray color here for the moment for this moment and we’ll see what that looks like. Actually, that looks pretty good all by its lonesome.

I supposed if we wanted that color to be more like the color that we’re using…I don’t know, I’m not sure I want it to stand out quite that well, what’s the Apple one look like? Okay well, I guess you do kind of see a line pretty well, let’s just try that color again. Let’s take this color, just darken it up a little bit and see what happens.

The supplemental menu style, we’re just going to change that border color. I don’t know, I think I probably prefer it a little subtler so maybe in fact, I would go a little darker, let’s just try that one more time, let’s try for something subtler. What you’re observing is that this widget styles package can be used to style lots of different things, it doesn’t have to just style only one aspect or only widgets. It can be used to style just about any kind of a container actually. Okay, that’s a little subtler, I like that a little bit better actually.

So now that we’ve gotten to that point, we need to save the CSS and refresh it and there we have it, a nicely spaced-out menu. I mean, you might want to change text colors and stuff like that too but you’ve got a nicely spaced-out menu, you’ve got a nice effect with gradients, that’s a pretty decent looking menu.

0 Comments… add one
0 comments… add one

Leave a Comment