| Good. We have learned enough so far, enough to make some examples of menus. In this tutorial we are going to make a simple vertical menu, and we will change with different visual options. |
| We have to have in mind that all the code menu will then, within our website, within a DIV, so I will also create a DIV to include the menu. |
| The first thing we will do is create a list of menu options. It's that simple. Let's give it a name and we will put a header, which does not act before our mouse clicks, it will be only a header. For this last one, we will create in the list, a Link A HREF in the elements that are going to be links, and we will not put it, in which it is not going it to be, in this case, the head. |
 |
| Here, aside from defining the container box, I have given to an identifier to our menu (called menu, how original!), I have initialized the margins of the list of the menu to 0, and I have modified the colors of the text and background of the elements of the list. Now we will be changing them. |
| When you run the EJEMPLO, we see that although we have given white color to the text, the elements that are links are seen are blue. You know that already because the links are formatted visually with their pseudo-classes (tutorial previous). |
| |
| Now let's modify various parameters: |
 |
| Affecting the entire list (ul # menu), we have established the type of font, and have removed the symbols that would appears to the left. |
| We also have established the size of the text and the width of the list (not the height, because it will be the sum of the width of each element). |
| Special mention to the LINE-HEIGHT that establishes the height of the line of text and causes that the text lowers within the box and that way we aligned it vertically. I have been tying to estimate the value by rough estimate, until I have reached a suitable one. |
I also have established the border of all the list. I have put it to 1 and in white color.
|
| That they affect each element (ul#menu li), we have defined now, the height of each of them, we have centered the text and we have put the text in bold. |
| Also here, I have put the border in white color and to 1px. I have done this, because this way, the thickness of border between elements is of 2px (1px of border down of the element of above + 1 px of border top of the element from the bottom) and the thickness of the lateral ones also is of 2px (1px of the thickness of border of list + 1px of the thickness of border of the element). Thus all the elements and the environs of the list contain a white border and 2px. |
| The EXAMPLE shows the result of our changes. |
| |
| Now we will modify the pseudo-classes of links. We will define the properties of the elements of the list that have links (ul#menu li a), and of those same elements when the mouse is located on them (ul#menu li a: to hover). |
 |
| First I have modified the margin: 0px of ul#menu by margin: 5px, so that the menu is a little separated from the box that contains it, although it is something that when we include the menu in the final scale model, we will have to be careful. |
| In "# menu ul li a" I changed the background color (a lighter green), I defined the height of the element to 100% to fill all available space of the element, and I removed the decoration of the link (thus it does not leave the line under the letters) and I put white color. |
| The Display: block is important because it makes the whole box of the element in the list act as a link, and simply placing the mouse on any point of the element to will be considered as a link. Had that not been given, only the link text would be considered. |
| But be careful, to cause all the element of the list to be a Link causes that the property list-style-type is not seen if we put some type of emblem to the left like ' square' or circle'. |
| Finally, the pseudo class: hover we have restored again the original color. |
| |
| Running the EXAMPLE we can see the final result of our menu. |
 |
| Here I put two more examples. EXAMPLE 1, EXAMPLE 2. Studying the code yourself. I have only changed a few lines. |
| |
| Now I have copied the files of the layout that was done in a previous tutorial and I have introduced in fichero.css (here, data from the stylesheet were in a separate document) the piece of code in our first example. |
| The CSS file is misestilos6.css. If it is not read correctly (it happens when you open it from Internet Explorer), you store it on your desktop and open it with Worpad, for example, so that the end of line characters and carriage return are seen properly. |
| And in the original HTML file (the layout of our website) we have added within the DIV "izquierda" (which marks the area in red), our menu. |
| The result is observed when running this EXAMPLE. |
| The menu is not exactly as we want, because it is a bit shorter. |
| Then expand our list (from 150px to 185px) and change the red color of the box by # bbdeb2, and color of the outer border of our list, to black. |
| This last EXAMPLE shows the final result. The file CSS is misestilos7.css and the HTML code you can get it yourselves from the implementation of the example wiht the options fro the browser View / Source Code (do not show it because it is quite long). |
 |
| That is all. If yo have doubts, write it on the link below. |
| |
Español
English
Home Page
