Introduction to “Horizontal Menus” with CSS


The developing of horizontal menus with CSS is very simple. You can build dynamic menus with elegant features just in few minutes. Horizontal menus are widely used in several WebPages. In my experience I have found that horizontal menus can help you to distribute better the spaces in a website giving you the opportunity to select different options of the webpage in horizontal line. When you are going to write a horizontal menu you can set different kind of styles, colors, fonts and many other settings. With CSS it is simple and powerful creates your horizontal menu for a web page or web application. The following example shows you to define the CSS style for get the menu you desire.

<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
<ul>
	<li><a href="#">make the fist connection</a></li>
	<li><a href="#"> make the second connection </a></li>
	<li><a href="#"> make the third connection </a></li>
	<li><a href="#"> make the fourth connection </a></li>
</ul>
In this paragraph we are going to see a detailed explanation about some of the CSS elements that appears above. When appears expressed the “ul” element the “a” float to the left.  On the other hand, when I use “li” I am defining each of the elements of a list, that’s why each of the links appears inline elements.  Once you apply the element “li” you are forcing this list to be in a unique line. According to the definition of the CSS Style in the header of the page, the “ul” element has a width of 100% and each element of the list (each hyperlink placed in the list) has a width of 6em what means that its size will be 600% bigger than the font size. Moreover you can test is other dimensions, fonts and colors in order you can have a deep understanding of the different functions and features.
</p>
</body>
</html>
You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.