Build Your Own Business Website header image

How to Create a Dropline Style Menu in Thesis Part 3 – Style the Submenu

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.

In this session we show how to create submenu styles using our Nav Menu plugin. Then we switch to custom styling using relative and absolute positioning to complete the design style. We discuss how the CSS position property works and then show how to apply both relative and absolute positioning to the menu to create the dropline effect we want.

Video Transcript

Rick: Now we have to style the submenu. And the submenu style is going to happen under submenu customization options and we’re going to customize the submenu background. And the link backgroudn, we’re going to customize the background color. And then link, we’re going to use a background image. Hover, we’re going to use a background image and current, we’re going to use a background image. So hit save to that.

And then the link background backgroudn style is going to be transparent. The link background image is going to be not the submenu png. It’s the bullet menu png. Okay so do that and the bullet. It’s not going to repeat in both directions. It’s going to be no repeat. It’s going to be left center so middle left is what it’s going to be. And then the same thing as the current… no, no it’s not the same thing as the current. We’re going to have the dark one there.

So then in our hover, we’re going to make the background transparent but we’re going to pick up the other image which is this one. And it’s going to be no repeat and it’s going to be middle center and it’s going to be transparent, paste it again, no repeat middle center.

Okay, oh isn’t that funny? I must have done middle right for the hover.

Member: It seems that way.

Rick: So no, I didn’t. It’s middle center.

Member: It’s supposed to be middle left.

Rick: Oh, right. I’m sorry. Yeah of course, middle left. Did I do it middle center down here too? I have a way of saying it out loud and then doing it the same way, even if it’s wrong. So middle left… okay, there we go. So we got that happening.

So now we have to switch to the custom styling. And the way this works is a combination… well, what we’re going to be doing is using relative and absolute positioning. Now the position property in CSS will allow you to position something absolutely and that absolute positioning is eitehr in relationship to the browser window itself or in relationship to its nearest container that has a position property. And so what what we’re going to be doing is we’re going to give the menu the position of relative, so the menu now has a position property assigned to it but that position property doesn’t do anything to it. But it allows us to then take this LI item down here and make it position absolute relative to the menu. And so that’s the part we’re going to do next and I’m going to switch to Firefox for that because switching to Firefox gives me Web Developer to play with here which is what I want. And so we’re just going to do it in custom CSS here.

And so what we want is first, we want to take this menu… let’s see, let’s inspect that element and well, we’re just going to do .thesis menu because we don’t want this to apply to any other Thesis menu. We only want this to apply here. So .thesis menu and then we’re going to do .menu. So there’s the container, the menu inside of Thesis menu and then we’re just going to say position relative.

Okay so that’s got that part. And now what we’re doing is we’re working on these LI items and so if I inspect that element, that LI item is menu item 328. Okay so what I’m going to do now is just say LI # menu item 328. That’s not an i, is it? No, it’s not. That was something else. LI menu item 328 and now I’m going to say position absolute. And now this thing is going to be positioned absolutely relative… well, as soon as I give it something to be absolute to, right now, it’s absolutely relative to its own position and steps out of everything so now demo 2 pops up over the top of it.

But next, we’re going to give it a left position and it’s going to be a negative position because it’s going to move it towards the left. So we’re going to say left colon say -150 px. Okay, that’s too far so -150 px. Not enough, -100. There we go.

And actually, we probably should move it over to say 70. But then what we’ll do is move is we’ll move demo 2 over to the right so the next thing then is to take our next menu item which is 298 and position absolute. But we’re going to move it to the right and we’re going to move it to the right say, 10 pixels, see what happens if we do that. Not -10, okay… 100. Oh well, pardon me. Let’s say left. Okay but it doesn’t want to go 100. It’s just going to go 10. Okay, let’s make it 20. And then the next one is going to get rid of the overlap. And it’s not 298, it is 327 and let’s make it 120.

Member: Nice.

Rick: Okay so it’s not lined up perfectly. And so we may want to adjust this one, the first one is off a little bit and you almost want to do top, say 2. I don’t know why that would be the case but it seems like that’s the case here. Okay now it’s too much.

0 Comments… add one
0 comments… add one

Leave a Comment