roy92
CSS HAXOR
Menus! these little suckers used to drive me nuts when I just started out with CSS, but really, they are quite easy to learn. I just want to show you guys how easy it is to make a CSS menu, so let's get cracking!
There will be a couple (yes, just two) of HTML codes we will be using and use CSS to style it up, the two tags are: <ul> and <li>.
<ul> is the abbreviation of unordered list. This tag specifies what kind of "list" will be shown. For example, the <ul> tags will output lists like this:
While the other type of list type is <ol> which stands for ordered lists, this type of list will output this:
The next HTML tag needed for a menu is this tag - <li> these tags go before each item we want to add in the list, which goes in between the <ul></ul> tags. Anything that goes in between the <li> tag </li> will be considered as a list item.
Example:
remember, we have to close off each <li> tag after each list item with a </li> and to close off the <ul> tag just after the last list item with a </ul>
Now we know the structure of the HTML tags, we can proceed to style it up using CSS.
Stay tuned for the part 2 of this tutorial
There will be a couple (yes, just two) of HTML codes we will be using and use CSS to style it up, the two tags are: <ul> and <li>.
<ul> is the abbreviation of unordered list. This tag specifies what kind of "list" will be shown. For example, the <ul> tags will output lists like this:
- list 1
- list 2
- list 3
While the other type of list type is <ol> which stands for ordered lists, this type of list will output this:
- list 1
- list 2
- list 3
The next HTML tag needed for a menu is this tag - <li> these tags go before each item we want to add in the list, which goes in between the <ul></ul> tags. Anything that goes in between the <li> tag </li> will be considered as a list item.
Example:
Code:
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>remember, we have to close off each <li> tag after each list item with a </li> and to close off the <ul> tag just after the last list item with a </ul>
Now we know the structure of the HTML tags, we can proceed to style it up using CSS.
Stay tuned for the part 2 of this tutorial
