Español

 

English

Practical example of creating a horizontal menu	HTML Document.
Example of the step by step creation of a horizontal menu with HTML lists, and visual format with CSS.
Autor: Wmasterfacil	www.wmasterfacil.com

With this exercise we will create a horizontal menu with lists and we will visually formatting with CSS. The steps are very similar to the exercise of the vertical menu, with some modifications. This example is based on IExplorer 7 and Mozilla 3.0. Maybe, the visual effects will change in the browsers of earlier versions.

First of all, create a list with the menu items. This is, as you know, with HTML and the code would be this (I have invented a menu holders, to look better):

If we executed the EXAMPLE, we see the result.

---

^ Top

Now we are going to include code CSS.

First we change the value of the background color of the BODY, to color black. In this way,so our box will be seen, because it will be white.

Also reset the values of margins and paddings to 0, so that these values are equal to any browser.

Then we define a box (DIV) which include our menu and we will give white color.

Also we have specified the type of fonts, the height and the width. The height is even provisional (we will define later it) and the width, we already must have a definitive idea of the value that we want for her.

I have including a TOP: 10px and LEFT: 10px so that the DIV is seen clearly, but soon when we place the menu in our Web,it will be necessary to modify these values, or to erase them.

The EXAMPLE shows the result of the changes. At the moment we see that the values of the list do not fit in the DIV (In IExplorer 6, the box expands to include to the text. This, in this case, is not important).

---

^ Top

Now already we are going to begin to modify our list.

For it, we defined menu UL and we named “menuh" to it. To the menu in general (ul#menuh), we put the margins and paddings to 0 (I am quite insistent in this, but it is better to make sure…), and we eliminated the symbols to him putting the LIST-STYLE: none (we are not going to use them).

To each element of the list of the menu (ul#menuh li) we give a margin him of 1 pixel, and ATTENTION, we put the FLOAT: LEFT.

The EXAMPLE shows the result of the changes. Now the list is already fully within the DIV, because FLOAT: LEFT has done that each element of the list, floats to the left and goes consecutively placing each element next to another.

---

^ Top

We are now going to modify the elements that will be links within our list (which they are all). This we do with tag of CSS (ul#menuh li a).

I have modified many things. At the moment, I have established the height in 30px (the box has 32, that is 30px of links plus 2px of the margins, one of above and one of down). I have established the width in 150px. If we added to the 150, both pixels of both lateral margins of each element, that gives us 152px of width by element. As they are 4, that gives 608px for all the menu. I modify this one value in the total width of the DIV of the menu (#cajamenu), so that the box is of the exact height and the exact width, of the menu.

Then the (display: block;) makes the entire space of each list item is part of the link, the (text-decoration: none;) removes the underline from links, the (font-variant: small-caps ;) it makes all the letters be capitalized and the first letters of each word slightly larger, and the rest is very obvious. We focus the text and make it white, in the color black background, the letter in bold type and size 11px.

The EXAMPLE shows the result of the changes. This is going to look like a menu.

NOTE: In IExplorer 6, our box will need a pixel. I have thought a thousand times about it and I have not found logical or illogical reason for this, but the width would be necessary to extend it to 609px. For a strange reason that I do not understand either, if margin: 1px; we cleared it of (ul#menuh li) and yes put in (ul#menuh li a), then that enters the original measurement, that is to say, 608 pixels, wich is correct.

---

^ Top

Now I am going to only change two small details, that are going to give very different aspect to our menu.

First I am going to write the text of each element of our menu in two lines. For it I will only include < BR > in the place where desire that becomes the jump of line, within each line HTML of the type “< LI > < A HREF… “.

Soon I am going to add the image following (negro.jpg) like background of each element of the menu, in (ul#menuh li a).

Here we see the code. I repeat that I have only included the last line in (ul#menuh li a), and addition tag < br > in each element of the list, within < BODY >. The rest is just the same as the previous code.

The EXAMPLE shows the result of the changes. Now it already seems another thing far better.

---

^ Top

We finish.

Now we add the effects that each element will take from the menu when the mouse positions on them. Simply I am going to enlarge a little the text to 12px (in normal way it is to 11px) and am going to put of background the following image (rojo.jpg)

The code that I have included, just before tag < /SCRIPT > , is this one:

An this EXAMPLE shows the final result of our horizontal menu. You pass the mouse through the options of the menu to see the effect.

---

^ Top

We are now going to place our menu in the Web layout that we have, where we have already placed the vertical menu of the previous tutorial.

For it we copied and we pasted code CSS of our menu in the file .css of layout, and placed code HTML of the menu in its site.

I have eliminated top: 10px; left: 10px; in div “cajamenu”, that was put oo provisional form. Now, as the menu occupies 608px of width and div that now contains (cuerpo) it occupies 620px of width, I put left: 6px; in order to center it (620-608=12/2=6px).

This last EXAMPLE shows the final result. File CSS is misestilos7.css (if it is not seen well (it happens when they are open from Internet Explorer), you store in desktop and open with Worpad, for example so that the characters of end of line and carriage return are seen correctly), and code HTML you can obtain it you yourself of the execution of the example with the options of the navigator To see/Source code (I do not put it because he is quite long).

This is everything. If you have doubts, you expose in the Link of down.

---

^ Top

Policies