Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Besides the obvious applications for lists, one common usage is for menus. HTML used to have a menu element, but it was rarely used for its intended purpose, and unordered lists have become very common way to do this. Let's make a working copy of menu.html and I am going to rename this to menu-working.html, open it in my text editor. I am also going to open it in the browser here so you can see what it looks like. And here we see at the top, we have a very common-looking menu bar going across the top of the page, and there would of course be content down here underneath it.
It's got these little rollovers that draw a little line under the one that's being pointed out. It's all very common and rather attractive. It's done entirely in CSS. There are no images involved, although of course you can use images, and in many cases images would give you better results. And so you're certainly encouraged to do that where the application calls for it. Let's just page through this HTML file real quickly for those of you who are typing along at home. You'll notice down here at the bottom, we have a ul element, and it has a number of li elements and links with the a element.
Very simple looking and this is not really what you would expect that to look like, is it? You would expect it to be a bulleted list because it's a ul element. Well, this is all done in CSS, and it's not really that hard to do. So, the first thing you will notice is this top menu, and that's an ID selector. And down here in the HTML, you see this ID selector says top-menu for the nav element. The nav element is an HTML5 semantic element. It works exactly like div; in fact, if I were to change this to div, you'ldd see it works exactly the same. I will reload over here. No difference at all.
We use nav because it's, semantically, this is navigation. This is the classic use for the nav element, and this is navigation. And so we've styled the nav element to fit all the way across the page with the width, give it a height of 33 pixels to match these a elements so that it stretches all the way across and it gives us this nice blue bar; margin 0, padding 0 so that it goes all the way to the edges. And then, we have the ul element, which has the menu class, and if we look down here in our HTML, we see class="menu." And that's set to block display. Of course the ul element is already block display, but this is just in case it's been changed elsewhere in CSS.
List-style-type equals none. Width 600 pixels, we know that each element is 100 pixels because that's set here in the descendent a selector. And so, width 600 pixels, margin: 0 auto, that centers it. If we didn't have the width set, or if we didn't have that auto, it wouldn't be centered here. I will go ahead and delete the width and save it and you'll see that it's no longer centered. And I will flush this off to the left, and as I change the size, it's always at the left, and always stays in the same place.
When I put that width property back, you will see that now it's centered and no matter how wide the window is, it's always centered. So that margin: 0 auto is actually a little CSS trick to center things. Now, for each li element, you notice we use a descendent selector from ul menu to li so it doesn't affect other li elements within the document. We set margin to 0 and padding to 0. And then we actually format each element with the descendent selector a, descendent of li, descendent of the menu class of ul.
The first thing we do is we set it to block mode and float: left. Of course, once it's set to float: left, it's already going to be block mode, but I always do this anyway, set both of them when I set the float left. And that way, it's just a visual reminder to me that I am setting something to block mode that might not otherwise be block mode. If I were to delete those two lines, you'll notice that now it's starting to look more like a list. These are now vertically stacked. And it's that float: left and block mode that allows them to stack this way.
Each one is floating left to the right of the one before it, and that allows them to display like this. So, once we've got them in block mode, we treat them as block elements. We've got a max height, we've got a width, we've got margin and padding, and then we set the font and the font-size, and the text-align: center within each of these blocks. You see that the actual word is centered there. And that's all there is to it. The final step is the hover, and so we have the hover pseudo-selector on the a element and we are still descendent in that same tree.
And we set a bottom border with that same red color as the text. So we get that bottom border comes up as we move the pointer across. So, that's really all there is to it. It's very straightforward; a little bit of CSS, and you have a beautiful functional menu out of a ul element. Of course, you can use images, you can set background images, you can do all kinds of things, anything virtually that you can do in CSS to make this fit the look that you're going for, that your designers have set for you, for your site.
Using CSS, it's possible to create a wide variety of menu looks and styles. For more details on this technique, see my course Creating Dynamic Menus on the lynda.com online training library.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101414 Viewers
61 Video lessons · 88175 Viewers
71 Video lessons · 72028 Viewers
56 Video lessons · 103820 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.