How to Make a Nav Bar With CSS
Using CSS, you can create navigation bars for your website and display the same navigation menu on all of your Web pages without having to manually code it on each page. A website navigation bar typically displays vertically on the left or horizontally at the top of the page. In both instances, you use CSS to create the buttons, links and colors for the layout.
Other People Are Reading
Instructions
-
-
1
Right-click your CSS file and select "Open With." Click the HTML or CSS editor to open the program and load the CSS code.
-
2
Create the styles for your navigation bar. The following creates a class for a horizontal navigation bar:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
-
-
3
Add the class for the navigation links. The code in Step 2 lays out the links so they display horizontally without any bullet points. The following code creates the background button for the links:
a:link,a:visited
{
display:block;
width:100px;
color:#000000;
background-color:#FFFFFF;
text-align:center;
padding:3px;
text-decoration:none;
text-transform:uppercase;
}
The code above creates white buttons with black text.
-
4
Save the CSS file as "styles.css" and open the HTML code for your Web page that needs the navigation bar. Link to the CSS file by adding the following between the opening and closing <head> tags in the document:
<LINK REL=StyleSheet HREF="styles.css" TYPE="text/css">
-
5
Add the navigation bar to your page. With the CSS styles set up, you can create links anywhere on the page to display a navigation bar. The following code creates a navigation bar with three links:
<ul>
<li><a href="index.asp">Home</a></li>
<li><a href="blog.asp">Blog</a></li>
<li><a href="about.asp">About Me</a></li>
</ul>
-
1
