How to Make Horizontal Navigation Bars in CSS
Traditionally, horizontal navigation bars are made with HyperText Markup Language (HTML) tables, but this method uses excess code that slows down your page. Instead, Cascading Style Sheets (CSS) offer you a solution that works with your HTML, so that you can make an elegant menu that looks good on your Web page and in all browsers. Use your text editor software to apply the CSS that makes a horizontal navigation bar.
Other People Are Reading
Instructions
-
-
1
Start your text editor software and bring up the website document where you want to make the horizontal navigation bar.
-
2
Place your cursor before the ending </head> tag and type the following CSS code:
<style type="text/css">
ul { }
li { }
</style>The unordered list (ul) rule manages the unordered list in your HTML code, and the list (li) rule controls the individual links in your navigation.
-
-
3
Type "list-style-type: none;" inside the unordered list rule to hide the bullet items that automatically appear in an unordered list. Further, type "margin: 0;" and "padding: 0;" to ensure your horizontal navigation bar appears in the top, left corner of your page. To illustrate:
ul { list-style-type: none; margin: 0; padding: 0; } -
4
Enter "display: inline;" in the list style rule to ensure the links in your navigation appear horizontally. Your complete CSS now looks like this:
<style type="text/css">
ul { list-style-type: none; margin: 0; padding: 0; }
li { display: inline; }
</style> -
5
Enter "<ul><li><a href="#">Name</a></li></ul>" under the opening <body> tag where you want your navigation to display. Replace the hash tag in the anchor element with a desired file address, and enter the preferred link title in place of the "Name" in the code. For instance:
<ul>
<li><a href="#home.htm">Home</a></li>
</ul> -
6
Type additional list items to add more links to your navigation bar. For example:
<ul>
<li><a href="#home.htm">Home</a></li>
<li><a href="#about.htm">About</a></li>
<li><a href="#contact.htm">Contact</a></li>
</ul> -
7
Save your file. Preview it in a Web browser to see your horizontal menu.
-
1
Tips & Warnings
The unordered list in your HTML code creates a holder for your menu items that CSS can style.
