How to Make a Simple Navigation Bar in CSS
Website navigation bars are commonly created using HyperText Markup Language (HTML) tables, but a better way to do this is to use Cascading Style Sheets (CSS). With CSS, you can create a menu that appears successfully in most browsers and that requires less code, resulting in faster page-load times. Use your computer's text editor program to enter the HTML and CSS that makes a simple navigation bar on your page.
Other People Are Reading
Instructions
-
-
1
Start your text editor program and open a website file. Position your cursor in the area where you want the navigation bar to appear.
-
2
Enter the code for an HTML unordered list to create the body of the navigation bar. Type a pair of <li></li> tags for each menu item you want to display and enter the corresponding link address between these tags as in the following example:
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
-
-
3
Scroll to the top of your page and enter the following CSS code before the closing </head> element:
<style type="text/css">
ul { }
li { }
</style>
The unordered list (ul) creates a rule that manages the overall appearance of the list, while the list (li) makes a style for each list item.
-
4
Enter "list-style-type: none;" inside the unordered list rule brackets to remove the default bullets from the list. Further, type "margin: 0px;" and "padding: 0px;" to get rid of any settings imposed by your browser. To illustrate:
ul { list-style-type: none; margin: 0px; padding: 0px; }
-
5
Type "display: inline;" inside the list rule to create a horizontal navigation menu or bar. Your finished CSS code for the navigation bar looks like this:
<style type="text/css">
ul { list-style-type: none; margin: 0px; padding: 0px; }
li { display: inline; }
</style>
-
6
Save your file.
-
1
References
Resources
- Photo Credit Hemera Technologies/Photos.com/Getty Images
