Simple Left Floated Horizontal Menu
When you have a group of list items on your site that you want to draw special attention to, it is easy to create a css horizontal menu. A menu consists of active links, created from what are called list items that are all part of an unordered list.
Set Up Your HTML
The html is fairly simple. You create an unordered list by opening and closing ul tags. Inside of the opening and closing unordered list tags, you insert your list items, which are wrapped in an opening and closing li tag each.
<body>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>My Work</li>
<li>Contact</li>
</ul>
</body>The Float Property
With your html set up, it is easy to set up a horizontal menu. You do this using standard CSS. If you call the selector that you used in your html, you can use the float property. Choose Float: left; to make all of your list items float to the left, which means that they will move to the left as far as they can. If you have no set width for their container, or the width is wide enough, then your list items will appear in a horizontal line.
#menu li {
float:left;
margin-right:30px;
}Your list items will appear in your menu in the order that you have them placed in your html from left to right. This is a simple and effective way to create a horizontal navigation menu using float:left. You will notice that your words tend to run together. Give your list items some margin on the right side to space out your words so that they can be read.
The Result:
Recommended Reading
Tutorials
Templates
1 Comments
0 Comments
0 Comments
Comments
Diego
wow! thanks for all the information you share here!
May 16, 2012
Leave a Comment
Before you comment please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or it will be deleted.