Have questions? Discuss this HTML5 tutorial with others on the forums.
Ever seen those CSS list menus? Fancy making one? Of course you are! Well, this is a handy tutorial if you want to create a quick CSS menu and be able to control its appearance.
In your HTML page, create a div and place an unordered list in the div, like this:
As you can see from the code, I linked all of our list
items to generic HTML pages. When you use the above code in
your site, you will probably want to link it to specific
pages on your site. Also notice that we've given the list an
id called nav. I'll revisit id names shortly, so
don't worry too much about it now. Anyway, let's proceed to
In the head section, between your <head> and </head> sections of your page, copy and paste the following code:
The code you pasted looks bizarre when you glance at it, but, when you look at it in detail, it is quite simple. First, I specify the properties for width, margin, padding and background color. For each of those properties, I assign them values. Declaring a style - called .menustyling - is only part of styling an html object. You need to call it, and you do that by using the id name along with a div tag:
If you replace the div tag in your list's HTML with the above code, you probably will not see much change. The main advantage of wrapping your list around a div tag is that making future modifications to your list's background color, margin, padding, etc. is very simple. You simply change the code in the menustyling block. You don't ever touch the list's properties. This decoupling of style information from the content is what makes CSS a very powerful tool in your toolbox.
Next you'll want to remove those bullet points from the list, and we may as well fix the padding and margin for the list also. Add the following code directly below the earlier code you pasted between the <head> tags:
Can you spot the difference between what you pasted above and what you already had pasted? They both have the same name - .menustyling. But, notice that the second version of menustyling contains the ul tag in its header. That means that any ul content placed within the menustyling umbrella will have the styles specific in the .menustyling ul class.
What you should have now is a simple list as shown in the image below:
[ how your list should look ]
To see a live demo of the above list, clickhere to view the list in a new window.
Ok, now go back to the style tags, and copy and paste the class below above the </style> tag:
First, notice that all of the above style information is contained under the #nav umbrella. With that simple fact in mind, let me explain each line:
This means this effect will change how the list items (li) containing links (a) in the menu will appear.
This line is pretty self-explanatory. The background color of all hyperlinked list items are set to a kind of sky blue.
This means the element, in this case the list item, will be displayed as a block-level element with a line break before and after the element.
This is pretty self-explanatory also. These three lines specify the width, height, and margin of the element.
The above lines specify the font styles for your hyperlinked list text. Overall, there is nothing tricky to explain here.
By default, all links are underlined. This line of code will remove the underline from the text in your list menu.
This is just some padding to position the font a bit away
from the left and move in the vertical centre of the item.
When you preview your list, you should see the efforts of your labor as shown in the screenshot:
[ your modified list ]
Like with the earlier image, click here to view the above example live.
Now, while still within the style tags, paste the following class:
This will give the list item a hover style. In other words, when the user moves the mouse cursor over the link, the appearance of the hovered over menu item will change based on what you specified in the above code. In our case, the only changes you will see correspond to the color and background-color of your list item.
And you're done you now have a working CSS list menu.
tip: to get more from this you could change the colours in the list item for images, for instance if I swap the background color line in the #nav li a:hover class for the following line:
If you have any questions, post on the forums or contact me.