This tutorial will show you how to create a vertical and
horizontal menus in HTML using CSS styles. Before you proceed please
make sure you are familiar with unordered list HTML tags.
Ok, first of all create an HTML menu using the unordered list:
<ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Partners</a></li><li><a href="#">Contacts</a></li></ul> |
Then you need to create new CSS file and attach it to the HTML page:
<link href="style.css" rel="stylesheet" type="text/css" /> |
You can also use the inline styles.
<style type="text/css"> ...here goes your CSS styles...</style> |
As a result you shou have the following HTMl code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link href="style.css" rel="stylesheet" type="text/css" /></head><body><ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Partners</a></li> <li><a href="#">Contacts</a></li></ul></body></html> |
The unordered list has it’s own styles so without any additional changes you have a vertical menu.
As for the horizontal menu you need to perform some changes in HTML and CSS.
First of all add new class to the list, replace <ul> with <ul class="horizontal">
Now in the CSS file let’s make the menu horizontal. The unordered
list has margin and padding values assigned by default. we need to clear
them:
ul.horizontal{margin:0;padding:0;} |
Then make your list items display horizontally:
ul.horizontal li{display:block;float:left;padding:0 10px;} |
_in_US.png)
0 comments:
Post a Comment