Build Your Own Business Website header image

How to Create a Dropline Style Menu in Thesis Part 2 – Create the Top Menu Level Styles

Difficulty Level -

Filed Under Topics - ,

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.

In this session we show how to create the top menu level styles using the Nav Menu under Thesis Design Options and our Thesis Nav Menu plugin. We set the font styles and colors, set up the typical menu item styles, setup the link background style, make the background color transparent.

Video Transcript

Rick: So what we’re going to have to do then is we’ll get the colors and font style set first. And we’re going to actually do that under the Thesis Design Options under the Nav menu. And the font style we’re going to use is going to be Arial. We’ll go ahead and leave it at font at 14. The link text color is going to be a really dark gray but not black, right? So let’s just set it at that. The link hover color will be black. The link current text color will be black. And I think we’re going to take the link current parent text color and we’ll just make it this dark gray. So we’ve got that stuff set up. Hit save.

Now I guess the other thing we want to do is get rid of the border. So I will set the border to 0, come back over and refresh it, see what it looks like. Okay so we’ve got a little bit of starting here and the rest of the styling here is going to happen inside the plugin itself. So we go back to our Nav Menu plugin and we aren’t going to do any customization of the overall nav menu. So we aren’t going to set any styles but we are going to some customization of the typical menu styles. And in that case, what we’re going to do is customize the typical background. And then we are also going to create a special menu item for that second menu item. So what we’ll do is we’ll say customize each menu item separately. Now ultimately, we won’t be doing each menu item separately. We’re just going to define one of them. But nevertheless, we’ll click customize each menu item separately and hit save.

And so now that we have this set up, we can set up our link background style. And our link background style, we’re going to say customize the background color but we’re not going to use a background image for the link background style. The hover, we’re going to say… actually, we’re only going to say use background image, in this case. The current background style, we’re going to say use background image and the current parent background style, we’re just going to leave alone. No, we’re going to customize the background color. And actually, I think we’re going to have to do that with all of those. We’re going to customize the background color on all of them.

And then now the link background color, what we’re going to do is make it transparent. That’s the thing we have to do here is make these backgrounds all transparent so they no longer display any background colors. Now we could’ve just made the background color as white obviously but instead of using that transparent but I like transparent better.

Then now our… yeah, let’s see. In terms of our typical item customization options, we have too many tabs that we can style so we’re just going to define one style for this and that’s this menu here, right? The one with the drop down is going to get some special styling and everything else will be styled the same.

And so if we come back down to our link background style, it doesn’t use an image. Our hover background style is going to get a hover background image. So I’m actually just going to steal the background image from this site.

Member: That’s fine because it belongs to us.

Rick: So I’m going to come over here and go to Resources. And what I really have is 4 images I need to steal. I have the menu hover background image. I have the submenu background image. I have the submenu hover background image and there’s one other one in here. Where is it? Yeah, the hover for the submenu, right. And okay so these two so bullet menu, bullet menu hover. Okay so I’m just going to download these. Let’s see, okay save as and then I’m just going to save it to my downloads folder, bullet menu png. And then for the purpose of doing this, I can actually just use this menu, this link too. You would put the stuff in here in your library but I can just copy these link addresses instead of putting them in my library. So that’s what I’m going to do here. So we’re talking about the hover background image and the standard hover background image then is this one here. No, where did it go?

Member: Menu hover and the little one is…

Rick: Okay so I’m going to copy that link address, paste it here. It’s not going to… well actually, this kind of repeats horizontally in case it’s not quite the right width and it’s going to go to bottom center. And we’re going to not give it any position at the moment so we’ll try that, repeat horizontally bottom center. Actually, let’s not repeat it. Let’s say no repeat and see what happens, no repeat. And then our current background style is also going to have the same one, no repeat bottom center and the current parent is going to stay the same.

Okay so if we want to get this thing separated… right now, this goes all the way across. We could give ourselves a little bit of typical margin in between the two. So the typical item margin, if we select that and customize it and then typical item margin, we could just say typical right margin say 10 pixels and refresh it. Now we’ve got a little bit of separation there.

Okay so far so good. If we go to Mommy Blogger, that’s the only one that’s dark. If we go to Carousel, okay.

So now Carousel is the one that we want to change so that it has a link condition with a little arrow under it, a hover condition with a line and the arrow, a current condition with a line and the arrow and the current parent condition probably with just the arrow.

So we’re going to do that by using our tab 1 style and what we’ll do is we’re only going to customize the tab 1 background. And in terms of its background, we are going to customize the background image only but each of these is going to have its own background image set up. So we’ve got all 4 background images that we’re going to style. Hit save.

And then our link background style is going to be the little submenu png. Is that it? Yes, that’s it.

Member: Yes.

Rick: So we’ll copy that link address and put it here. It’s no repeat bottom center. Now we may need to give ourselves a little bit of padding in this thing too so that it shows up… so we can see it. But we’ll just see that as we go here. Then our hover… let’s see, our current parent is going to have the same one, no repeat bottom center. Okay and then we have the other conditions, the hover background and that is submenu hover, no repeat bottom center. And then the current parent is the same, no repeat bottom center. And now we say that, come over here and refresh it… oh isn’t that interesting? Why is this being told it is tab 1? Oh crazy. Absolutely crazy. This is a new addition, I think, of Thesis 1.8.5. I could be wrong about that.

What we really want… this is tab 3, I think, right? That’s tab 3 so what we really need to do… what I thought I was going to do was add a custom class to this menu item. And actually, let’s just see what happens if what we do is we change the menu that we choose here. So nav menu and header, rather than using the Thesis Nav Menu, if we use the… no, if we use the main menu, we have to use the Thesis Nav Menu because we’re using the Thesis Nav Menu plugin. So that just means that we have to say, in terms of our typical item customization options, we have to pick 3 tabs.

Member: Right.

Rick: And then we won’t customize anything in 1 and 2 but we’re going to customize the background in 3. I thought I was being clever and I was going to show you where you have to change the custom class for that menu item. But this on snuck up on me.

So this is the link backgroudn condition and customize backgroudn image, customize or use background image, use background image and use background image and then link background image, bottom center no repeat. And actually, that was current parent. No repeat bottom center and then up in tab 1, the hover background image was this image. And so link hover no repeat bottom center current, no repeat bottom center and then we just turn off all the link background… the tab 1 background style. Okay and just for grins, I’m going to save it twice because sometimes, it needs to cycle all the way through this stuff and I’m going not going to customize any of those.

Okay so tab 1 styles, tab 2 styles, and tab 3 styles are all saved. And now if we come over and look at this, okay so we got that part done.

0 Comments… add one
0 comments… add one

Leave a Comment