Build Your Own Business Website header image

How to Create an apple.com Style Menu in Thesis 2 – Part 6 – Member Suggested Tweaks

Difficulty Level -

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.

Member: When you were talking earlier about the gentleman that was asking about the menu and could you add more styling to the menu? I was playing with it and if you took that grad1 that you had and put it in the menu a instead of the menu and then do a box shadow inset on those, it ends up looking like each one is individual.

Rick: Yes.

Member: I played with it but I closed it so that would be one way I use box shadow inset all the time so I kind of play with it a lot but what it ends up making and look like that each one of them is 3D instead.

Rick: Okay.

Member: Actually, it looked really correct when I played with it.

Rick: Well, let’s just walk me through that for a moment then, let’s just try that.

Member: Okay. Well, I did it just through Firebug because I had to with.

Rick: Sure.

Member: What I did was because I couldn’t move the grad1 into the a class or to the menu a.

Rick: Right, but I can. Well, let’s see actually, I want not the widget style. Okay so, menu a, delete that and grad1.

Member: Take it out of the menu 1. And then what I did in menu a then was added a box shadow and inset the box shadow.

Rick: Okay and then in menu a, you added a box shadow inset?

Member: Uhuh.

Rick: So, now I don’t have that added to my thing yet here but…

Member: And I think I did the…

Rick: Box shadow

Member: I think I did the first one at 0.

Rick: Okay.

Member: The next one at 5px.

Rick: Okay.

Member: I think the next one at 18, I’m doing this at the top of my head now.

Rick: 18px?

Member: I think I did because I really wanted to make it look really faded rather than hard.

Rick: Okay.

Member: And I think the last one was 0.

Rick: The last one was what?

Member: 0

Rick: Oh, 0 okay.

Member: I think it was 0, you might have to play with it because I’m trying to remember what I did and then I just put a color that was just a little bit darker than the menu itself. I put 0,0,0 in there just to play with it and then we can play with it in Firebug because that’s what I did first and then change the color and then inset after that.

Rick: Let’s see what it looks like. Let’s see, okay there it is.

Member: Yeah and then I added a little bit of margin between them and I took out the border.

Rick: Right so you made sort of individual buttons then.

Member: Yes and actually, I put the border radius in the menu a as well and then take off the two bottom left and right, you can make them look like tabs.

Rick: And so actually, we aren’t even really using that one anymore at all.

Member: Right, I did it all in menu a.

Rick: And then come back over to here because this actually does have the radius options to it.

Member: I think I just did 5 or 4 to start with and then I started playing with it to make it look like tabs and then I added the right margin of like 10 or something like that to separate them.

Rick: Oh, it still got a little bit of background color there.

Member: Yes. Right, the background color had to be transparent but yes.

Rick: Right.

Member: So then if you took out the border radius on the bottom left and right, it looks like tabs so you can make the top right a little bit more of a radius and the color so that’s another way to CSS to make the menu do some different styling with the menu.

Rick: Come on, let’s see.

Member: And then you still have that hover state which looks cool than the radius that you’d have on there. Radial, pardon me.

Rick: So let’s see, yes, the corner radius then instead of that was 4400.

Member: Yes and that makes it look like tabs.

Rick: At some point it’s going to reload. I think I have to go fix.

Member: Yes, take the border off.

Rick: Yes, I took that background out altogether, I think what we need to do is just refresh the CSS here.

Member: Yes.

Rick: Although my 4400 didn’t work, did it? Where is that background color coming from? Okay, that’s where it’s coming from. Actually, it’s hardcoded in there, menu a, why was the border radius, oh, it’s got to be 4 pixels, 4 pixels not 44.

Member: Oh yes, you’re right.

Rick: And though what we could just do is just get rid of that.

Member: Yes, there. Get rid of the background.

Rick: Yes, and then just get that grayish color to be a little bit more like the real color.

Member: Yes.

Rick: Yes, that’s a great suggestion.

0 Comments… add one
0 comments… add one

Leave a Comment