Build Your Own Business Website header image

How to Create an apple.com Style Menu in Thesis 2

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.

Part 1 – Setup the Menu

Rick: So you want to do something like Apple for a menu.

Member: Yes. For example, like they’ve got pretty decent navigation there.

Rick: And by that you’re talking about? I mean what are the characteristics of this that you want to replicate?

Characteristics of Desired Menu Style

Member: To be honest with you, there’s actually two different types of navigation that I found to be very important. The other one is like a Mashable that I don’t want to get into that right now but as far as this one is concerned, this is very simple, very clean and classy, not too much and it’s really lacking what it needs so for like a simple type site without the dropdowns. I like their individual buttons, they have like a gradient, they have a nice classy hover effect and I also really like if you click the search, it has a knead effect.

Rick: Okay. Well, I’m not going to demonstrate the Javascript for expanding the search because I hadn’t thought about that.

Member: No problem, no problem.

Rick: But I am going to demonstrate how to create a bar that looks similar to this with rounded corners and gradient, a little bit of border and equal-sized buttons and that kind of stuff.

Member: Yes, and then also how to integrate it into the page.

Rick: Sure. And now, I’ve assumed we’re talking about Thesis 2?

Member: Yes.

Rick: Okay, no problem. Are you using one of my skins?

Member: Yes, I actually am. If you would like to take a look and…

Rick: Which skin are you using?

Member: I’m using the Agility.

How to Create the Menu Style In the Agility Skin

Rick: Okay, perfect. Well then, I’m just going to take it from here and demonstrate that in Agility.

Member: Okay.

Rick: Okay?

Member: Sure.

Rick: So let’s see, we’re going to start off then by just coming over here to the Skin Editor and I’m in my site that I use for demonstrating stuff in Agility. I’m going to use this color scheme but I’m going to get rid of the long line, I’m just going to put the menu here.

Remove the Drop down Element from the Menu

Now obviously, the menu can go anywhere in relationship to this stuff and I suppose we come look at and dragging it around but there are two things I’m going to do first actually. The first thing I’m going to do is get rid of those dropdown menu items because this menu would be styled without a dropdown menu and so let’s just change the menu here for this then.

We’re just going to create a new menu called Simple Menu and I’m going to add these pages to it and then I’m going to change this to a very simple single word labels or if not single word, short labels so Finished Projects, Testimonials, that’s kind of key to this, Services and Home.

We’ll save that then I think I want to just rearrange things here just a little bit so Home up at the top, Articles at the bottom. Now we’ve got 6 menu items here so we’ll save that menu and then come back over to Skin Editor and we’ll show the Simple Menu rather than the Main Menu in our menu. So our Top Menu Area, the Top Menu is not going to be the Main Menu but the Simple Menu.

0 Comments… add one
0 comments… add one

Leave a Comment