This is Sasha and welcome to another CSS training tutorial so that way you learn how to edit and modify your business website. Today, what I’d like to do is share with you how to set up and create a vertical menu, okay? It’s going to be an up and down vertical menu. In another tutorial, I’ll show you how to set up a horizontal menu but in this case, let’s look at a vertical menu and how things are set up.
Creating a vertical menu
In this example, what I have is the stylesheet two in the center right here, the left is the HTML and on the right will be my website. Typically the way vertical menus or most menus are set up in HTML and CSS is within the HTML they use the UL or the unordered list.
What I’m going to do is I’m going to start it out with creating an unordered list. I’ll go ahead and create a few of these elements so I’ll go ahead and type in the links and I’m just going to do let’s say my website right here, and we’ll type in the homepage, okay? What I’ll do is I’ll duplicate this over a handful of times, okay?
--------------------- HTML CODE ------------------
We basically will have a few buttons on this vertical menu, and this is good for a drop-down, this is good for any vertical menu on the left or right side, so if you want to set that up, you could do it like that. Home, About Me, this could be like Contact page, this could be like a Training, Courses, it might be Books, you know, let’s leave it like that. That’s more than enough elements right there.
Styling the menu
What do you need to do style these elements, okay? First, you can see there are bullets that are automatically in place so the way that these works are first you’ll go ahead and style these, okay? All of this work happens within the stylesheet so we’ll go ahead and we’ll first design this big unordered list.
The first thing we need to do is a list-style-type, we’ll go ahead and type in none, and as I do this, you’ll slowly start seeing items refresh here. I’ll also go ahead and set the margin to 0, okay? I’ll even go ahead and set padding to 0, and you’ll see here as these things evolve and what they’re doing, okay? You can see it’s just getting rid of those things from the initial or the inheritance from the unordered list, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
The next thing that I want to do is I want to also target let’s just say the elements on their own for the list, okay? The way that I’ll go about doing this is I’ll set up a rule for the UL IL and you can see I’m doing it in a child selector and then probably I’ll also want to do LI with the anchor link with a pseudo class right there so that way I’m styling the link.
I’ll first tackle let’s just say the UL LI element, okay? That way it’s that LI element. The way that I’m going to do that is just to be able to make things simple or see things, I’m going to do a background here of green, okay? We’ll take this color just to give you and show you what that looks like.
You can see that pretty much every LI element or the list element has this background. The next thing that I could do is go ahead and include something like this like another pseudo element. I’ll go UL LI on hover, okay, and we could say, “Okay. Well, on this one, I want the background to be a little bit different.” I’ll go ahead and just make how about this bluer color, okay? Something like this, okay? That’s what we’ll go ahead and do.
I’ll go ahead and just paste that in there and that way as you can see as I do the roll over, okay, I don’t have to roll over the link right there, okay? Normally, if you roll over the link then you’re able to click it but in this case what I’m doing is I’m kind of converting these things to block elements.
The other approach which is also handy is I could actually do this part within the anchor link. There’s really two ways to go about doing it. But you can see here on the right as I do this, the cursor is not changed so I’d have to use the cursor element and do I believe it’s pointer right there.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
background: #5dc17b;
}
ul li:hover {
background: #7ad6cc;
cursor:pointer;
}
ul li a:link {
}
That way when I roll over, you can see that also changes. If you don’t want to do it this way, what you could do is focus and put all of this actually within this anchor link level, okay? I’ll go ahead and do this right here.
I’ll get rid of this hover right there because what we can do later is convert this to a block level element because you see here’s the problem is that now you can see it spans that because it’s an inline element. What I need to do is display, and then it’s a block level element, and now I have a block, and I get my cursor back automatically.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li a:link {
background: #5dc17b;
display: block;
}
That’s typically the usual approach, but I just wanted to show you how you can also style the LI element as well if you need to design the LI element. Here’s one of the ways you may want to go about doing that. Let me start styling this up, and you’ll see.
I’ll go ahead and do border-bottom 1 pixel dashed and let me pull up color here, again we’ll do something like this, we’ll pull this up to show you where or how I would use that. You could see there’s a little bit of – right there, a little bit of a border-bottom right there. I could also include a little bit of padding so that I could say, “Okay. Well, 15 pixels, okay?”
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #57af8f;
padding:15px;
}
ul li a:link {
background: #5dc17b;
display: block;
}
I have that padding right there, but you can see the background is only affected – right now, I have to click that link, okay? Notice the problem that’s kind of – what’s creating that. If I only have the link right there, that doesn’t work out very well. But you can see how that can work out nicely if I move this background, we go over here, put the background right there and you can see where it is and you can’t see this dashed element as well. Let me brighten it up a little bit. We’ll brighten that, and now you can see right there how I’m styling it nicely.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #89edc8;
padding:15px;
background: #5dc17b;
}
ul li a:link {
display: block;
}
Often, you may want to go ahead and move this padding let’s say move the padding back into the link element right there, okay, and you can the change and effect is very minimal, but you get the idea of how I’m playing around with this.
I might want to go ahead and get rid of the text decoration, for the time being, so now the text-decoration is none. I’ll go ahead and add a color of let’s say white. We’ll go ahead and add a text transform to make it uppercase, okay, and one of the reasons you see why the text isn’t white is also because I visited those links. What I could do is add a comma right there and just do visited. Visited, let’s see if I spoke that right. Visited right there, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #89edc8;
background: #5dc17b;
}
ul li a:link, ul li a:visited{
padding:15px;
display: block;
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
There you go. You can see those are white, okay? I’ve added a comma and added it also as a secondary element and then the other thing is I could do font and the font that I will use is let’s just say Gotham just for example purposes, actually font family is what I want. There we go. Family, we’ll use Gotham. Yhere you go. You’re starting to see this menu come alive. It’s really fascinating, right?
What I can do is add an additional pseudo element. Instead of an alink, I can go ahead and add a hover to this. I’ll go ahead and I don’t need to put all of this back because again the element is taking the initial properties. It’s talking about the states, right, so the state of that element.
If I just want to do let’s just say a roll over effect on this, what I can do is do a roll over on the background and I could do the background roll over on the LI element which is where the background is. If I want that background to be a roll over with a link, I could just move this over actually into the link area.
I’ll go ahead and do that, move that background over there and now you can kind of see that happening, okay? Maybe at this point, the border is a little bit too light right there and I might want to darken it up a little bit just simply by moving some of these things around.
It may affect slightly certain colors and so forth. you have to play around with your menu as you continue to evolve and expand it and build it out. Taking a look at things right there, you can see it’s starting to look pretty good. Let me just see here again, change this color right there. Let’s just see how that looks. Okay, border and everything looks okay, border-bottom looks okay.
If I wanted it a little thicker, I could do let’s say 2 pixels right there and you can see there’s the 2 pixels but ultimately it’s not something that I want. Anyways, we’ll stick to 1 pixel for the time being.
Anyways, in this case and scenario, the next step that I would want to do is let’s just say the roll over effect. What I could do is change the background again since we have this background color already in this greener color and I may want it slightly darker, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
}
ul li {
border-bottom:1px dashed #3c9663;
}
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;
}
ul li a:hover {
background: #385489;
}
I’ll actually change it to let’s just say something a little bit different. Let’s just go with like a blue – dark blue tone so you can see the difference and we’ll go ahead and pop that in there. As I roll over, you can see it’s working out really well. Well, what if I wanted the text to be center? Well, what I could do is text align, put that in the center and there we go and now that text is center and you can see how that menu is raised starting to become created.
You can also do width and the width right here, I could go ahead and say, “Okay. Well, make it 125 pixel wide, okay?”
The issue here is remember we’re targeting this LI element or the anchor link right there. If I do 125 on that element, you can see the dotted line right there still continues moving over there. Ultimately what I need to do is put that either in the UL right here and make it right there and put that there or let’s just make it a little bigger, 225, or I probably could even put it in the LI element but that means that LIs are specified with the width.
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
width: 225px;
}
ul li {
border-bottom:1px dashed #3c9663;
}
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;
}
ul li a:hover {
background: #385489;
}
Either way, right now you can see there are no differences, I could go ahead and just put it in the UL area of the tag and that ultimately makes it looks really nice with this menu, and you can see how that’s moving around really well and that’s how you create kind of a basic vertical menu.
Using the transition effect
One more thing I want to share with you when it comes to CSS3 or HTML5 and some of the new things that are coming out, usually what you can see is this rollover, it’s just swift. It’s automatic as I roll over. But if you’re looking to do a little bit of a transition effect, there’s an exciting element that you could put in or property, and that is transition background-color and let’s say 0.5 seconds ease, okay?
--------------------- HTML CODE ------------------
--------------------- CSS CODE ------------------
ul {
list-style-type: none;
margin:0;
padding:0;
width: 225px;
}
ul li {
border-bottom:1px dashed #3c9663;
}
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;
}
That’s what I want to do and put that in there right there and to show you how this works or what the difference is is if I hit save and I do this rollover effect, look at how it fades into it. If I do let’s say 0.9, okay, you can see how that fade in or the transition takes it time as I do the rollover.
You’ll see it refreshing the browser, refreshing because I have the automatic refresh on, but you can see how that easing works out well. If I do 0.1, obviously it’s quicker, it’s almost instant, but it’s subtle. If I do let’s say 0.3, again you can see with 0.3, it gives a little bit of something and with a point – make ’s do 0.8, still gives you that little bit of extra.
If I do – let me see if I do 1.8, how slow that’ll go and you can see it’s very, very slow. It’s almost to the point of where my automatic refresh is.
Anyways, that’s a cool little additional transition property which we may cover a little bit later, but in either case, that’s how you build out a menu at least on a vertical front and how you customize it and start looking at things.
Ultimately, most menus start with the UL or unordered list tag and then you go ahead and start structuring this to the point where, you know, you’re styling these UL elements, almost all of them will have that list style type as none, you have a zero margin on padding, that’s just pretty standard and then after that it really just comes down to the menu that you’re attempting to build.
