Build Your Own Business Website header image

How to Create a Horizontal Menu Using HTML and CSS

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

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.

This member needs to create a horizontal navigation menu but can’t use either the Thesis Nav Menu or the WordPress Menu. In this video I demonstrate how to create a menu from scratch. We use an unordered list with links and CSS styles to create a menu similar in appearance to the Thesis Nav Menu.

Video Transcript

Rick: Okay so why don’t you explain the question?

Dennis: Okay I’ll have a Facebook iFrame working which displays an HTML page and it’s an application actually that I purchased and it uses a 500-wide table or I would imagine to display video in. And it has a navigation menu that’s a pop up from the word navigate and takes you to other parts of the site. What I wanted to do is to implement a horizontal CSS menu. You know, I must be using some CSS and there is a style sheet for the application and there must be a way to use HTML and CSS to create the menu, I would imagine.

Rick: Yes and so how many items are going to be on the menu?

Dennis: There’ll be 4 pages at the moment and I would imagine, sooner or later, there’ll be some menus to add as well.

Rick: Okay because the mechanism for doing that… well, let’s just… let’s see, let’s go… I mean, what you would do is you would use an unordered list. And I’m going to just create one here right now.

Dennis: …if I sent you the HTML for, did I?

Rick: I don’t think so.

Dennis: Alright okay.

Rick: But I can do it right inside of this page too. So if we edit this page…

Dennis: I sent you a link to it on the website that…in a question and answer box for this webinar.

Rick: Okay, you’re talking about when you registered?

Dennis: Yes.

Rick: Okay well I’m just going to quickly put a… I’m going to show you, without going to that, I’m going to show you what I’m talking about here quickly. So if we have a list and let’s just say we want to go to page 1… let’s see, actually let’s make it a list. So page 1, page 2, and page 3 and let’s say page 4. Okay so we have this unordered list which has text but no link. And let’s say that…well let me see, let’s just go get some links to add to this. Actually, what I’m going to do here is I’m going to disable this plugin to facilitate… where the heck did that go? Oh there it is, deactivate. WordPress 3.1 has this cool feature for linking.

So then I just go back to that page. Okay we’ll go to let’s see, which one of these things is my homepage, I wonder. Okay, we’ll just go back over to here for a second. This is my homepage. I’m going to edit that page again.

Dennis: I like that new feature in WordPress.

Rick: Yeah, I do too. Okay so now we’re going to create this list. Page 1, page 2, page 3, and page 4. And then we’ll link page 1 to let’s see, link to existing content. We’ll link it to that, add the link, and then page 2 will link to Services, add that link. Page 3 will link to strategies and page 4 will link to Demo 3.

Okay so now we have 4 pages that are being linked to and we’re just going to go ahead and save this. And now what you have is where the CSS comes in because this is the HTML part of any menu. It’s just an unordered list.

And so now, you have the CSS that…oh I must have made it an ordered list. Anyway, that gives them in this order like this and so we’ll… let’s just inspect that element for a second. Well and actually, if what we do is if we take this… let’s make it an unordered list UL and UL and if we just… in Thesis, if we give it a class of menu… class = menu and hit update, this is going to change entirely to look like a Thesis menu. And that’s because all of this styling that does this is already defined for us, right? And so…but that’s essentially what a Thesis menu is or anybody’s menu. It’s just this unordered list with this kind of styling.

Now let’s change that class to dennismenu and update that. And now, dennis menu is not going to look the same. And so this is where we start adding CSS to this.

So custom CSS and so you’d start off by making this unordered list, give it a list style of none. So it’s going to be UL .dennis-menu and then list style none. And then what we’ll do is we’ll go down one and say dennis menu LI and that’s the list item for each menu. And first, we’ll say float left and secondly we’ll say padding… let’s go 5 pixels on the top and bottom and 15 pixels on the side. So now you’ve got it in a list like this and then let’s display block and add a background color colon… well, let’s just make it the same as Thesis, efefef semi-colon.

Okay so now you’ve got this menu here and then the next thing to do is give it a hover condition. So menu LI: hover and we can get rid of these little bit but we could make the background color fefefef which I think is reddish. No, it’s whitish. Let’s just make it make it grey. So it’s… oh I didn’t even change it at all.

Okay red…oh it didn’t change it because it was… there we go, grey okay. And we can also make the background color white or the color of the text white, color: white. So now the… LI hover dennis…oh actually, that’s right because what this really is is a link. And so then we’re going to do a couple of link things and it’s not going to be… so we’re going to say dennis menu a hover and then we’ll say color: white. So now, we get the white and then actually, I want to just get rid of the underline for the standard version of this. So we’ll get rid of hover here and instead of color: white, what we’re going to say is text decoration: none.

So now our you know, our little menu has 4 choices. Why didn’t work? Why didn’t that go… oh there we go, okay. And so it has 4 choices and… oh you know what? These should be…actually, now that I say all of that, this is how Thesis does it. It makes this a display block and gives it a background color. Display block and actually, it also does this padding bit. So actually, they way Thesis does is it styles the link. It creates the UL to give it some structure but it styles the link rather than styling the LI. And so, this will go over to here and now, when you hover, it does that.

So that’s sort of a down and dirty menu that you know, you can have a lot of control over, right? You can add more padding, you can make the pieces bigger, you can add lines around it. You can do just about anything you want and you can look at the Thesis nav menu for suggestions you know, of ways to change this behavior.

I just posted a whole new tutorial series… well, not a whole new tutorial series but a whole new lesson in Customize Thesis Like a Pro called Inheritance and Specificity. And that sounds kind of complicated but what it’s really talking about is how the Thesis nav menu shares styles and then differentiates you know, when something is supposed to drop down, when it’s supposed to be a parent color or a hover color. And then if you wanted to… similar to… remember your curved menu issue where we had the round menu buttons on the top but you didn’t want them on the drop down the way in order to make that be specific to individual parts of the menu. So it’s actually fairly straight forward and I think it’s one of my better lessons so I definitely go take a look at it because it will help you look at the Thesis nav menu then for suggestions on how you might you know, do this differently.

Dennis: Yeah, implement it into the HTML.

Rick: Well and the HTML was almost nothing, right? The HTML… I mean, I’m going to post the CSS here on the forum so that you can take a look at it. But the HTML was essentially you know, nothing. It’s this… it’s giving the menu a class, giving the UL a class and then putting LIs in for each of the menu items. That’s it. There’s nothing else to it and then it’s all CSS.

Dennis: What I meant was you can implement it on to the HTML on this index file, index HTML file.

Rick: Well, yes. Any place where you can put HTML, you can put this because that’s all it is. It’s just straight HTML. So if you had a black HTML file someplace, you can place this in it and it would work.

Dennis: Yup, great.

Rick: Okay.

Dennis: Yup.

Rick: And like I said, I’m going to post this code to the forum so that you can get access to it. But what I would suggest you do then is after you watch those things and after you try this, that you try that section in the forum to ask me specific questions and maybe, post the example that you’re working on so that we can fine tune it to you know, make it work the way you want it to work.

Dennis: And I’ll read the section you’ve just put into the Customizing Thesis.

Rick: Yeah.

Dennis: Yeah.

Rick: Okay well, good talking to you Dennis.

Dennis: Thank you.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one