Build Your Own Business Website header image

How to Create an apple.com Style Menu in Thesis 2 – Part 5 – Question and Answer

Difficulty Level -

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: I really want to kind of master the art of navigation design whatnot through Thesis. I really like your theme and I also really like the way you teach so hopefully a lot of people will be able to benefit from this.

It’s kind of funny that you were just dealing with a shadow effect with that. We were wondering regarding the navigation that you just made, if there was a way to kind of give it a 3D effect by adding some shadow underneath it.

Rick: And by that, you’re talking about shadow underneath the menu overall?

Member: Yeah, underneath the navigation menu.

Rick: Sure. Because that background package has a drop shadow ability built into it.

Member: Nice.

Rick: So, it probably wants to be minimal but you can go down to the drop shadow and let’s just say it’s 2, 2, 4 and a really light gray, come on. That’s not just a light gray but let’s just try that. There it is so you get a little of that happening there.

Member: Nice. Okay and then, when you created the divider bars between each individual menu item, is there a way to give that some 3D depth too by adding a little bit of like lighter color to each side?

Rick: Well, you do that with the background image then.

Member: Okay.

Rick: And you certainly can. The one problem with that is when you hit the hover, the background image is going to go away because of the gradient because it can’t have a background gradient behind the background image so I don’t think you can.

Member: So if I were to create it like in Photoshop? I could just use individual like a hover picture as well as a…

Rick: Well sure, you could certainly just do the whole thing with background images. I mean you could easily have a background image that is the way you want the whole bar to look and then a background image that is a hover and a background image that is a regular condition that changes the color and that retains the center, the line in between the two. I would probably keep on doing that like this though and just swap out that border with a background image because at least in this case, the menu is flexible.

If you want to add a new menu item you don’t have to change any graphic so all you have to do is just drag the menu item in there and then change the percentage of the width of the menu item or if you want to subtract it or move it around, you don’t have to worry about the graphics changing, all you have to do is change a couple of settings but you certainly can do this with background images. The Apple menu doesn’t do it that way, the Apple menu uses the background gradients just like I’ve shown you here.

Member: Okay. And then, how do you adjust the height of the menu?

Rick: Well, by default you adjust the height and the menu by using padding. You could also specify an absolute height for the menu using my supplemental menu style but for this kind of thing, you would just use the top and bottom padding in the regular menu styling box package.

Member: Okay.

Rick: That’s what’s happening here, its top and bottom padding are controlling the height, there’s 10 pixels of top and bottom padding and it could be smaller and it could be larger.

Member: Okay. My partner wants me to create something like a tab type menu. Can you check out the transformation.com and take a look at that and then if there’s a simple way to do that from what we did just there I’d like to know, if not, maybe that could be done in a subtraining. You see how it’s like a tab menu almost?

Rick: Yes, absolutely. Now, if you can hang around I’m going to stop for a moment and change the video and take a quick break and then I’m going to take some other questions from folks. I mean if you can hang around to the end, I can also show you how to end up doing essentially the same thing. The only difference between this tab menu and the regular menu is that, it’s not rounded on the bottom and it drops down against the top of the page.

The Carta Nude skin, the skin that’s in beta right now, that has a tab menu, I mean its individual tabs but it has a tab menu and it’s got margins in between each menu items to really set the tabs aside but then it’s just brought down against the top of the page and you can easily not have the margins in here and not have those rounded corners and just have a rounded corner one side, a rounded corner on another, drop it against the bottom of the page and then have the same kind of style that this does. I mean in order to do that, you got to have something hard that this is dropping against rather than floating like this but the concept is essentially identical, it’s just the execution that’s slightly different.

Member: I figured it was and I can really tell that you know your stuff so once I get the ability to tweak and design the navigation menu differently for different sites and all have like a unique classy, I mean to me, I notice your navigation menu is fantastic too and as soon as the person on the website has a question in their mind about what they’re doing there, you want to have like a nice navigation that says, “Hey, come here I’ll take care of you”, you know.

Rick: Sure.

Member: And that’s kind of what I’m trying to hone in and I just want to get that down, I think that I’ll be ready for some other elements of conversion.

Rick: Well, there a million ways to style a menu because actually, menus are very complicated. They have a standard HTML structure and then they have various states and so it’s hard to come up with sort of a generalization of what you do when you want to style the menu but every time you style the menu, you’re manipulating the same sets of elements.

0 Comments… add one
0 comments… add one

Leave a Comment