This is Sasha and welcome to another CSS training video where I share with you some more information and educational material about how to modify your business website when it comes to HTML and CSS. Now today, we’re going to take a look at horizontal menus. We’ve already taken a look at vertical menus, but I want to take a look at how you can make a horizontal menu and span it horizontally, left to right. If you’re looking for an extensive menu, this is the tutorial to watch.
Creating a horizontal menu
From our previous video, if you haven’t seen it, go back and take a look at it, we’ve created this vertical menu that we can go ahead and roll over and now we have a vertical menu. Now to create a horizontal menu, I’ll only go ahead and move this a little bit up at the top since we’ll be spanning things wider. Now, to create this – again, I’m still using the UL or unordered list and then I have my LI tags in there and then the anchor tags or anchor links right in there.
I still have this kind of created right there. What I need to do to create a horizontal menu, I’m going to get rid of that width, and you can see how now all of a sudden this menu that’s a vertical menu spans completely wide, okay? I need to get rid of that. If I don’t get rid of that, you’ll see what the problem is.
The next step of what I’m going to do here is I’m going to change the display for the UL LI rule over here so that way the LI tags primarily are displayed inline, okay? That’s going to be the next step. Once I have this shown in line, the next thing I want to do is I’ll float everything to the left, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #3c9663;
display: inline;
float:left;
}
ul li a:link, ul li a:visited{
padding:15px;
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
}
ul li a:hover {
background: #385489;
}
You can see how that is slowly starting to create shape right there. You can see we’re displayed in line and floating so everything gets pushed left, left, left. Now, the problem again as I mention this width 225, if I get rid of that width 225, there we go, that’s our basically horizontal menu right there at the top and as we roll over, it has that same functionality.
One of the things that you could do when it comes to this also is let’s just say you go ahead and for every LI element you could do a border right and I’ll just say 1 pixel solid #ccc, okay? You can see now there’s just like a slight little spacer right there.
If I’m also having a little bit of trouble and I want this to be a little wider in between each one because when it comes to a horizontal menu there’s a little bit of a problem, so I can go ahead and adjust this padding. Instead of just 15, I could do padding 15 on top and bottom but let’s say I go 30 on the right and left and now you can see that kind of widen things out. I typically play with the padding.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #3c9663;
display: inline;
float:left;
border-right: 1px solid #ccc;
}
ul li a:link, ul li a:visited{
padding:15px 30px;
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
}
ul li a:hover {
background: #385489;
}
You could go ahead and play with the height. Let’s say I do like 35 pixels on this and then I’ll also do a line height of 35 pixels. You could do it this way to make it a little more precise but for me, I like playing with more the padding side of things, and it just helps make things a little bit neater for me in my taste. But sometimes you do need to input that height and line-height property within those LI or the anchor link elements right there.
You can see how that menu ultimately works and if I zoom in at 100%, that’s precisely the size of it. If I want to get rid of the border-bottom right there, I could go ahead and get rid of that right there. I have a simple little menu. If you want something a little bit differently on the rollover, let’s say a border-bottom, let’s do this, border-bottom 3 pixels solid, we’ll do black, okay?
You have a black bottom but what we’re going to do is we’re going to have it black only on maybe that roll over or yellow. What I need to do is set the background color to be the same. I’ll have that border-bottom but then are also included in the rollover and the color that I’m going to use, actually let’s make it more like a yellow tone or something a little bit different so that it stands out. So how about, let’s see here, how about something like this yellow color? This should work, okay?
I’ll go ahead and put that in here, and as we do a quick little refresh, as you can see, as I roll over, it changes it to that blue with yellow underneath. Maybe that’s not the best choice so why don’t I go ahead and what will stand out from that blue? How about an orange color? Perhaps you can see it a little bit better right here. We’ll pick this orange color right there.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
display: inline;
float:left;
border-right: 1px solid #ccc;
}
ul li a:link, ul li a:visited{
padding:10px 30px;
height:35px;
line-height:35px
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
border-bottom:8px solid #5dc17b;
}
ul li a:hover {
border-bottom:8px solid #ff9a47;
background: #385489;
}
I’ll go ahead, make that adjustment right there and now you can see that orange on the bottom just so you can see things a little bit better. I’ll go ahead and change that to 8 pixels. I’ll also go ahead and change that to 8 pixels and then you can see that orange on the bottom on that roll over effect.
The one problem of course when you add a border on the bottom is you can see it also creates a little bit of a distance problem right here comparing it to what’s above and that is simply because of that additional border that we added. In order to compensate this, what I can do is adjust that padding so I can reduce that padding on the top or on the bottom. What I have now is padding of 10 and 10 on top and bottom but on the bottom I also have that border.
What I need to do is ultimately leave the top padding and then what I’ll do is change the bottom so we have top right, we’ll change the bottom to only 2 pixels and then we’ll include a left right there. As you can see, that kind of helps adjust things, makes that a little bit more vertically centered and now you can see as I do the roll over, you can see that border on the bottom as well and there is pretty much our horizontal menu within CSS and HTML using the UL or the unordered list property.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
display: inline;
float:left;
border-right: 1px solid #ccc;
}
ul li a:link, ul li a:visited{
padding:10px 30px 2px 30px;
height:35px;
line-height:35px
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
border-bottom:8px solid #5dc17b;
}
ul li a:hover {
border-bottom:8px solid #ff9a47;
background: #385489;
}
Diagnosing problems with CSS
If you’d like to span it more across, I could go ahead and include it in the div tag or even a nav tag right there so meaning our navigation with HTML5. I’ll go ahead and span that right there. The next thing I’ll do is I’ll go ahead at the top and type in the nav. I’ll do background, and the background color I want to use is the same that we have, the green over there which I’m just going to pull that background color form right here, okay?
Let’s take it to the top, go ahead and now as I go ahead and save it, let me see why that’s not showing up, so we have a nav right there. What I can do is type in border and here’s one of the ways to diagnose problems, 1 pixel solid red and you’ll probably see that the overlay property is missing so that red is not spanning there.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
nav {background: #5dc17b; border:1px solid red;}
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
display: inline;
float:left;
border-right: 1px solid #ccc;
}
ul li a:link, ul li a:visited{
padding:10px 30px 2px 30px;
height:35px;
line-height:35px
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
border-bottom:8px solid #5dc17b;
}
ul li a:hover {
border-bottom:8px solid #ff9a47;
background: #385489;
}
I’ve mentioned the overlay property in the past, and this is how you fix this. You go overflow, not overlay but overflow. You could say auto, or you could say display or show, but in this case, we’re going to go with an auto, and you can see how that now works well and now I can get rid of that red border.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
nav {background: #5dc17b;
overflow:auto;}
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
display: inline;
float:left;
border-right: 1px solid #ccc;
}
ul li a:link, ul li a:visited{
padding:10px 30px 2px 30px;
height:35px;
line-height:35px
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: gotham;
background: #5dc17b;
text-align: center;
transition: background-color 0.5s ease;
border-bottom:8px solid #5dc17b;
}
ul li a:hover {
border-bottom:8px solid #ff9a47;
background: #385489;
}
That’s why sometimes using those borders works ultimately fantastic, and that’s how you create an excellent horizontal menu and also how you find and figure out a glitch simply because of doing those inline elements, you can see how that glitch comes up and is created.
